如何在React Web应用中将multipart/x-mixed-replace格式帧数据转为图像展示

你遇到的multipart/x-mixed-replace; boundary=frame格式是典型的MJPEG实时流格式，服务端会持续推送逐帧图像数据，浏览器原生支持该格式解析，可通过以下两种方案实现渲染：

方案1：最简原生方案（无需自定义处理流） #

如果接口无需额外鉴权请求头，直接将流接口地址赋值给img标签的src属性即可，浏览器会自动解析流并实时更新图像：

import React from 'react';

const StreamView = () => {
  // 替换为你的API接口地址
  return <img src="https://your-api-domain/stream-path" alt="实时帧画面" />
};

export default StreamView;

方案2：自定义流处理（适配鉴权/单帧处理场景） #

如果接口需要携带token等自定义请求头，或者需要单独处理每帧数据，可以通过fetch读取响应流手动分割帧实现：

import React, { useEffect, useRef } from 'react';

const StreamView = () => {
  const imgRef = useRef(null);
  const abortController = useRef(new AbortController());

  useEffect(() => {
    const loadStream = async () => {
      try {
        const res = await fetch('https://your-api-domain/stream-path', {
          signal: abortController.current.signal,
          headers: {
            // 按需添加鉴权头
            'Authorization': 'Bearer YOUR_TOKEN'
          }
        });
        if (!res.ok) throw new Error('流请求失败');

        const reader = res.body.getReader();
        const boundary = 'frame'; // 和响应头中的boundary值一致
        let buffer = new Uint8Array();
        const boundaryBuffer = new TextEncoder().encode(`--${boundary}`);
        const jpegStartMarker = new Uint8Array([0xff, 0xd8]);
        const jpegEndMarker = new Uint8Array([0xff, 0xd9]);

        while (true) {
          const { done, value } = await reader.read();
          if (done) break;

          // 合并新数据到缓冲区
          const newBuffer = new Uint8Array(buffer.length + value.length);
          newBuffer.set(buffer);
          newBuffer.set(value, buffer.length);
          buffer = newBuffer;

          // 查找边界符分割帧
          const boundaryPos = findSubArray(buffer, boundaryBuffer);
          if (boundaryPos === -1) continue;

          const frameRaw = buffer.slice(0, boundaryPos);
          buffer = buffer.slice(boundaryPos + boundaryBuffer.length);

          // 提取JPEG数据
          const jpegStart = findSubArray(frameRaw, jpegStartMarker);
          const jpegEnd = findSubArray(frameRaw, jpegEndMarker);
          if (jpegStart === -1 || jpegEnd === -1) continue;

          const jpegBlob = new Blob([frameRaw.slice(jpegStart, jpegEnd + 2)], {
            type: 'image/jpeg'
          });
          // 释放旧的BlobURL避免内存泄漏
          if (imgRef.current.src) {
            URL.revokeObjectURL(imgRef.current.src);
          }
          imgRef.current.src = URL.createObjectURL(jpegBlob);
        }
      } catch (e) {
        if (e.name !== 'AbortError') console.error('流处理错误:', e);
      }
    };

    loadStream();

    // 组件卸载释放资源
    return () => {
      abortController.current.abort();
      if (imgRef.current?.src) {
        URL.revokeObjectURL(imgRef.current.src);
      }
    };
  }, []);

  // 辅助方法：查找子数组位置
  const findSubArray = (parent, sub) => {
    for (let i = 0; i <= parent.length - sub.length; i++) {
      let match = true;
      for (let j = 0; j < sub.length; j++) {
        if (parent[i + j] !== sub[j]) {
          match = false;
          break;
        }
      }
      if (match) return i;
    }
    return -1;
  };

  return <img ref={imgRef} alt="实时帧画面" />;
};

export default StreamView;

注意事项 #

• 优先使用方案1，实现最简单且兼容性最好，无额外性能开销
• 手动处理流时必须及时释放Blob URL和中断请求，避免内存泄漏和无效连接占用
• 若帧格式不是JPEG，只需调整对应文件头标记和Blob的type属性即可

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