Question

目标

我正在尝试使用MediaRecorder，MediaSource和SourceBuffer为HTML5视频元素创建一个基本的“DVR”。目前，这只是一个概念证明。然而，由于许多像HLS.js这样的项目利用了HTML5视频元素，我相信这将具有广泛的价值。

代码

以下是我的代码的要点：

<html>
<head>
</head>
<body>
    <video id="src-video" src="http://localhost:8080/video/source.mp4" autoplay></video>
    <video id="dvr-video"></video>
    <input id="seekbar" type="range" min="-120" max="0" value="0" />
    <script>
    var mr; // MediaRecorder
    var ms = new MediaSource();
    var srcBuf; // SourceBuffer
    var srcUrl = URL.createObjectURL(ms);
    var srcVid = document.getElementById("src-video");
    var dvrVid = document.getElementById("dvr-video");
    var dvrData = []; // array of ArrayBuffer
    var queue = [];

    ms.addEventListener("sourceopen", sourceOpen);
    srcVid.addEventListener("playing", setupMediaRecorder);
    dvrVid.src = srcUrl;

    var seekBar = document.getElementById("seekbar");
    seekBar.addEventListener("change", function(e) {
        // Destroy the old media source and make a new one
        URL.revokeObjectURL(srcUrl);
        srcBuf = null;

        ms = new MediaSource();
        ms.addEventListener("sourceopen", sourceOpen);
        srcUrl = URL.createObjectURL(ms);

        body.removeChild(dvr);
        dvr = document.createElement("video");
        body.insertBefore(dvr, seekBar);

        dvr.src = srcUrl;
    });

    function sourceOpen()
    {
        // Create the source buffer
        if (!srcBuf)
        {
            srcBuf = src.addSourceBuffer('video/webm; codecs="opus,vp8"');
            srcBuf.mode = "sequence";
        }

        srcBuf.addEventListener('updateend', function() {
            if ( queue.length ) {
                srcBuf.appendBuffer(queue.shift());
            } else {
                dvr.play();
            }
        }, false);

        // Add all fragments in cache
        var start = dvrData.length + parseInt(seekBar.value);
        queue = [];
        for( var i = start; i < dvrData.length; i++ )
        {
            if (dvrData[i])
                queue.push(dvrData[i]);
        }
        if (queue.length)
            srcBuf.appendBuffer(queue.shift());
    }

    function setupMediaRecorder()
    {
        var stream = srcVid.captureStream()
        mr = new MediaRecorder(stream);
        mr.ondataavailable = function(e) {
            // Convert the Blob to an ArrayBuffer
            var fileReader = new FileReader();
            fileReader.onload = function() {
                // Append this ArrayBuffer to our playing video
                if (srcBuf)
                {
                    if (srcBuf.updating || queue.length)
                        queue.push(this.result);
                    else
                        srcBuf.appendBuffer(this.result);
                }
                // And to our historical array (for seeking purposes)
                dvrData.push(this.result);
                if (dvrData.length > 120) {
                    // Keep only 2 minutes of data
                    dvrData.splice(0, 1);
                }
            };
            fileReader.readAsArrayBuffer(e.data);
        };
        mr.start();
        // Record 1-second chunks
        setInterval(function() {
            mr.requestData();
        }, 1000);
    }
    </script>
</body>
</html>

结果

当页面首次加载时，“实时”视频元素开始播放，1秒后“dvr”元素开始播放 - 延迟时间为1秒。所以它似乎一开始就在工作。

当我执行搜索时，dvr元素变黑并且我在控制台中出现以下错误（行号可能与上面的代码不完全匹配）：

