javascript - 'appendBuffer'上执行 'SourceBuffer'失败 : The HTMLMediaElement. 错误属性不为空

Question

我正在尝试通过 socket.io 将视频文件流式传输到我的客户端(当前使用 Chrome 作为客户端)。
我只得到视频的第一帧，然后出现 Failed to appendBuffer:

Failed to execute 'appendBuffer' on 'SourceBuffer': The HTMLMediaElement.error attribute is not null

部分JS代码:

   if (buffer.updating || queue.length > 0) {
        console.log("buffer.updating = " + buffer.updating  + " queue.length  = "  + (queue.length));
            queue.push(videoData);
        } else {
        console.log("else buffer.updating = " + buffer.updating  + " queue.length = "  + (queue.length));
            buffer.appendBuffer(videoData);
        }

    }
};

var play = function() {

    //var mimeType = `video/mp4;codecs="${$scope.codec}"`;
    var mimeType = 'video/mp4;codecs="' + codec +'"';

    console.log("mimetype = " + mimeType + " is supported = " + MediaSource.isTypeSupported(mimeType));

    buffer = mediaSource.addSourceBuffer(mimeType);

    buffer.addEventListener('update', function () {
        if (queue.length > 0 && !buffer.updating) {
            console.log("buffer.appendBuffer");
            buffer.appendBuffer(queue.shift());
        }
    });



    video.play();
};

请帮我!

Answer 1

当源缓冲区仍在更新并且您调用 appendBuffer 将另一个缓冲区附加到它时，可能会发生这种情况。您应该等待调用的 updateend 事件，然后您可以附加另一个缓冲区。您可以使用 Promise 让 await 函数等待它解决，然后附加另一个缓冲区，如下所示:

const sourceBuffer = mediaSource.addSourceBuffer(mimeType);

const loadBuffer = (buffer) => {
  return new Promise((resolve)=>{
    sourceBuffer.addEvenListener('updateend',() resolve);
    sourceBuffer.append(buffer);
  });
};

await loadBuffer(buffer1);
await loadBuffer(buffer2);