实时视频媒体源扩展 API 重新启动视频时出错

如何解决实时视频媒体源扩展 API 重新启动视频时出错

我们能够成功地将使用 NVENC 库编码的实时 H264 从服务器流式传输到客户端。客户端正在使用 Web 原生媒体源扩展 (MSE)。一切都很好，直到我们需要停止流并继续它，出于任何原因，例如视频流大小改变。对于我的生活，我无法让溪流重新开始。我什至删除了视频元素，创建了一个新元素并重新开始。我尝试干净地将新媒体源重新附加到现有视频元素。我有很多此代码的变体，但这里是流的初始化。这有效...

    this._video = video;

    window.MediaSource = window.MediaSource || window.WebKitMediaSource;
    if (!window.MediaSource) {
        throw new Error("MediaSource not supported");
    }
    this._mediaSource = new window.MediaSource();
    this._video.src = URL.createObjectURL(this._mediaSource);
    var playp = this._video.play()
    if (playp !== undefined) {
        playp.then(_ => {
            console.log('video play started');
        }).catch(error => {
            console.log('video play Failed: ' + error);
        });
    }
    this._video.focus()

    this._video.addEventListener('pause',function() {
        console.info('video paused');
    });

    this._mediaSource.addEventListener('error',function(err) {
        throw new Error("MSE: " + err.message);
    });

    this._mediaSource.addEventListener('sourceopen',function () {
        console.info('mediaSource open');
        this._sourceBuffer = this._mediaSource.addSourceBuffer('video/mp4; codecs="avc1.42E01E"');
        this._sourceBuffer.mode = 'sequence';
        this._mediaSource.duration = Infinity;
        this._safetoAdd = true;

        this._sourceBuffer.addEventListener('error',function(err) {
            console.log("SourceBuffer: " + err.message);
        });
        this._sourceBuffer.addEventListener('updateend',function() {
            this.addVideoBuffer();
        }.bind(this));
    }.bind(this));

这是将段添加到源缓冲区的代码。

addVideoBuffer() {
    if (!this._videoQ.length) return console.error("segments empty");
    if (this._sourceBuffer.updating) return console.error("buffer updating");

    var segment = this._videoQ.shift();
    //console.info("appendBuffer called");
    this._sourceBuffer.appendBuffer(segment);
}

这一切都很好，运行良好。直到流停止，我们需要开始一个新的流。似乎没有真正涵盖此用例的文档和示例。用户可能已经调整了视频流的大小或将其切断并想要恢复它。无论哪种方式，我们都需要重新初始化可能具有不同分辨率的视频流。这是我目前必须重新初始化流...

reinit_video() {
    console.log('reinitializing video');

    this._mediaSource = new window.MediaSource();
    this._video.src = URL.createObjectURL(this._mediaSource);
    this._video.load();
    this._video.focus();

    this._mediaSource.addEventListener('error',function(err) {
            console.log("SourceBuffer: " + JSON.stringify(err));
        });
        this._sourceBuffer.addEventListener('updateend',function() {
            this.addVideoBuffer();
        }.bind(this));

        var playp = this._video.play()
        if (playp !== undefined) {
            playp.then(_ => {
                console.log('video play started');
            }).catch(error => {
                console.log('video play Failed: ' + error);
            });
        }
    }.bind(this));
}

此代码的当前变体比其他变体更进一步，但失败并显示“视频播放失败：NotSupportedError：src 属性或分配的媒体提供程序对象指示的媒体资源不合适。”

我在代码中有打印语句，可以看到在第一个片段被添加到源缓冲区（在重新初始化的源缓冲区上）之前，媒体源状态是打开的，源缓冲区模式是序列，视频元素状态是打开的.一切看起来都很好。底线是视频播放正常，直到它停止并且您尝试从新流重新开始视频。同样，我什至尝试删除视频元素并重新添加一个新元素并使用完全相同的代码来初始化视频，相同的代码可以工作，但仍然失败。