小编mar*_*cco的帖子

我们正在开展一个项目，人们可以在聊天室中使用他们的网络摄像头，他们可以在那个时刻抓取某人摄像头的快照，在上面做一些注释，然后分享修改后的图片，就好像它是他们自己的网络摄像头（例如共享白板）。

将网络摄像头流捕获到可以编辑的画布元素中相对容易。在我们的页面上找到画布元素并在其上执行 .getContext('2d') ，使用一个开放的库向其添加编辑工具。从那个画布中抓取一个流是这样完成的：

var canvasToSend = document.querySelector('canvas');
var stream = canvasToSend.captureStream(60);
var room = osTwilioVideoWeb.getConnectedRoom();

var mytrack = null;
room.localParticipant.publishTrack(stream.getTracks()[0]).then((publication) => {
    mytrack = publication.track;
    var videoElement = mytrack.attach();
}); 

这可以发布流，但是除非您在画布上绘制其他内容，否则不会发送第一帧。假设您画了 2 个圆圈，然后点击分享，流将开始，但不会显示在收件人一侧，除非您画一条线、另一个圆圈或任何东西。似乎需要更改帧才能发送数据。

我能够通过执行诸如 context.fill(); 之类的操作来使用开发人员工具强制执行此操作，但是当我尝试在发布函数之后添加它时，即使在 then() 中……也不走运。

关于如何强制这种“刷新”发生的任何想法？