MozTechBlog_ImageProcessing_getUserMedia_CSS

var canvasOperate = document.createElement('canvas');
var ctxOperate = canvasOperate.getContext('2d');
var canvasResult = document.getElementById('result');
var ctxResult = canvasResult.getContext('2d');;
var video = document.getElementById('webcam');
var isContinuous = true;
var localMediaStream;
var playButton = document.getElementById('playButton');
var stopButton = document.getElementById('stopButton');

//Checking camera
function hasGetUserMedia() {
    return !!(navigator.getUserMedia || 
              navigator.webkitGetUserMedia || 
              navigator.mozGetUserMedia || 
              navigator.msGetUserMedia);
}

if (hasGetUserMedia()) {
    console.log("Camera OK");
} else {
    alert("Invalid!");
}

navigator.getUserMedia = navigator.getUserMedia || 
                         navigator.webkitGetUserMedia || 
                         navigator.mozGetUserMedia || 
                         navigator.msGetUserMedia;

function onSuccess(stream) {
    localMediaStream = stream;
    video.src = window.URL.createObjectURL(localMediaStream);
    video.onloadeddata = initCanvases();               
    video.play();
}

function onFail(e) {
    console.log('Cannot access WebCAM!', e);
}

function processOneFrame() {
    console.log('process.....');
    
    // get the data of current frame
    ctxOperate.drawImage(video, 0, 0, video.width, video. height);
    var imageData = ctxOperate.getImageData(0, 0, video.width, video.height);
    
    // do something on the imageData...
    
    // show result
    ctxResult.putImageData(imageData, 0, 0);
    
    // ask for next frame
    if (isContinuous) {
        requestAnimationFrame(processOneFrame);
    } else {
        return;
    }
}

function initCanvases() {
    console.log("video.videoWidth = " + video.videoWidth);
    console.log("video.videoHeight = " + video.videoHeight);
    console.log("video.width = " + video.width);
    console.log("video.height = " + video.height);

    if (video.videoWidth == 0 ||  video.videoHeight == 0) {
        requestAnimationFrame(initCanvases);
    }
    else {
        width = 280; // juts for suitable layout...
        height = video.videoHeight * width / video.videoWidth;
        video.setAttribute('width', width);
        video.setAttribute('height', height);
        canvasOperate.setAttribute('width', width);
        canvasOperate.setAttribute('height', height);        
        canvasResult.setAttribute('width', width);
        canvasResult.setAttribute('height', height);

        isContinuous = true;
        canvasResult.classList.add('invert'); // apply CSS filter
        requestAnimationFrame(processOneFrame);
    }
}

playButton.onclick = function() {
    navigator.getUserMedia({video: true, audio: false} , onSuccess, onFail);
}

stopButton.onclick = function() {
    isContinuous = false;
    video.pause();
    localMediaStream.stop();
}

<body>
    <div id="container";overflow:hidden;width:650px">
        <div id="inner" style="overflow:hidden;width:650px">
            <div style="float:left;margin:10px;">
                <input type="submit" id="playButton" class="buttonStyle" value="Play"></input>
            </div>
            <div style="float:left;margin:10px;">
                <input type="submit" id="stopButton" class="buttonStyle" value="Stop"></input>
            </div>
        </div>            
        <div id="inner" style="overflow:hidden;width:650px">
            <div style="float:left;margin:10px;">
                <video id="webcam"></video>
            </div>
            <div style="float:left;margin:10px;">
                <canvas id="result"></canvas>
            </div>
        </div>    
    </div>    
</body>

.invert {
  -webkit-filter: invert(1);
  -moz-filter: invert(1);
  -o-filter: invert(1);
  -ms-filter: invert(1);
  filter: invert(1);
}

.buttonStyle {
    text-align: center;
    color: rgb(215, 211, 200); /* Mozilla sand */
    background-color: rgb(77, 78, 83); /* Mozilla charcoal */
	font-family:'Helvetica Neue',sans-serif;
	font-size:16px;
	line-height:30px;
	border-radius:20px;
	-webkit-border-radius:15px;
	-moz-border-radius:15px;
	border:0;
	width:120px;
	height:32px
}