无法对'SourceBuffer'执行'appendBuffer'：HTMLMediaElement.error属性不为null

Question

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

无法对'SourceBuffer'执行'appendBuffer'：HTMLMediaElement.error属性不为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 让等待函数等待，直到它解析，然后附加另一个缓冲区，如下所示：

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);