3

我正在使用Html5 GetUserMedia api 和画布进行网络摄像头流式传输。在播放视频时，我想在代码缩放中放大、缩小、旋转等，旋转不起作用。我的编码与此相同。但他们不使用 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>
4

1 回答 1

7

更新

这不起作用的原因如下：在元素上应用 CSS 转换时，它只会由浏览器以这种方式呈现。如果您尝试使用例如 video 元素并将其内容绘制到画布上，则原始内容将被绘制，不包括 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);
}

我从这里发布的代码创建了一个工作演示。

于 2013-08-28T04:46:30.410 回答