3

私はHtml5 GetUserMedia APIとキャンバスをWebカメラストリーミングに使用しています.ビデオの再生中に、コードズームでズームイン、ズームアウト、回転などを行いたいのですが、回転が機能しません。私はこれと同じようにコーディングしましたが、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 変換を適用すると、そのようにブラウザによってのみレンダリングされます。たとえば、ビデオ要素を使用してそのコンテンツをキャンバスに描画しようとすると、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 に答える