Javascript 如何缩放和旋转由html5 GetUserMedia API通过画布传输的网络摄像头视频？

我正在使用Html5 GetUserMediaapi和canvas进行网络摄像机流媒体。播放视频时，我想缩放、移动、旋转等。 在我的代码缩放中，旋转不起作用。 我的代码与相同，但它们不使用GetUserMedia API和canvas。 这是我的密码

   


<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>

更新

这不起作用的原因如下：当在元素上应用CSS转换时，它只能由浏览器以这种方式呈现。例如，如果您尝试使用视频元素并将其内容绘制到画布，则将绘制原始内容，而不包括CSS转换


因此，为了使其工作，您必须在将视频绘制到画布之前转换画布的上下文

例如-为了方便起见，您可以使用此功能在绘制视频之前设置所有变换：

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.getElementById("rotateright").addEventListener("click", function () {
    rotate = rotate - 5;
    updateCanvas();

}, false);

现在，您可以运行循环（此处使用
requestAnimationFrame
），视频将按照您的意图绘制：

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

正在播放视频，但缩放和旋转不起作用。缩放和旋转功能似乎很完美。@NishamMahsin和我的建议没有改变任何东西？我刚才还注意到您的代码
stage
（
stage.style
）中有一个未定义的值；我已经按照您的建议进行了更改，但在我的代码中，视频也在播放，这是一个代码文档。getElementById（“plus”）.addEventListener（“单击”，函数（）{zoom=zoom+0.1；video.style[prop]='scale（'+zoom+'）rotate（'+rotate+'deg）；}，false）；不working@NishamMahsin好的，我在思考框中花了一些时间，找到了解决方案。CSS转换在用作图像源时不跟随视频元素。因此，您需要转换画布。请查看我的更新答案以及一把工作小提琴。@NishamMahsin当然可以，但rAF将为您提供适当的同步以监视刷新（setTimeout/interval无法做到这一点）。这就是为什么建议使用rAF（而且它的工作级别更低，效率也更高）：-）