hasdavidc/webcamVideoToGif-poc.js

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

    <div id="videoContainer"></div>
    <button id="snap">Snap Photo</button>
    <canvas id="canvas" width="307" height="250"></canvas>
    <img id="previewImage"></img>


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

    <script>
      // Grab elements, create settings, etc.
      var canvas = document.getElementById("canvas"),
        context = canvas.getContext("2d"),
        gumHelper = window.GumHelper,
        videoContainer = document.getElementById('videoContainer'),
        previewImg = document.getElementById('previewImage'),
        video;

      ///////////////////////

      if(navigator.getMedia) {
        gumHelper.startVideoStreaming(function(err, stream, videoElement) {
          if(err) {
            window.alert(err.message);
          } else {
            videoContainer.appendChild(videoElement);
            video = videoElement;
          }
        });
      } else {
        window.alert('For some reason it looks like your browser does not support getUserMedia');
      }

      ///////////////////////


      // Trigger photo take
      document.getElementById("snap").addEventListener("click", function() {
        capture(function(image) {
          try {
            console.log('image', image);
          } catch(e) {}

          previewImg.src = image;
        });
      });

      var capture = function (callback) {
        var t = new Date();

        var numFrames = 10,
          interval = 0.3;

        var pendingFrames = numFrames;
        var ag = new Animated_GIF({ workerPath: 'Animated_GIF/dist/Animated_GIF.worker.min.js' });
        ag.setSize(320, 240);
        ag.setDelay(interval);

        captureFrame();

        function captureFrame() {
          ag.addFrame(video);
          pendingFrames--;

          if(pendingFrames > 0) {
            setTimeout(captureFrame, interval * 1000); // timeouts are in milliseconds
          } else {
            ag.getBase64GIF(function(image) {

              // Ensure workers are freed-so we avoid bug #103 https://github.com/meatspaces/meatspace-chat/issues/103
              ag.destroy();

              callback(image);
              console.log('time', new Date() - t);
            });
          }
        }
      };

    </script>

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

	<div id="videoContainer"></div>
	<button id="snap">Snap Photo</button>
	<canvas id="canvas" width="307" height="250"></canvas>
	<img id="previewImage"></img>


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

	<script>
	// Grab elements, create settings, etc.
	var canvas = document.getElementById("canvas"),
	context = canvas.getContext("2d"),
	gumHelper = window.GumHelper,
	videoContainer = document.getElementById('videoContainer'),
	previewImg = document.getElementById('previewImage'),
	video;

	///////////////////////

	if(navigator.getMedia) {
	gumHelper.startVideoStreaming(function(err, stream, videoElement) {
	if(err) {
	window.alert(err.message);
	} else {
	videoContainer.appendChild(videoElement);
	video = videoElement;
	}
	});
	} else {
	window.alert('For some reason it looks like your browser does not support getUserMedia');
	}

	///////////////////////



	// Trigger photo take
	document.getElementById("snap").addEventListener("click", function() {
	capture(function(image) {
	try {
	console.log('image', image);
	} catch(e) {}

	previewImg.src = image;
	});
	});

	var capture = function (callback) {
	var t = new Date();

	var numFrames = 10,
	interval = 0.3;

	var pendingFrames = numFrames;
	var ag = new Animated_GIF({ workerPath: 'Animated_GIF/dist/Animated_GIF.worker.min.js' });
	ag.setSize(320, 240);
	ag.setDelay(interval);

	captureFrame();

	function captureFrame() {
	ag.addFrame(video);
	pendingFrames--;

	if(pendingFrames > 0) {
	setTimeout(captureFrame, interval * 1000); // timeouts are in milliseconds
	} else {
	ag.getBase64GIF(function(image) {

	// Ensure workers are freed-so we avoid bug #103 https://github.com/meatspaces/meatspace-chat/issues/103
	ag.destroy();

	callback(image);
	console.log('time', new Date() - t);
	});
	}
	}
	};

	</script>

	</body>
	</html>