如何将网页端JS MediaStream发送至服务器并获取处理后的流？

你的思路完全可行，但确实有几个更简便的实现方式，取决于你的实时性需求和部署复杂度：

1. Canvas + WebSocket 双向帧传输（最简便） #

这是我做类似AI图像分析项目时首选的快速实现方案，完全避开WebRTC的信令、STUN/TURN配置这些繁琐环节：

• 前端用getUserMedia拿到摄像头流后，把流绑定到隐藏的<video>元素，然后用<canvas>定时捕获帧（比如30fps就每33ms一次），转成Blob或Base64通过WebSocket发给服务器。
• 服务器处理完帧后，直接把处理后的图像（同样转成Blob/Base64）通过同一个WebSocket连接回传给前端，前端再渲染到页面的canvas或video上。

前端核心代码示例：

// 获取摄像头流
navigator.mediaDevices.getUserMedia({ video: true })
  .then(stream => {
    const video = document.getElementById('hidden-video');
    video.srcObject = stream;
    video.play();

    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;

    // 建立WebSocket连接
    const ws = new WebSocket('ws://your-server-address:port');
    ws.binaryType = 'blob';

    // 定时捕获并发送帧
    setInterval(() => {
      ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
      canvas.toBlob(blob => {
        if (ws.readyState === WebSocket.OPEN) {
          ws.send(blob);
        }
      }, 'image/jpeg', 0.8); // 用JPEG压缩减少数据量
    }, 33); // 约30fps

    // 接收处理后的帧并渲染
    ws.onmessage = (event) => {
      const img = new Image();
      img.onload = () => {
        const outputCanvas = document.getElementById('output-canvas');
        const outputCtx = outputCanvas.getContext('2d');
        outputCtx.drawImage(img, 0, 0, outputCanvas.width, outputCanvas.height);
      };
      img.src = URL.createObjectURL(event.data);
    };
  });

这个方案的优点是代码极简、部署零额外配置，延迟大概在100-300ms左右，完全满足普通监控、AI图像识别这类场景的需求；缺点是如果需要亚100ms的极致低延迟，就不如WebRTC。

2. HTTP 分块流式传输（兼容性最好） #

如果你的场景需要兼容一些不支持WebSocket的老旧环境，可以用HTTP的分块编码（Chunked Encoding）来实现：

• 前端用MediaRecorder把摄像头流编码成WebM/MP4片段，通过fetch以分块的方式POST到服务器。
• 服务器实时接收视频片段，解码出帧处理后，再把处理后的图像序列通过HTTP分块响应回传给前端，前端逐帧渲染。

这个方案依赖原生HTTP协议，不用维护长连接，但延迟会比WebSocket高一些（大概300-500ms），适合对兼容性要求高的场景。

3. 简化版 WebRTC（低延迟首选） #

如果你的项目要求极致低延迟（比如实时互动场景），可以不用自己写WebRTC服务器对等端，而是用现成的库和媒体服务器简化开发：

• 前端用simple-peer这类轻量库，自动处理信令和STUN/TURN配置，不用自己写复杂的对等连接逻辑。
• 服务器端用mediasoup或Kurento这类成熟的媒体服务器，它们专门负责接收、处理和转发WebRTC流，处理完后直接推流回前端，比自己从零实现稳定得多。

这个方案的延迟能做到50ms以内，但需要部署媒体服务器，复杂度比前两个方案高一点，但比自己手写WebRTC服务器简单太多。

内容的提问来源于stack exchange，提问作者Juntao Hu