Как увеличить и повернуть видео в веб-камере, передаваемое html5 API GetUserMedia с холстом?

Question

Я использую Html5 GetUserMedia апи и холст для streaming.while веб-камеры, играя видео я хочу ZoomIn, ZoomOut, поворот и т.д. в моем коде масштабирования, вращения не работают. i закодированы так же, как this. Но они не используют API GetUserMedia и холст. вот мой код

 

<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

Update

Причина, почему это не будет работать следующим образом: при применении 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); 
} 

I created a working demo from the posted code here.