我正在尝试通过 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();
};
请帮助我!
当源缓冲区仍在更新并且您调用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);