title: How to zoom and rotate webcam video which is streamed by html5 GetUserMedia API with canvas?
body: <p>I am using <strong>Html5 GetUserMedia</strong> api and <strong>canvas</strong> 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 <strong><a href="http://isithackday.com/hacks/videozoomandrotate/transforming-video.html" rel="nofollow">this</a></strong>.but they does not use GetUserMedia API and canvas.
  here is My code
  <pre> <code>   </p>
  
  &lt;canvas id="canvas" width="350" height="600""&gt;
  &lt;/canvas&gt;
  &lt;div id="buttonWrapper"&gt;
     &lt;input type="button" id="play" value="pause"&gt;
     &lt;input type="button" id="plus" value="+"&gt;
     &lt;input type="button" id="minus" value="-"&gt;
     &lt;input type="button" id="rotateleft" value="rotate left"&gt;
     &lt;input type="button" id="rotateright" value="rotate rightt"&gt;
  &lt;/div&gt;
    &lt;div id="RPHTML5Video" style="position: relative; z-index: -1;"&gt;
     &lt;video id="video" style="display: none;position:absolute;" autoplay src=""&gt;
     &lt;/video&gt;
    &lt;/div&gt;
     &lt;script&gt;
      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&lt;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);   
  
   &lt;/script&gt;
  </code></pre>