使用 MP4box.js 并且不调用 onSegment 回调

Question

基本问题：在浏览器中显示H264直播。

解决方案：让我们将其转换为碎片化的 mp4 并通过 websocket（或 XHR）逐块加载到 MSE 中。

听起来太简单了。但我想用纯 JS.

在客户端进行碎片化

所以我正在尝试使用 MP4Box.js。在其自述文件页面上声明：它有一个演示："A player that performs on-the-fly fragmentation".

这就是我需要的东西！

然而，应该为 MSE 提供的 onSegment 回调根本没有被调用：

var ws;      //for websocket
var mp4box;  //for fragmentation


function startVideo() {
  mp4box = MP4Box.createFile();

  mp4box.onError = function(e) {
    console.log("mp4box failed to parse data.");
  };

  mp4box.onMoovStart = function () {
    console.log("Starting to receive File Information");
  };

  mp4box.onReady = function(info) {
    console.log(info.mime);

    mp4box.onSegment = function (id, user, buffer, sampleNum) {
      console.log("Received segment on track "+id+" for object "+user+" with a length of "+buffer.byteLength+",sampleNum="+sampleNum);
    }

    var options = { nbSamples: 1000 };
    mp4box.setSegmentOptions(info.tracks[0].id, null, options); // I don't need user object this time
    var initSegs = mp4box.initializeSegmentation();
    mp4box.start();
  };

  ws = new WebSocket("ws://a_websocket_server_which_serves_h264_file");
  ws.binaryType = "arraybuffer";
  ws.onmessage = function (event) {
    event.data.fileStart = 0; //tried also with event.data.byteOffset, but resulted error.
    var nextBufferStart = mp4box.appendBuffer(event.data);
    mp4box.flush(); //tried commenting out - unclear documentation!
  };
} 


window.onload = function() {
  startVideo();
}

现在将其放入 HTML 文件中将在 JavaScript 控制台中产生以下结果：

Starting to receive File Information
video/mp4; codecs="avc1.4d4028"; profiles="isom,iso2,avc1,iso6,mp41"

但是之后什么也没有发生。 为什么这里没有调用 onSegment？（websocket-server 服务的 h264 文件可以在 VLC 中播放 - 但它没有碎片化）

Answer 1

问题是以错误的方式使用 nextBufferStart。

这应该是正确的：

var nextBufferStart = 0;
...
ws.onmessage = function (event) {
    event.data.fileStart = nextBufferStart;
    nextBufferStart = mp4box.appendBuffer(event.data);
    mp4box.flush();
};