HTML 5 Video Capture

Capture video from device being used if it has a camera with HTML5/JavaScript.

by craig1000

HTML

<video id="video-stream" autoplay></video>
<div class="clear">&nbsp;</div>
<div>
    <button id="btn-capture-video" class="btn">Capture Video</button>
    <button id="btn-screenshot" class="btn">Take A Screenshot</button>
    <button id="btn-stop-video" class="btn">Stop Video</button>
</div>
<div class="clear">&nbsp;</div>
<img id="screenshot" src="" />
<canvas style="display:none;"></canvas>

CSS

.clear-no-space {
    clear: both;
    height: 1px;
    margin: 0px;
    overflow: hidden;
    padding: 0px;
}
.clear {
    clear: both;
}
#video-stream, #screenshot {
    border: 1px solid #666;
    height: 252px;
    width: 400px;
}
#btn-capture-video {
    color: #ffffff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color: #5bb75b;
    background-image: -moz-linear-gradient(top, #62c462, #51a351);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#51a351));
    background-image: -webkit-linear-gradient(top, #62c462, #51a351);
    background-image: -o-linear-gradient(top, #62c462, #51a351);
    background-image: linear-gradient(to bottom, #62c462, #51a351);
    background-repeat: repeat-x;
    border-color: #51a351 #51a351 #387038;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff62c462', endColorstr='#ff51a351', GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
#btn-screenshot {
    color: #ffffff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color: #006dcc;
    background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
    background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
    background-image: -o-linear-gradient(top, #0088cc, #0044cc);
    background-image: linear-gradient(to bottom, #0088cc, #0044cc);
    background-repeat: repeat-x;
    border-color: #0044cc #0044cc #002a80;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0044cc', GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
#btn-stop-video {
    color: #ffffff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color:...

JavaScript

var btnVideoCapture = document.getElementById('btn-capture-video');
btnVideoCapture.addEventListener('click', showUserMedia, false);

var btnScreenshot = document.getElementById('btn-screenshot');
btnScreenshot.addEventListener('click', snapshot, false);

var btnStopVideo = document.getElementById('btn-stop-video');
btnStopVideo.addEventListener('click', stopUserMedia, false);

var onFailSoHard = function (e) {
    console.log('Reeeejected!', e);
};
var video = document.querySelector('video');
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
var localMediaStream = null;


function showUserMedia() {
    window.URL = window.URL || window.webkitURL;
    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
    if (navigator.getUserMedia) {
        navigator.getUserMedia({
            audio: true,
            video: true
        }, function (stream) {
            video.src = window.URL.createObjectURL(stream);
            video.controls = true;
            localMediaStream = stream;
        }, onFailSoHard);
        // console.log('Good to go!');
    } else {
        video.src = 'somevideo.webm'; // fallback.
        //console.log('getUserMedia() is not supported in your browser');
    }
}

function snapshot() {
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    if (localMediaStream) {
        ctx.drawImage(video, 0, 0);
        // "image/webp" works in Chrome 18. In other browsers, this will fall back to image/png.
        document.querySelector('img').src = canvas.toDataURL('image/webp');
    }
}

function stopUserMedia() {
    video.pause();
    localMediaStream.stop();
    video.src = '';
}