如何实现IP摄像头与HTML/CSS/JS开发的Web界面通信？

核心思路：聚焦可对接Web的设备与中转方案 #

• 优先选支持RTSP/HTTP流推送或ONVIF标准协议的IP摄像头，这类设备大多会开放可访问的局域网IP，能直接和Web界面做协议对接。
• 要是已经在用无公开IP的摄像头，就用本地代理中转：在摄像头所在局域网内搭个轻量服务（Node.js或Python都能实现），把摄像头的私有流转换成Web能识别的格式（比如HTTP-FLV、HLS），再通过MQTT或HTTP把流地址同步到前端。

前端具体实现 #

1. 直接嵌入视频流（针对有公开IP的摄像头） #

如果摄像头支持HTTP MJPEG流，用<img>或<video>就能直接加载：

<!-- MJPEG实时流示例 -->
<img src="http://摄像头IP:端口/mjpegfeed" alt="摄像头画面">

<!-- 支持HLS的情况，用hls.js解析 -->
<video id="cameraVideo" controls></video>
<script src="hls.min.js"></script>
<script>
  if(Hls.isSupported()) {
    const video = document.getElementById('cameraVideo');
    const hls = new Hls();
    hls.loadSource('http://摄像头IP:端口/stream.m3u8');
    hls.attachMedia(video);
  }
</script>

2. 本地代理中转（针对无公开IP的摄像头） #

用Node.js写个简单代理，把RTSP流转成WebSocket推送的FLV流：

// 依赖node-rtsp-stream库
const Stream = require('node-rtsp-stream');

const stream = new Stream({
  name: 'camera-stream',
  streamUrl: 'rtsp://摄像头私有地址/stream',
  wsPort: 9999,
  ffmpegOptions: {
    '-stats': '',
    '-r': 30
  }
});

前端用flv.js接收流：

<video id="cameraVideo" controls></video>
<script src="flv.min.js"></script>
<script>
  const video = document.getElementById('cameraVideo');
  if(flvjs.isSupported()) {
    const flvPlayer = flvjs.createPlayer({
      type: 'flv',
      url: 'ws://代理服务IP:9999/camera-stream'
    });
    flvPlayer.attachMediaElement(video);
    flvPlayer.load();
    flvPlayer.play();
  }
</script>

MQTT联动优化 #

• 可以通过MQTT把控制指令（比如调角度、切分辨率）发给代理服务，再由代理转发给支持ONVIF的摄像头。
• 代理服务能把摄像头的在线状态通过MQTT同步到前端，实现状态实时更新。

注意事项 #

• 确保摄像头和前端/代理在同一WiFi局域网，要外网访问的话得配置端口映射或内网穿透。
• 部分摄像头需要身份验证，流地址可以带用户名密码，格式是http://user:pass@摄像头IP/mjpegfeed。

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