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

如何解决通过 WebRTC 发送时 video.captureStream 变为绿色

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

this.videoEl = document.createElement("video");
this.videoEl.src = url;

this.videoEl.oncanplay = function() {
    this.oncanplay = undefined;
    this.mediaStream = this.videoEl.captureStream();
};

问题在于，发送此 mediaStream 时，结果是绿色视频，但音频有效：

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

this.canvas = document.createElement("canvas");
this.videoEl = document.createElement("video");
this.ctx = this.canvas.getContext("2d");
this.videoEl.src = url;

this.videoEl.oncanplay = function() {
    this.oncanplay = undefined;
    
    // Some code (stripping a lot of unnecessary stuff)

    // Canvas drawing loop
    this.canvas.width = this.videoEl.videoWidth;
    this.canvas.height = this.videoEl.videoHeight;
    this.ctx.drawImage(this.videoEl,this.videoEl.videoWidth,this.videoEl.videoHeight);
    // Loop ends and more code

    // Media stream element
    this.mediaStream = this.canvas.captureStream(25);

    // Attached audio track to Media Stream
    try {
        var audioContext = new 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]);

    } catch (e) {
        // No audio tracks found
        this.noAudio = true;
    }
};

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

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

你知道为什么视频是绿色的吗？谢谢。

解决方法

事实证明它是一个 Google Chrome Bug。感谢菲利普·汉克。