hasdavidc/webcamImagesToGif-poc.js

## webcamImagesToGif-poc.js
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>POC</title>
    <style>
      #canvas {
        display: none;
      }
    </style>
  </head>
  <body>

    <!--
      Ideally these elements aren't created until it's confirmed that the
      client supports video/camera, but for the sake of illustrating the
      elements involved, they are created with markup (not JavaScript)
    -->
    <video id="video" width="307" height="250" autoplay></video>
    <button id="snap">Snap Photo</button>
    <canvas id="canvas" width="307" height="250"></canvas>


    <img id="canvasImg1"></img>
    <img id="canvasImg2"></img>
    <img id="canvasImg3"></img>
    <img id="canvasImg4"></img>

    <script src="Animated_GIF/dist/Animated_GIF.js"></script>

    <script>
      // Put event listeners into place
      window.addEventListener("DOMContentLoaded", function() {
        // Grab elements, create settings, etc.
        var canvas = document.getElementById("canvas"),
          context = canvas.getContext("2d"),
          video = document.getElementById("video"),
          videoObj = { "video": true },
          errBack = function(error) {
            console.log("Video capture error: ", error.code);
          };

        // Put video listeners into place
        if(navigator.getUserMedia) { // Standard
          navigator.getUserMedia(videoObj, function(stream) {
            video.src = stream;
            video.play();
          }, errBack);
        } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
          navigator.webkitGetUserMedia(videoObj, function(stream){
            video.src = window.webkitURL.createObjectURL(stream);
            video.play();
          }, errBack);
        }
        else if(navigator.mozGetUserMedia) { // Firefox-prefixed
          navigator.mozGetUserMedia(videoObj, function(stream){
            video.src = window.URL.createObjectURL(stream);
            video.play();
          }, errBack);
        }

        var counter = 1;

        // Trigger photo take
        document.getElementById("snap").addEventListener("click", function() {
          if (counter > 5) {
            return;
          }

          if (counter == 5) {
            var imgs = document.querySelectorAll('img');

            // change workerPath to point to where Animated_GIF.worker.js is
            var ag = new Animated_GIF({ workerPath: 'Animated_GIF/dist/Animated_GIF.worker.js', sampleInterval: 2 });
            ag.setSize(320, 240);

            for(var i = 0; i < imgs.length; i++) {
                ag.addFrame(imgs[i]);
            }

            var animatedImage = document.createElement('img');

            // This is asynchronous, rendered with WebWorkers
            ag.getBase64GIF(function(image) {
                animatedImage.src = image;
                document.body.appendChild(animatedImage);
            });

            return;
          }


          context.drawImage(video, 0, 0, 307, 250);


          // save canvas image as data url (png format by default)
          var dataURL = canvas.toDataURL();

          // set canvasImg image src to dataURL
          // so it can be saved as an image
          document.getElementById('canvasImg' + counter++).src = dataURL;
        });

      }, false);
    </script>

  </body>
</html>
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>POC</title>
	<style>
	#canvas {
	display: none;
	}
	</style>
	</head>
	<body>

	<!--
	Ideally these elements aren't created until it's confirmed that the
	client supports video/camera, but for the sake of illustrating the
	elements involved, they are created with markup (not JavaScript)
	-->
	<video id="video" width="307" height="250" autoplay></video>
	<button id="snap">Snap Photo</button>
	<canvas id="canvas" width="307" height="250"></canvas>


	<img id="canvasImg1"></img>
	<img id="canvasImg2"></img>
	<img id="canvasImg3"></img>
	<img id="canvasImg4"></img>

	<script src="Animated_GIF/dist/Animated_GIF.js"></script>

	<script>
	// Put event listeners into place
	window.addEventListener("DOMContentLoaded", function() {
	// Grab elements, create settings, etc.
	var canvas = document.getElementById("canvas"),
	context = canvas.getContext("2d"),
	video = document.getElementById("video"),
	videoObj = { "video": true },
	errBack = function(error) {
	console.log("Video capture error: ", error.code);
	};

	// Put video listeners into place
	if(navigator.getUserMedia) { // Standard
	navigator.getUserMedia(videoObj, function(stream) {
	video.src = stream;
	video.play();
	}, errBack);
	} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
	navigator.webkitGetUserMedia(videoObj, function(stream){
	video.src = window.webkitURL.createObjectURL(stream);
	video.play();
	}, errBack);
	}
	else if(navigator.mozGetUserMedia) { // Firefox-prefixed
	navigator.mozGetUserMedia(videoObj, function(stream){
	video.src = window.URL.createObjectURL(stream);
	video.play();
	}, errBack);
	}

	var counter = 1;

	// Trigger photo take
	document.getElementById("snap").addEventListener("click", function() {
	if (counter > 5) {
	return;
	}

	if (counter == 5) {
	var imgs = document.querySelectorAll('img');

	// change workerPath to point to where Animated_GIF.worker.js is
	var ag = new Animated_GIF({ workerPath: 'Animated_GIF/dist/Animated_GIF.worker.js', sampleInterval: 2 });
	ag.setSize(320, 240);

	for(var i = 0; i < imgs.length; i++) {
	ag.addFrame(imgs[i]);
	}

	var animatedImage = document.createElement('img');

	// This is asynchronous, rendered with WebWorkers
	ag.getBase64GIF(function(image) {
	animatedImage.src = image;
	document.body.appendChild(animatedImage);
	});

	return;
	}



	context.drawImage(video, 0, 0, 307, 250);


	// save canvas image as data url (png format by default)
	var dataURL = canvas.toDataURL();

	// set canvasImg image src to dataURL
	// so it can be saved as an image
	document.getElementById('canvasImg' + counter++).src = dataURL;
	});

	}, false);
	</script>

	</body>
	</html>