如何在React中读取并展示Python后端cv2生成的视频帧？

前置说明 #

你后端通过 Socket.IO 推送的是 JPEG 格式的二进制帧数据，前端只需要把二进制流转换为 img 标签可识别的资源地址即可渲染。

步骤1：安装 Socket.IO 客户端依赖 #

npm install socket.io-client

步骤2：React 组件实现代码 #

核心逻辑是连接 Socket.IO 服务，监听帧推送事件，将二进制数据转成可访问的资源地址绑定到 img 标签：

import { useEffect, useRef } from 'react';
import { io } from 'socket.io-client';

const VideoFramePlayer = () => {
  // 存储img标签的ref，避免重复渲染带来的性能损耗
  const imgRef = useRef(null);
  // 存储socket实例的ref
  const socketRef = useRef(null);

  useEffect(() => {
    // 替换为你后端的实际Socket.IO服务地址
    socketRef.current = io('http://你的后端地址:端口');
    
    // 监听后端推送的response事件
    socketRef.current.on('response', (frameBuffer) => {
      // 把接收到的二进制帧转成Blob对象，指定MIME类型为image/jpeg
      const blob = new Blob([frameBuffer], { type: 'image/jpeg' });
      // 生成临时资源地址
      const imageUrl = URL.createObjectURL(blob);
      // 绑定到img标签
      if (imgRef.current) {
        imgRef.current.src = imageUrl;
      }
      // 释放之前的临时地址，避免内存泄漏
      return () => URL.revokeObjectURL(imageUrl);
    });

    // 组件卸载时断开socket连接
    return () => {
      if (socketRef.current) {
        socketRef.current.disconnect();
      }
    };
  }, []);

  // 触发后端开始处理视频的请求（对应你后端的/analytics/detection接口）
  const startDetection = async () => {
    await fetch('http://你的后端地址:端口/analytics/detection', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        filepath: '你要处理的视频文件路径' // 替换为实际的文件路径参数
      })
    });
  };

  return (
    <div>
      <button onClick={startDetection}>开始视频解析</button>
      <br />
      {/* 渲染帧的img标签，可自行调整宽高样式 */}
      <img ref={imgRef} alt="视频帧" style={{ width: 800, height: 'auto' }} />
    </div>
  );
};

export default VideoFramePlayer;

可选后端优化建议 #

你当前后端每次生成帧都写入本地磁盘再读取，IO开销很大，高帧率下容易卡顿，可直接在内存中编码返回，替换tracking方法里的写文件逻辑即可：

# 替换原来的cv2.imwrite + 读文件逻辑
success, encoded_frame = cv2.imencode('.jpg', frame)
if success:
    frame = encoded_frame.tobytes()
yield frame

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