將動態畫布複製到另一個畫布不起作用

Question

我正在處理基於畫布的視頻通信。

今天，當我嘗試將視頻捕獲到另一個畫布中時，遇到了一個奇怪的錯誤。它有時有效，但有時不會。

這是代碼。

$('#snap-button').on('click', function() { 
 
    var source = $('#video')[0]; 
 
    var target = $('#photo')[0]; 
 
    var context = target.getContext('2d'); 
 
    context.drawImage(source, 0, 0, 800, 600); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- video --> 
 
<canvas id="video" width="800" height="600"></canvas> 
 

 
<!-- snapshot --> 
 
<canvas id="photo" width="800" height="600"></canvas> 
 

 
<button id="snap-button"></button>

```

但是當我測試這個錯誤，我用靜態的帆布代替視頻畫布，比如畫一個retangle，它工作正常100％，但動態幾乎沒有工作。

我該怎麼辦？謝謝！

Answer 1

請按照以下方式編輯此代碼。這是工作示例，您可以將視頻快照製作爲畫布。

var v = document.getElementById("video1"); 
 
var c = document.getElementById("myCanvas"); 
 

 
var ctx = c.getContext("2d"); 
 
$("#snap-button").click(function(){ 
 
    ctx.drawImage(v,5,5,260,125) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p>Video to use:</p> 
 

 
<video id="video1" controls width="270" autoplay> 
 
    <source src="http://www.w3schools.com/tags/mov_bbb.mp4" type='video/mp4'> 
 
    <source src="http://www.w3schools.com/tags/mov_bbb.ogg" type='video/ogg'> 
 
    <source src=http://www.w3schools.com/tags/"mov_bbb.webm" type='video/webm'> 
 
</video> 
 

 
<p>Snapshot:</p> 
 
<canvas id="myCanvas" width="270" height="135" style="border:1px solid #d3d3d3;"></canvas> 
 
    
 
<br><br> 
 
<input type="button" id="snap-button" value="Snap shot">

來源：http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_canvas_drawimage_video