使用客户端连接ArrayBuffers来进行实时视频流传输

Question

我正在尝试制作一个简单的实时网络摄像头流式传输（1个推流者到多个客户端），在客户端显示视频方面遇到了问题。

我的基本系统是使用MediaRecorder将网络摄像头记录为1000毫秒的块，然后使用WebSocket将其发送到服务器，服务器再将该记录广播给所有其他用户，这些ArrayBuffer按顺序转换并在用户网页上连续播放。这是我的代码：

//recieve video chunks from server
socket.on('video-stream', (stream) => {
  console.log(stream);
  createVideo(URL.createObjectURL(new Blob(stream)), 1);
});

//record video in chunks, send over websocket
navigator.mediaDevices.getUserMedia({ video: true, audio: true }).then((stream) => {
  setInterval(function () {
    record(stream, 1000).then((recording) => {
      socket.emit('video-stream', {
        stream: recording,
        room: window.location.pathname.split('/')[0] || '/',
        cam: 1,
      });
    });
  }, 1000);
});

var record = (stream, ms) => {
  var rec = new MediaRecorder(stream),
    data = [];
  rec.ondataavailable = (e) => data.push(e.data);
  rec.start();
  var stopped = new Promise(
    (y, n) => ((rec.onstop = y), (rec.onerror = (e) => n(e.error || e.name)))
  );
  return Promise.all([stopped, wait(ms).then(() => rec.stop())]).then(() => data);
};

var wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

function createVideo(stream, cam) {
  var video = document.getElementById('cam-' + cam + '-embed');
  video.src = stream;
  //video.addEventListener('click', () => {
  //  if (video.volume != 0) video.volume = 0;
  //  else video.volume = 1;
  //});
}

问题在于需要每1000毫秒更改页面上视频元素的src，这使得视频不断闪烁且不流畅。我需要一种在客户端合并传入视频缓冲区的方法，而不是不断更改视频元素。我一直试图找出如何做到这一点，但没有成功。能否有人帮我将传入的数据合并为一个视频？

我还尝试过： -RTC - 不起作用，因为流媒体用户需要太多的带宽。 -在服务器端对视频进行编码和连接，然后将其作为可读流管道响应。这也没有奏效。

- Chenlenkiy

Answer 1

你需要使用Mediasource和SourceBuffer。就像这样：

var video = document.querySelector("#video");
video.src = URL.createObjectURL(mediaSource)

socket.on('onChunk', (d) => {          
  if(mediaSource.readyState == 'open') {
    sourceBuffer.appendBuffer(d);
  }
})
var mediaSource = new MediaSource();
var sourceBuffer = null;
mediaSource.addEventListener("sourceopen", function()
{
  sourceBuffer = mediaSource.addSourceBuffer("video/webm;codecs=vp8,opus");
});

更多信息：HTML5视频：使用Blob URL流式传输视频

- Jonathan

---

这确实有所帮助，但现在我的视频在第一块后就冻结了。下一块仍然被客户端接收，并且似乎已成功添加到源缓冲区，但我仍然不明白为什么它只播放第一个片段然后就冻结了。有人能帮忙吗？ - Chenlenkiy