canvas 复制 canvas

Question

场景是这样的，业务上有一个视频通话，视频窗口是canvas的，有需求要做截图的功能，而且截图需要是canvas的。

视频通话的视频源是通过yuv数组传过来的，按点阵渲染成了canvas，如果是通过WebRTC的视频流传输(页面是video标签)就不会出现这个问题。

代码基本是这个样子的

html

<!-- 视频 --><canvas id="video" width="800" height="600"></canvas>
<!-- 截图 --><canvas id="photo" width="800" height="600"></canvas>
<!-- 截图按钮 --><button id="snap-button"></button>

js

$('#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);
});

然而神奇的一幕发生了，点击按钮测试截图效果，大概七八十回有一两回能截图成功，而且还是反的。

我试过如果把需要截图的视频canvas替换成一个静态的canvas，截图是100%成功的，那么问题来了，我该怎么保证动态的视频canvas能够截图成功呢？谢谢。