我们正在做一个项目，人们可以在聊天室里使用他们的网络摄像头，他们可以在那一刻捕捉某人的摄像头快照，在上面做一些注解，然后分享修改后的图片，就像这是他们自己的网络摄像头一样（就像分享白板一样）。
将网络摄像头流捕获到画布元素中并进行编辑相对容易。在页面上找到画布元素并在其上执行.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();
});这样就可以发布流了，但是第一帧不会被发送，除非你在画布上画了 * 其他的东西 *。假设你画了两个圆，然后点击分享，流会开始，但是不会显示在接收者的一侧，除非你画了一条线，或者另一个圆，或者其他什么。看起来它需要一个帧 * 改变 * 才能发送数据。
我能够通过执行context.fill（）之类的操作，使用开发人员工具强制执行此操作;，但是当我尝试在发布函数之后添加这个时，即使在一个then（）中...也没有运气。
关于如何强制进行这种“刷新”有什么想法吗？
1条答案
按热度按时间jgwigjjp1#
因此，这似乎是预期的行为（因此将使我的FF越野车）。
根据帧请求算法的规格：
当 frameCaptureRequested 为 true 且画布已绘制时，将从画布请求新帧。
让我们强调一下“and**the canvas as been painted"。这意味着我们需要这两个条件，尽管 captureStream 本身、它的frameRate参数消失或类似requestFrame的方法都将 frameCaptureRequested 标志设置为true，但我们仍然需要新的绘制...
说明书上甚至有一条注解
此算法导致捕获的轨迹直到画布中发生更改时才开始。
如果在绘制画布之后调用 captureStream，Chrome确实会生成一个空的 CanvasCaptureMediaStreamTrack。
第一个
因此，为了解决这个问题，您应该能够通过从与画布上的第一次绘制相同的操作请求流来获得带有帧的流，如上面示例中的
stream1。或者，您可以在将其globalCompositeOperation设置为“copy”之后调用
ctx.drawImage(ctx.canvas,0,0)，在画布上下文自身上重新绘制画布上下文（假设它是2d上下文），以避免透明度问题。第一次