[whatwg] Simple camera proposal

Rich Tibbett richt at opera.com
Wed Sep 22 03:45:59 PDT 2010

Would it be possible to provide JS-based method to capture an individual 
frame from a <video> element?

With an implementation of the <device> element [1] we could then capture 
stills from the user's webcam.

The proposal would look something like this:

<video id="webcam" autoplay />
<input id="capture" type="button" value="Capture Image" 
style="display:none;" onclick="captureImage()" />
<device type="media" onchange="showWebcam(data)" />
<script type="text/javascript">
   var streamObj;
   function showWebcam(stream) {
     streamObj = stream;
     document.getElementById("webcam").src = stream.url;
     document.getElementById("capture").style.display = "block";

   function captureImage() {
     var ... = streamObj.snapshot; // Obtain a still from the webcam,
                            // base64 encoded or a URL pointing to the
                            // still's temporary location on the device..
     // do something with the snapshot URL/data...

The result is being able to take photos directly within a web 
application using either a Stream interface method or a method available 
on the <video> element itself.

Could this work and could it be added to the Device proposal? I'll leave 
the idea with you guys.

- Rich

[1] http://dev.w3.org/html5/html-device/

More information about the whatwg mailing list