Question

我正在使用 Html5 GetUserMedia api和画布进行网络摄像头流媒体播放。播放视频时我想要缩放，缩小，旋转等。在我的代码缩放中，旋转不起作用。我编码与 this 相同。但他们不使用GetUserMedia API和画布。这是我的代码

    

<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

更新

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

Quick overview

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

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

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

<强> I created a working demo from the posted code here

如何缩放和旋转由带有画布的html5 GetUserMedia API流式传输的网络摄像头视频？

1 个答案: