Javascript video.captureStream在通过WebRTC发送时变为绿色

我的产品有一个工具，允许您通过WebRTC共享视频。当我们第一次部署它时，我们尝试使用如下代码：

this.videoEl=document.createElement（“视频”）；
this.videoEl.src=url；
this.videoEl.oncanplay=函数（）{
this.oncanplay=未定义；
this.mediaStream=this.videoEl.captureStream（）；
};

问题是，当发送此

媒体流时，结果是一个绿色的视频，但有工作音频：


我们提出的解决方案是创建一个画布，并将视频内容绘制到画布上，如下所示：

this.canvas=document.createElement（“canvas”）；
this.videoEl=document.createElement（“视频”）；
this.ctx=this.canvas.getContext（“2d”）；
this.videoEl.src=url；
this.videoEl.oncanplay=函数（）{
this.oncanplay=未定义；
//一些代码（剥离了很多不必要的东西）
//画布绘制循环
this.canvas.width=this.videoEl.videoWidth；
this.canvas.height=this.videoEl.videoHeight；
this.ctx.drawImage（this.videoEl，0，0，this.videoEl.videoWidth，this.videoEl.videoHeight）；
//循环结束和更多代码
//媒体流元素
this.mediaStream=this.canvas.captureStream（25）；
//将音频曲目附加到媒体流
试一试{
var audioContext=新的audioContext（）；
this.gainNode=audioContext.createGain（）；
audioSource=audioContext.createMediaStreamSource（this.videoEl.captureStream（25））；
audioDestination=audioContext.createMediaStreamDestination（）；
audioSource.connect（this.gainNode）；
this.gainNode.connect（audioDestination）；
this.gainNode.gain.value=1；
this.mediaStream.addTrack（audioDestination.stream.getAudioTracks（）[0]）；
}捕获（e）{
//没有找到音轨
this.noAudio=true；
}
};

这个解决方案是可行的，但是它会消耗大量的CPU，避免编写所有这些代码将是非常好的。我们也有客户抱怨音频有时会不同步（这是可以理解的，因为我使用的是
captureStream
音频而不是视频

起初我认为它是绿色的，因为它污染了
MediaStream
，但事实并非如此，因为我通常可以将视频绘制到画布上，并从中捕获
MediaStream
。PS：我们使用
URL.createObjectURL（file）
调用来获取视频URL

你知道为什么视频是绿色的吗？
谢谢。
事实证明这是一个好主意。
多亏了Philipp Hancke.
——这可能是一个已知的错误