2

我正在尝试利用 websockets 从 WebM 流中直播块。以下是我拼凑的服务器端的一些示例代码：

const command = ffmpeg()
  .input('/dev/video0')
  .fps(24)
  .audioCodec('libvorbis')
  .videoCodec('libvpx')
  .outputFormat('webm')

const ffstream = command.pipe()
ffstream.on('data', chunk => {
  io.sockets.emit('Webcam', chunk)
})

我以这种方式构造了服务器代码，因此ffstream.on('data', ...)也可以写入文件。我可以在本地打开文件并查看视频，但很难使用块<video>在 DOM 中的标签中呈现。

const ms = new MediaSource()
const video = document.querySelector('#video')
video.src = window.URL.createObjectURL(ms)
ms.addEventListener('sourceopen', function () {
  const sourceBuffer = ms.addSourceBuffer('video/webm; codecs="vorbis,vp8"')
  // read socket
  // ...sourceBuffer.appendBuffer(data)
})

我的客户端有上述内容。我能够从我的服务器接收完全相同的块，但是这sourceBuffer.appendBuffer(data)给我带来了以下错误： Failed to execute 'appendBuffer' on 'SourceBuffer': This SourceBuffer has been removed from the parent media source.

问题：如何在 HTML5 视频标签中显示这些块？

注意：根据我的阅读，我相信这与获取关键帧有关。我无法确定如何识别这些。

4

0 回答 0