GetUserMidia

by Castrolol

HTML

<div style="display: none">
    <video></video>
    <canvas id="vi" ></canvas>
</div>
<canvas id="ori"></canvas>

JavaScript

navigator["getUserMedia"] = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || 
navigator.msGetUserMedia || function(type, succ, err){ if( typeof err == "function" ) err("not support"); };

var video = document.querySelector("video");
var cTrans = document.querySelector("canvas#vi");
var canvas = document.querySelector("canvas#ori");
var ctx = canvas.getContext("2d");
var ctxT = cTrans.getContext("2d");

navigator.getUserMedia({ video: true }, function(localStream) {
        
    video.src = window.URL.createObjectURL(localStream);
    video.play();  
    setTimeout(function(){
        
        cTrans.width = video.videoWidth;
        cTrans.height = video.videoHeight;  
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;        
   
        transpose();
        
    }, 1000);
    
}, function (err){
    debugger;
    document.body.innerText = ("cannot load webcam, error: " + err);

});

var lastImg;
var lastImg2

function modify(imgData, img2){
    
    var l = imgData.width * imgData.height * 4;
    
    if( lastImg ){
        var nextLast =   img2;;
        for(var i = 0; i < l; i+=4){
            
            var r =  imgData.data[i] ;
            var g =  imgData.data[i+1] ;
            var b =  imgData.data[i+2];
            var a =  imgData.data[i+3] ;
           
            var t = ( r + g + b ) / 3;
 
           
           imgData.data[i] = ( r + lastImg.data[i]  + lastImg2.data[i] ) / 2;
           imgData.data[i+1] = ( g + lastImg.data[i+1] + lastImg2.data[i+1] ) / 2;
           imgData.data[i+2] =  ( b + lastImg.data[i+2]  + lastImg.data[i+2]) / 2;
           imgData.data[i+3] = a;
        }
        lastImg2 = lastImg;
        lastImg = nextLast;
    }else{
    
        lastImg = imgData;
        lastImg2 = imgData;
    }
    
    /*for(var i = 0; i < l; i+=4){
        var r = imgData.data[i];
        var g = imgData.data[i+1];
        var b = imgData.data[i+2];
        var a =...