How to zoom and rotate webcam video which is streamed by html5 GetUserMedia API with canvas?

Question

I am using Html5 GetUserMedia api and canvas for web camera streaming.while playing video i want to zoomin,zoomout,rotate etc. in my code zoom,rotations are not working. i coded same as this.but they does not use GetUserMedia API and canvas. here is My code

    


<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: -1;">
   <video id="video" style="display: none;position:absolute;" autoplay src="">
   </video>
  </div>
   <script>
    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);
  setInterval(function () {ctx.drawImage(video, 14, 110, 300,550);
 },20); 
 });
 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;
 var properties = ['transform', 'WebkitTransform', 'MozTransform',
                'msTransform', 'OTransform'],
 prop = properties[0];
  for(i=0,j=properties.length;i<j;i++){
          if(typeof stage.style[properties[i]] !== 'undefined'){
             prop = properties[i];
 break;
 }
   }

  document.getElementById("plus").addEventListener("click", function(){
      zoom = zoom + 0.1;
      video.style[prop]='scale('+zoom+') rotate('+rotate+'deg)';


},false);  
document.getElementById("minus").addEventListener("click", function(){
zoom = zoom - 0.1;
       video.style[prop]='scale('+zoom+') rotate('+rotate+'deg)';   

 },false); 
 document.getElementById("rotateleft").addEventListener("click", function(){
 rotate = rotate + 5;
       video.style[prop]='rotate('+rotate+'deg) scale('+zoom+')';   

 },false);

 document.getElementById("rotateright").addEventListener("click", function(){
 rotate = rotate - 5;
       video.style[prop]='rotate('+rotate+'deg) scale('+zoom+')';

 },false);   

 </script>

Answer 1

Update

The reason why this won't work is as follows: when applying CSS transform on an element it will only be rendered by browser that way. If you try to use for example the video element and draw its content to canvas the original content will be drawn excluding the CSS transformation.

So in order for this to work you will have to transform the canvas' context before drawing the video to it.

For example - for this to be convenient you can use this function will set all the transforms before the video is drawn:

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);
}

When you alter a transform, for example rotate, you simply do this:

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

}, false);

Now you can run the loop (here using requestAnimationFrame) and the video will be drawn as you intent:

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

I created a working demo from the posted code here.