javascript - 实时视频 Media Source Extensions API Error restarting video

Question

我们能够成功地将使用 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) {
        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: " + 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 属性或分配的媒体提供程序对象指示的媒体资源不合适”而失败。

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

标签： javascriptvideostreamingh.264mse