[whatwg] Simple camera proposal

Wed Sep 22 08:15:24 PDT 2010

Nils Dagsson Moskopp wrote:
> 22.09.10 Rich Tibbett<richt at opera.com>:
>
>> Would it be possible to provide JS-based method to capture an
>> individual frame from a<video>  element?
>
> With many demos that copy stuff from<video>  to<canvas>, isn't that
> already possible today?
>

You're right. I was approaching this from the wrong angle. I hacked 
together a quick demonstration for a simple camera capture. Canvas 
security means that this will only run on a web server.

---------

<html>
<head>
   <title>Capture Still Image from Video</title>
   <script type="text/javascript">
var video;
var icanvas;
var ictx;
var image;

var w=640;
var h=360;

function init() {
   video = document.getElementById("sourcevid");
   icanvas = document.getElementById("sourcecopy");
   ictx = icanvas.getContext("2d");
}

function snapshot() {
   ictx.drawImage(video, 0, 0, w/2, h/2);

   var frame = ictx.getImageData(0, 0, w, h);
   var l = frame.data.length / 4;
   for (var i = 0; i < l; i++) {
     var r = frame.data[i * 4 + 0];
     var g = frame.data[i * 4 + 1];
     var b = frame.data[i * 4 + 2];
     if (g > 100 && r > 100 && b < 43)
       frame.data[i * 4 + 3] = 0;
   }
   ictx.putImageData(frame, 0, 0);

   var dataURL = icanvas.toDataURL("image/jpg");

   // Update the image element with the snapshot
   if(!image) {
     image = document.createElement("img");
     image.width = w;
     image.height = h;
     document.getElementsByTagName('body')[0].appendChild(image);
   }
   image.src = dataURL;
}
   </script>
</head>
<body onload="init()">
   <video id="sourcevid" src="vid.mp4" autoplay="true" loop="true" 
width="640" height="360"></video>
   <canvas style="display:none" id="sourcecopy" width="640" 
height="360"></canvas>
   <input type="button" value="Take Picture" onclick="snapshot()" />
</body>
</html>