Javascript WebRTC从画布阻塞发送流

这个问题很不寻常。我创建Angular应用程序，通过WebRTC在两个对等方之间进行通信。 该架构是简单的2个对等点，从摄像机发送视频流，从其他对等点接收视频流。简单实用

现在，我想向流中添加一些处理，以便向第一个对等方添加canvas元素，如下所示：

    this.localCameraVideoStream = document.createElement('video');
    this.localCameraVideoStream.srcObject = stream;
    this.localCameraVideoStream.muted = true;
    this.localCameraVideoStream.play();

    this.canvas = document.createElement('canvas');
    this.canvas.width = 1280;
    this.canvas.height = 720;
    this.canvasStream = this.canvas.captureStream();

    this.localVideoElement.nativeElement.srcObject = this.canvasStream;
    this.localVideoElement.nativeElement.muted = true;
    this.localVideoElement.nativeElement.play();
    this.redrawStreamToCanvas();

以及将流从

元素绘制到画布的重画方法：

 private redrawStreamToCanvas(){
    const ctx = this.canvas.getContext('2d');
    const width = 1280;
    const height = 720;
    const combinedVideoStream = this.localCameraVideoStream;

    function drawVideo() {
      ctx.clearRect(0, 0, width, height);
      ctx.drawImage(combinedVideoStream, 0, 0, width, height);
      requestAnimationFrame(drawVideo);
    }

    requestAnimationFrame(drawVideo);
  }

只是为了澄清任何疑问。localCameraVideoStream是创建的

元素，用于以

可以从

获取流的方式保存摄影机流。 画布是

localVideoElement只是.html中的一个

，显示当前的“本地”流

问题是，在本地预览中，一切都正常工作。当我将

canvasStream

发送给其他对等方并在一些

上显示它时，我只得到一帧，就这样

---

你知道发生了什么吗？奇怪的是，在预览中是正常的，而没有这种组合，rtc连接也是正常的。

这很可能是因为Chrome的一个bug[功能]，一旦退出视口，就会暂停静音

如果确实是这样，那么这与MediaStream无关，并且已经发生在绘图到画布操作中：

var ctx=canvas.getContext（'2d'）；
如果（（videoin.buffered&！videoin.buffered.length）| videoin.paused）{
videoin.onloadedmetadata=videoin.onplaying=begin；
}否则{
begin（）；
}
函数begin（）{
videoin.onloadedmetadata=videoin.onplaying=null；
canvas.width=videoin.videoWidth；
canvas.height=videoin.videoHeight；
drawToCanvas（）；
}
函数drawToCanvas（）{
ctx.drawImage（videoin，0,0）；
请求动画帧（drawToCanvas）；
}

正文{
边缘底部：100vh；
}

向下滚动，直到视频元素退出。

有点盲目，但是如果你在开始使用它的MediaStream之前先在画布上画一幅画怎么办？如果画布上没有绘制任何内容，IIRC CanvasMediaStream将被静音，我可以很好地看到，如果请求加载静音流，MediaElement初始化可能会失败。好吧，这正是我的情况！我使用webworkers而不是requestAnimationFrame创建了一些变通方法。我不知道什么方法更好。你知道吗？无论如何，谢谢你的帮助@MaciejWójcik不要设置视频的静音，你应该会没事的。你可以把它的音量设置为零。这是最好的方法吗？我的意思是，这在效率上比网络工作者好吗？我这么问是因为我不知道该怎么办choose@MaciejWójcik我看不出网络工作者在这里会有什么帮助。你不能从那里播放

视频

。或者，您是否正在试图解决另一个问题，即当文档模糊时（即当我们关注其他选项卡时），主线程会受到限制？在这种情况下，您可能会对此感兴趣