Node.js流式传输Webcam视频：octet-stream无法在HTML video标签显示求助

我来帮你搞定这个实时视频流播放的问题！你的核心困扰主要来自两个地方：一是二进制数据的拼接方式错误（用字符串拼接会直接损坏视频流数据），二是没有用适合流式播放的API（直接给video设置Blob URL没法实现边接收边播放）。下面是具体的解决方案和修正代码：

问题拆解 #

• 你现在用data += chunk拼接二进制流，这会把Buffer/Uint8Array转换成字符串再拼接，直接破坏视频的二进制结构，导致浏览器无法解析。
• 直接给video的src赋值Blob URL，浏览器会等待完整的媒体文件加载完成后才开始播放，完全不符合实时流的需求。我们需要用MediaSource API来逐段向浏览器投喂数据，实现真正的实时播放。

完整修正代码 #

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Jimmy Test Receiver</title>
</head>
<body>
Receiver
<button onclick="connect()">Connect</button>
<video id="videoElement" autoplay playsinline controls></video>
</body>
<script src="https://cdn.jsdelivr.net/npm/socket.io-client@2/dist/socket.io.js"></script>
<script src="stream.js"></script>
<script>
let mediaSource;
let sourceBuffer;
const videoElement = document.getElementById('videoElement');

// 初始化MediaSource流式播放环境
function initMediaSource() {
  mediaSource = new MediaSource();
  videoElement.src = URL.createObjectURL(mediaSource);
  
  mediaSource.addEventListener('sourceopen', () => {
    // 这里的格式要和摄像头捕获的视频编码匹配，优先推荐WebM格式
    // 如果是VP8编码就用 'video/webm; codecs="vp8"'，VP9就用下面这个
    sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vp9"');
    sourceBuffer.mode = 'sequence'; // 设置为顺序流式模式，逐段接收数据
  });
}

function connect() {
  // 先初始化流式播放环境
  initMediaSource();
  
  const socket = io.connect('http://localhost/user');
  const stream = ss.createStream();
  
  socket.on('connect', function () {
    console.log('connected to server');
    ss(socket).emit('file', stream);
    
    // 用数组存储二进制chunk，避免字符串拼接损坏数据
    const pendingChunks = [];
    
    stream.on('data', (chunk) => {
      console.log('received video chunk', chunk);
      pendingChunks.push(chunk);
      
      // 只有当sourceBuffer处于可更新状态时，才投喂数据
      if (sourceBuffer && !sourceBuffer.updating) {
        const blob = new Blob(pendingChunks);
        blob.arrayBuffer().then(buffer => {
          sourceBuffer.appendBuffer(buffer);
          pendingChunks.length = 0; // 清空已处理的chunk
        });
      }
    });
    
    stream.on('finish', () => {
      console.log('video stream finished');
      if (mediaSource.readyState === 'open') {
        mediaSource.endOfStream();
      }
    });
    
    socket.on('disconnect', () => {
      if (mediaSource.readyState === 'open') {
        mediaSource.endOfStream();
      }
      console.log('disconnected from server');
    });
  });
}
</script>
</html>

关键修改说明 #

1. 二进制数据存储优化：改用数组pendingChunks存储收到的二进制chunk，彻底避免字符串拼接导致的数据损坏问题。
2. MediaSource API流式处理：
   • 创建MediaSource对象并关联到video元素，让浏览器识别这是一个可流式加载的媒体源。
   • 监听sourceopen事件，添加对应编码的SourceBuffer，设置sequence模式支持逐段添加数据。
3. 实时数据投喂：每次收到chunk后，检查sourceBuffer是否处于空闲状态，若空闲则将chunk转换成ArrayBuffer并投喂给浏览器，实现边接收边播放。
4. 编码格式匹配：你需要确保服务器转发的视频流编码和addSourceBuffer中指定的格式一致。如果是H.264编码的MP4，格式字符串可以改成'video/mp4; codecs="avc1.42E01E, mp4a.40.2"'（具体编码参数可能需要微调）。

额外注意事项 #

• 确保Node.js服务器转发的是原始媒体流数据（比如前端摄像头捕获的MediaStream直接转成的WebM流），不要对二进制数据做任何字符串转换操作。
• 给video元素添加autoplay playsinline属性，规避浏览器的自动播放限制，同时支持移动端内联播放。
• 如果遇到sourceBuffer一直处于更新状态的情况，可以添加一个简单的队列逻辑，等updateend事件触发后再继续投喂缓存的chunk。

内容的提问来源于stack exchange，提问作者Kushagra Saxena