你好！我看了你的代码，核心问题是视频分段Blob合并后无法正常播放，这种情况通常和媒体格式兼容性、Blob合并逻辑以及播放方式有关，我帮你拆解几个关键问题和对应的解决方案：

一、最可能的原因：MediaRecorder格式不匹配 #

大部分浏览器的MediaRecorder默认输出格式不是MP4，而是WebM（因为MP4的编码和容器格式对分段拼接的要求更高）。你强制指定video/mp4作为Blob类型，但实际录制的Blob可能是WebM格式，导致合并后的容器格式混乱，播放器无法解析。

解决方案：指定兼容的流式媒体格式 #

先确认浏览器支持的MediaRecorder格式，优先选择WebM（天生支持流式拼接），修改代码如下：

客户端修改：

// 定义兼容的录制格式
const recorderOptions = {
  mimeType: 'video/webm; codecs=vp8' // 或者 'video/webm; codecs=vp9'，根据浏览器支持调整
};

const getUserMedia = () => {
  navigator.mediaDevices
    .getUserMedia(constraints)
    .then((stream) => {
      mediaStream = stream.getTracks()[0];
      // 使用指定的格式初始化MediaRecorder
      const mediaRecorder = new MediaRecorder(stream, recorderOptions);
      mediaRecorder.start(3000);
      mediaRecorder.ondataavailable = (data) => sendBlob(data.data);
    })
    .catch((e) => console.log(e));
};

// 接收Blob时也对应使用WebM格式
socket.on("vidBlob", (receivedData) => {
  // 这里不需要手动创建Blob，因为服务器已经合并好了，直接用receivedData即可
  setVideoSrc(URL.createObjectURL(receivedData));
});

服务器修改：

const pushandGetBlob = (newBlob) => {
  prevBlobs.push(newBlob);
  // 合并时使用和录制一致的WebM格式
  const blob = new Blob(prevBlobs, {
    type: 'video/webm; codecs=vp8',
  });
  return blob;
};

二、MP4格式的局限性（如果坚持用MP4） #

MP4容器的moov原子（存储视频元数据）通常在文件末尾，分段录制的MP4片段无法直接拼接——播放器需要先读取完整的元数据才能播放。如果一定要用MP4，你需要：

• 使用支持“碎片化MP4”（fMP4）的编码器，确保每个分段都包含完整的元数据
• 客户端接收后使用MediaSource API来逐个加载分段，而不是合并成一个大Blob

这里更推荐用WebM，因为它的流式特性更适合这种实时分段传输场景。

三、额外的调试建议 #

• 先单独测试单个分段Blob：在客户端发送前，把data.data生成URL并播放，确认每个分段本身是有效的视频
• 检查服务器合并后的Blob大小：如果合并后的Blob大小和所有分段大小之和不一致，说明传输或合并过程有问题
• 查看浏览器控制台的错误：播放器无法解析时，通常会在控制台输出Media相关的错误信息，这能帮你定位具体问题

修改后的完整代码参考 #

客户端 #

// 录制格式配置
const recorderOptions = { mimeType: 'video/webm; codecs=vp8' };
const constraints = { video: true, audio: true }; // 确保你的constraints定义正确
let mediaStream;

// 发送Blob到服务器
const sendBlob = async (data) => {
  socket.emit("senderBlob", data);
};

// 获取用户媒体流并开始录制
const getUserMedia = () => {
  navigator.mediaDevices
    .getUserMedia(constraints)
    .then((stream) => {
      mediaStream = stream;
      const mediaRecorder = new MediaRecorder(stream, recorderOptions);
      mediaRecorder.start(3000);
      mediaRecorder.ondataavailable = (event) => {
        if (event.data.size > 0) { // 过滤空Blob
          sendBlob(event.data);
        }
      };
    })
    .catch((e) => console.error("获取媒体流失败：", e));
};

// 接收服务器广播的合并Blob并播放
socket.on("vidBlob", (receivedData) => {
  setVideoSrc(URL.createObjectURL(receivedData));
});

服务器 #

const express = require('express');
const { createServer } = require('http');
const { Server } = require('socket.io');

var prevBlobs = [];
const pushandGetBlob = (newBlob) => {
  prevBlobs.push(newBlob);
  return new Blob(prevBlobs, { type: 'video/webm; codecs=vp8' });
};

const app = express();
const httpServer = createServer(app);
const io = new Server(httpServer, {
  cors: { origin: "*" },
});

io.on("connection", (socket) => {
  console.log("新客户端连接");
  
  socket.on("senderBlob", (data) => {
    const vidBlob = pushandGetBlob(data);
    socket.broadcast.emit("vidBlob", vidBlob);
  });

  socket.on("clearVideos", () => {
    prevBlobs = [];
    console.log("已清空Blob缓存");
  });

  socket.on("disconnect", () => {
    console.log("客户端断开连接");
  });
});

httpServer.listen(8080, () => {
  console.log("服务器运行在http://localhost:8080");
});

备注：内容来源于stack exchange，提问作者Ajit Kumar