userhelp - Camera transform

by Nick Hulea

HTML

<canvas id="canvas" width="350" height="600"">
</canvas>
<div id="buttonWrapper">
   <input type="button" id="play" value="pause">
   <input type="button" id="plus" value="+">
   <input type="button" id="minus" value="-">
   <input type="button" id="rotateleft" value="rotate left">
   <input type="button" id="rotateright" value="rotate rightt">
</div>
  <div id="RPHTML5Video" style="position: relative; z-index:;">
   <video id="video" style="" autoplay src="">
   </video>
  </div>

CSS

video{
    background-color:#000;
};
#canvas{
    background-color:#000;
};

JavaScript

var video = document.getElementById("video");
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
navigator.webkitGetUserMedia({
    video: true
}, function (stream) {
    video.src = window.URL.createObjectURL(stream);

    loop();
});

function loop() {
    ctx.drawImage(video, 14, 110, 300, 550);
    requestAnimationFrame(loop);
}

function updateCanvas() {
    ctx.setTransform(1, 0, 0, 1, 0, 0);
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.translate(canvas.width * 0.5, canvas.height * 0.5);
    ctx.rotate(rotate * Math.PI / 180);
    ctx.scale(zoom, zoom);
    ctx.translate(-canvas.width * 0.5, -canvas.height * 0.5);
}
document.addEventListener('DOMContentLoaded', video);
document.getElementById("play").addEventListener("click", function () {
    if (video.paused) {
        video.play();
        play.innerHTML = 'pause';
    } else {
        video.pause();
        play.innerHTML = 'play';
    }

}, false);
var zoom = 1,
    rotate = 0;
var i, j, t;

document.getElementById("plus").addEventListener("click", function () {
    zoom = zoom + 0.1;
    updateCanvas();
}, false);
document.getElementById("minus").addEventListener("click", function () {
    zoom = zoom - 0.1;
    updateCanvas();

}, false);
document.getElementById("rotateleft").addEventListener("click", function () {
    rotate = rotate + 5;
    updateCanvas();
}, false);

document.getElementById("rotateright").addEventListener("click", function () {
    rotate = rotate - 5;
    updateCanvas();

}, false);

window.requestAnimationFrame = (function(){
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          function( callback ){
            window.setTimeout(callback, 1000 / 60);
          };
})();