如何通过Express将IP摄像头的.mjpg流传输至React前端？

完全可以直接通过Express将IP摄像头的MJPG流转发到React前端，不需要额外转码工具（比如ffmpeg）——因为MJPG本身就是基于HTTP的流式传输格式，直接代理转发即可实现需求。

实现步骤 #

1. Express后端代理配置 #

创建一个Express路由，将前端请求转发到摄像头的MJPG链接，同时原样转发响应头，确保前端能正确识别流式内容。

示例代码（基于你之前用的request库）：

const express = require('express');
const request = require('request');
const cors = require('cors'); // 前后端不同域时需启用，同域可省略
const app = express();

// 配置跨域（按需开启）
app.use(cors());

// 摄像头流代理路由
app.get('/api/camera-stream', (req, res) => {
  const cameraUrl = 'http://ip/video1.mjpg'; // 替换为你的摄像头实际地址
  
  // 转发请求到摄像头，将响应直接pipe给前端
  request({
    url: cameraUrl,
    // 若摄像头需要认证，在此添加请求头，比如Authorization
    // headers: { Authorization: 'Basic ' + Buffer.from('用户名:密码').toString('base64') }
  }).on('response', (cameraRes) => {
    // 原样转发摄像头的响应头，保证前端能解析流
    res.setHeader('Content-Type', cameraRes.headers['content-type']);
    res.setHeader('Cache-Control', 'no-cache'); // 禁用缓存，确保实时性
  }).pipe(res);
});

app.listen(3001, () => {
  console.log('Express代理服务运行在端口3001');
});

替代方案（使用axios，request已停止维护）：

const express = require('express');
const axios = require('axios');
const cors = require('cors');
const app = express();

app.use(cors());

app.get('/api/camera-stream', async (req, res) => {
  try {
    const cameraUrl = 'http://ip/video1.mjpg';
    const response = await axios.get(cameraUrl, {
      responseType: 'stream',
      // 需认证则添加headers: { Authorization: '...' }
    });

    // 转发响应头
    res.setHeader('Content-Type', response.headers['content-type']);
    res.setHeader('Cache-Control', 'no-cache');
    
    // 将流pipe到前端
    response.data.pipe(res);
  } catch (err) {
    res.status(500).send('无法连接到摄像头');
  }
});

app.listen(3001, () => {
  console.log('Express代理服务运行在端口3001');
});

2. React前端展示流 #

MJPG流可以直接用<img>标签加载，浏览器会自动处理多帧JPEG的实时刷新：

import React from 'react';

function CameraStream() {
  return (
    <div>
      <h3>IP摄像头直播</h3>
      {/* 指向Express的代理路由 */}
      <img 
        src="http://localhost:3001/api/camera-stream" 
        alt="摄像头直播流"
        style={{ maxWidth: '100%', height: 'auto' }}
      />
    </div>
  );
}

export default CameraStream;

如果需要自定义控制（比如暂停/重试），可以监听img的error或load事件，实现断连自动重试逻辑。

注意事项 #

• 跨域处理：React前端和Express服务若不在同一端口/域名，必须配置CORS，否则浏览器会拦截请求。
• 摄像头认证：若摄像头需要登录，在代理请求中添加对应认证头即可。
• 错误处理：可在代理路由中添加错误监听，摄像头断连时返回提示；前端也可监听img的错误事件，触发重试逻辑。

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