HTML5 Webcam record

Example showing recording video from html5 webcam

by GregoireMTL

HTML

<script src="https://html5-demos.appspot.com/static/getusermedia/whammy.min.js"></script>
<video autoplay></video>
<p><a href="#" onclick="init()">init</a></p>
<p><a href="#" onclick="record()">record</a></p>
<p><a href="#" onclick="stop()">stop</a></p>
<p><a href="#" onclick="load()">load</a></p>

CSS

p {
    margin: 0 0 5px 0;
}

video {
    background-color: #000;
    width: 320px;
    height: 240px;
}

JavaScript

var video = document.getElementsByTagName('video')[0],
    canvas = document.createElement('canvas'),
    context = canvas.getContext('2d'),
    frames = [],
    task = null;

function init() {
    console.log('init');
    try {
        navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
    } catch (e) {
        window.alert('Your browser does not support WebVideo, try Google Chrome');
    }
    if (navigator.getUserMedia) {
        navigator.getUserMedia({video: true}, function (stream) {
            console.log('stream', stream);
            video.src = window.URL.createObjectURL(stream);
        }, function (e) {
            window.alert('Please enable your webcam to begin recording');
        });
    } else {
        window.alert('Your browser does not support recording, try Google Chrome');
    }
}

function captureFrame(time) {
    task = requestAnimationFrame(captureFrame);
    context.drawImage(video, 0, 0, 320, 240);
    frames.push(canvas.toDataURL('image/webp', 1)); // image/jpeg is faster
};

function record() {
    console.log('record', video.src);
    frames = [];
    task = requestAnimationFrame(captureFrame);
}

function stop() {
    console.log('stop', frames.length);
    cancelAnimationFrame(task);
}

function load() {
    video.src = window.URL.createObjectURL(Whammy.fromImageArray(frames, 1000 / 60));
}