Uncaught DOMException: Failed to execute 'appendBuffer' on 'SourceBuffer': This SourceBuffer has been removed from the parent media source.
at SourceBuffer.<anonymous> (http://localhost:8080/video/dvr.html:80:13)

查看chrome://media-internals了解更多详情，我看到以下DVR播放器：

+-------------+----------------+--------------------------------------------------------------------------------------------
| Timestamp   | Property       | Value
+-------------+----------------+--------------------------------------------------------------------------------------------
| 00:00:00 00 | origin_url     | http://localhost:8080/
| 00:00:00 00 | frame_url      | http://localhost:8080/video/dvr.html
| 00:00:00 00 | frame_title    |
| 00:00:00 00 | url            | blob:http://localhost:8080/cec4134a-4498-43c5-8321-3743761636ac
| 00:00:00 00 | info           | ChunkDemuxer: buffering by DTS
| 00:00:00 00 | pipeline_state | kStarting
| 00:00:00 03 | error          | Unexpected element ID 0xa3
| 00:00:00 03 | error          | Append: stream parsing failed. Data size=112300 append_window_start=0 append_window_end=inf
| 00:00:00 08 | pipeline_error | CHUNK_DEMUXER_ERROR_APPEND_FAILED
| 00:00:00 10 | pipeline_state | kStopping
| 00:00:00 10 | pipeline_state | kStopped
+-------------+----------------+--------------------------------------------------------------------------------------------

Unexpected element ID 0xa3似乎是罪魁祸首。虽然由于某种原因，在首次加载页面时没有抛出此错误（我将ArrayBuffer添加到SourceBuffer，所以如果他们没有在我没有之前抛出此错误知道为什么他们现在扔掉它了）

关于WEBM格式查找0xa3，听起来像是指“SimpleBlock” - https://chromium.googlesource.com/webm/libwebm/+/libwebm-1.0.0.26/webmids.hpp - 我不知道为什么会出错？

我尝试过的事情

由于初始视频开始播放需要一些时间，我认为设置MediaSource可能存在竞争条件。在创建新的MediaSource，SourceBuffer等之后，我在寻求之后添加了1秒的延迟。这没有帮助
我认为如果加载的第一个块不包含关键帧可能会有错误，所以我将块大小从1秒增加到10秒
我尝试了各种源文件（MKV，MOV，MP4，RTMP流，WebRTC流等）
我尝试销毁整个video元素并重新创建
如果SourceBuffer在播放时以某种方式修改ArrayBuffer，我尝试附加副本而不是原始对象（srcBuf.appendBuffer(queue.shift().slice(0));）
我尝试在segment

sequence

SourceBuffer

如果DVR元素正在播放，我创建了一个SourceBuffer（在我有数据之前）并进入“媒体完整”状态，我尝试暂停DVR元素

到目前为止，我还没有运气让DVR正常工作。我错过了什么？

Answer 1

我已经知道了

经过更多的实验，我终于找到了问题。

WEBM文件是有效的二进制编码XML文件。架构看起来像这样：

<EBML>
    <EBMLVersion>...</EBMLVersion>
    <EBMLReadVersion>...</EBMLReadVersion>
    <EBMLMaxIDLength>...</EBMLMaxIDLength>
    <EBMLMaxSizeLength>...</EMBLMaxSizeLength>
    <DocType>...</DocType>
    <DocTypeVersion>...</DocTypeVersion>
    <DocTypeReadVersion>...</DocTypeReadVersion>
</EBML>
<Segment>
    <SeekHead>
        <Seek>...</Seek>
        <Seek>...</Seek>
        <Seek>...</Seek>
    </SeekHead>
    <Void></Void>
    <Info>...</Info>
    <Tracks>
        <TrackEntry>
            <Video>
                <Colour>
                    <MatrixCoeffciient>...</MatrixCoefficients>
                    ...
                </Colour>
            </Video>
            <Audio>
                ...
            </Audio>
        </TrackEntry>
    </Tracks>
    <Cues>
        <CuePoint>
            <CueTrackPositions>...</CueTrackPositions>
        </CuePoint>
    </Cues>
    <Cluster>
        <Timecode>...</Timecode>
        <SimpleBlock>...</SimpleBlock>
        <SimpleBlock>...</SimpleBlock>
        <SimpleBlock>...</SimpleBlock>
        <SimpleBlock>...</SimpleBlock>
        ...
    </Cluster>
    <Cluster>
        <Timecode>...</Timecode>
        <SimpleBlock>...</SimpleBlock>
        <SimpleBlock>...</SimpleBlock>
        <SimpleBlock>...</SimpleBlock>
        <SimpleBlock>...</SimpleBlock>
        ...
    </Cluster>
    ...
</Segment>

我读取数据的方式，第一个块包含所有标题信息（EBML数据，段数据，轨道，时间码等），所有后来的块只是<Cluster>和{{的流1}}标签（偶尔会有一个奇数<SimpleBlock>）

最终我要做的是构建一个基本的解复用器来解析EBML文件并提取头信息。然后，每当我执行搜索时，在任何视频数据之前将此标头信息注入缓冲区。

我的建议

不要打扰。 MSE很糟糕，这是一场72小时的噩梦。省去头痛。

HTML5 DVR无法正常工作 - 从父元素

目标

代码

结果

我尝试过的事情

1 个答案:

我已经知道了

我的建议