My webcam snapshot is being overlay by the gif ??

[tibewww]

here is my situation,

I have a Web App that I'm trying to create, the concept is the following:

People take a picture on them with their Webcam / Phone Camera.

This snap is then, integrated to a gif image ( I let a transparency area to the Gif image), and those 2 images are being completed and rendered as a gif that the user can save.

So far I have all of this working, the problems I'm having are:

The render quality of the webcam snapshot is very bad in colour once is being transform in gif. I fit save in jpg or png, the quality is fine !
Somhow, the gif image is overlaying the webcam snapshot, so the webcam snapshot look terrible as you have color overlaying it and being animated.
Below is the gif I'm using: http://latitudesadventure.co.uk/webcam/assets/images/pattern/montage.gif

You can see the transparency area where the webcam snapshot is going - on the right side. The animated part of the gif ( Zebra pattern on the top) is overlaying the all image and webcam snapshot.

I believe the gif quality render may be due to that issue also.

I'm using different library to achieve this:

Webcam.js https://github.com/jhuckaby/webcamjs TO call the webcam Html2canvas https://github.com/niklasvh/html2canvas to create an image from the snapshot of the webcam Jsgif https://github.com/antimatter15/jsgif To render it as a gif, as html2canvas allow only to save in png and jpeg.

Below is my javascript which allow to save all of this:

`renderCanvasImage: function() {
setTimeout(function() {

            var encoder = new GIFEncoder();
            encoder.setRepeat(0); //auto-loop
            encoder.setDelay(1);


            // encoder.transparent = '#ffffff' ; // transparent color if given
            //   encoder.width(1500);
            encoder.start();


            html2canvas($('#holder'), {
                        onrendered: function(canvas) {
                                encoder.addFrame(canvas.getContext('2d'));
                                document.body.innerHTML = document.body.innerHTML;


                                html2canvas($('#holder'), {

                                            onrendered: function(canvas) {
                                                    encoder.addFrame(canvas.getContext('2d'));
                                                    encoder.finish();
                                                    document.body.innerHTML = document.body.innerHTML + '<img id="image" />';
                                                    document.getElementById('image').src = 'data:image/gif;base64,' + encode64(encoder.stream().getData());

                                                    html2canvas($('#holder'), {
                                                        onrendered: function(canvas) {
                                                            document.body.appendChild(canvas).id = 'hidden';
                                                            var canvas = document.getElementById('hidden');

                                                            var image = new Image();
                                                            //Create a new Image with url
                                                            image.src = canvas.toDataURL("image/gif");

                                                            // Look at URI only and assign to localStorage
                                                            imageURI = image.src;
                                                            localStorage.setItem('image', imageURI);

                                                            //****TODO better removal*/
                                                            $('#cameraContainer, .wrapperInfo, .snap').hide();

                                                            $('#result a, #result img').fadeOut(100).remove();
                                                            $(image).appendTo('#result');
                                                            $('#result').fadeIn(200);

                                                            //Send Data to DB
                                                            Lab.setData();

                                                            //PopUp Message
                                                            Lab.popupMsg();

                                                        }
                                                    });

`

And the Html:

<section id="devicePhoto">


  <div id="holder" class="text-center">

    <!-- Frame For Photo -->
    <!-- Frame For Photo -->


   <div class="snap">

    <!-- Frame Camera -->
    <!-- Frame Camera -->





       <div style="left:100px;position:relative;margin-left:160px;margin-top:60px;top:60px" id="result" class="result">
      <!-- Display Image -->
      <!-- Display Image -->
        <img src="assets/images/silouhette.png" alt="Silhouette placeholder" />
       </div>
    <!-- Generated message -->
    <!-- Generated message -->

         <div class="wrapperInfo">

             <img src="assets/images/pattern/montage.gif">

           </div>

             <div id="cameraContainer" class="result">

         <div id="webcams" style="width: 500px; height: 500px;">
         </div>

       </div>

   </div>
    <!-- PopUp Box Message -->
    <!-- PopUp Box Message -->

  </div><!-- /.end Holder -->
</section><!-- /.end Device Photo -->

I have notice, than the Gif is not being render with background but black, I m wondering if this is problem coming from ?

You can see a Live demo here ( Not compatible with Chrome, you can try with firefox / safari / IE):

http://latitudesadventure.co.uk/webcam/app.html

In the first step, enter whatever name and email, nothing is being saved from this server.

As well, once you took the snapshot, scroll down and click generate to make the gif. You will need to wait up to 5 seconds and scroll down to see the gif rendered.

Really appreciate your advise on that !

Thanks a lot !