无法在“SourceBuffer”上执行“appendBuffer”：HTMLMediaElement.error 属性不为空

Question

我正在尝试通过 socket.io 将视频文件流式传输到我的客户端（当前使用 Chrome 作为客户端）。 我只获取视频的第一帧，然后出现“无法追加缓冲区”：

无法在“SourceBuffer”上执行“appendBuffer”： HTMLMediaElement.error 属性不为空

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