ダイナミックキャンバスを他のキャンバスにコピーしないでください

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