mirror canvas video

mirror canvas video

by Thanos Saringelos

HTML

<video id="video"></video>
<canvas id="canvas" width="500" height="500"></canvas>

CSS

html, body {
    font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal, monospace;
    padding: 0;
    margin: 0;
}

canvas
{
    transform: rotateY(180deg);
    -webkit-transform:rotateY(180deg); /* Safari and Chrome */
    -moz-transform:rotateY(180deg); /* Firefox */
}
video{
  width:300px;
}

JavaScript

/*
 * A little experiment inspired by: http://goo.gl/DsFsL
 * @author Justin Windle
 * @see http://soulwire.co.uk
 */

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

window.URL =
    window.URL ||
    window.webkitURL;

var video = document.getElementById( 'video' );

var canvas = document.getElementById( 'canvas' );
var context = canvas.getContext( '2d' );
 

navigator.getUserMedia( { video: true }, function( stream ) { 
  
    video.autoplay = true;
    video.src = window.URL.createObjectURL( stream );
    video.addEventListener( 'loadedmetadata', init );
    video.addEventListener( 'play', draw );
  
}, function(error) {
    console.log(error);
    document.getElementById( 'error' ).style.display = 'block';
});

function init() {
    sw = video.videoWidth;
    sh = video.videoHeight;
    canvas.width = 300;
    canvas.height =300*sh/sw;
}

function draw() {
    
    
    context.drawImage( video, 0,0,300, 300*video.videoHeight/video.videoWidth );
    
   
    
    setTimeout( draw, 1000/60 );
}