如何通过Node.js实现跨网络远程查看Axis摄像头直播流

方案1：Node.js + FFmpeg + HLS（HTTP直播） #

Axis摄像头默认提供RTSP流地址，格式一般为rtsp://[用户名]:[密码]@[摄像头IP]/axis-media/media.amp。你可以通过Node.js调用FFmpeg将RTSP转码为HLS格式，再通过HTTP静态服务暴露给远程浏览器。

• 步骤：
  1. 安装FFmpeg并确保其在系统PATH中，同时在Node项目中安装express：

     npm install express
     

  2. 编写Node.js代码，调用FFmpeg转码并启动静态服务：

     const express = require('express');
     const { spawn } = require('child_process');
     const app = express();
     const PORT = 3000;
     
     // 暴露HLS文件目录为静态资源
     app.use('/hls', express.static('./hls-stream'));
     
     // 启动FFmpeg转码：RTSP转HLS
     const ffmpegProcess = spawn('ffmpeg', [
       '-i', 'rtsp://admin:password@192.168.1.100/axis-media/media.amp',
       '-c:v', 'libx264',
       '-c:a', 'aac',
       '-f', 'hls',
       '-hls_time', '2',
       '-hls_list_size', '10',
       '-hls_flags', 'delete_segments',
       './hls-stream/stream.m3u8'
     ]);
     
     // 监听FFmpeg输出（可选，用于调试）
     ffmpegProcess.stdout.on('data', (data) => console.log(data.toString()));
     ffmpegProcess.stderr.on('data', (data) => console.error(data.toString()));
     
     app.listen(PORT, () => {
       console.log(`Server running on http://your-public-ip:${PORT}`);
     });
     

  3. 前端网页播放HLS流：使用原生video标签（需浏览器支持HLS，或引入hls.js兼容，需提前下载hls.js库到网页同级目录）

     <video id="live-player" controls autoplay width="1280" height="720"></video>
     <script src="./hls.min.js"></script>
     <script>
       const video = document.getElementById('live-player');
       if (Hls.isSupported()) {
         const hls = new Hls();
         hls.loadSource('http://your-public-ip:3000/hls/stream.m3u8');
         hls.attachMedia(video);
       } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
         video.src = 'http://your-public-ip:3000/hls/stream.m3u8';
       }
     </script>
     

  4. 远程访问：确保服务器有公网IP，开放3000端口，远程浏览器直接访问网页即可。

方案2：Node.js + WebSocket 低延迟流 #

使用node-rtsp-stream库将RTSP流转换为WebSocket流，前端通过WebSocket接收并渲染视频，延迟比HLS更低。

• 步骤：
  1. 安装依赖：

     npm install node-rtsp-stream express ws
     

  2. Node.js服务器代码：

     const express = require('express');
     const Stream = require('node-rtsp-stream');
     const app = express();
     const http = require('http').Server(app);
     const PORT = 3000;
     
     // 启动RTSP转WebSocket流
     new Stream({
       name: 'axis-live',
       streamUrl: 'rtsp://admin:password@192.168.1.100/axis-media/media.amp',
       wsPort: 9999,
       ffmpegOptions: {
         '-stats': '',
         '-r': 30,
         '-c:v': 'libx264',
         '-preset': 'ultrafast'
       }
     });
     
     app.use(express.static('./public'));
     http.listen(PORT, () => {
       console.log(`Server running on http://your-public-ip:${PORT}`);
     });
     

  3. 前端网页（放在public目录）：

     <canvas id="video-canvas" width="1280" height="720"></canvas>
     <script>
       const canvas = document.getElementById('video-canvas');
       const ctx = canvas.getContext('2d');
       const ws = new WebSocket('ws://your-public-ip:9999');
     
       ws.onmessage = (event) => {
         if (event.data instanceof Blob) {
           const reader = new FileReader();
           reader.onload = () => {
             const img = new Image();
             img.onload = () => {
               ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
             };
             img.src = reader.result;
           };
           reader.readAsDataURL(event.data);
         }
       };
     </script>
     

方案3：WebRTC 超低延迟直播 #

如果追求毫秒级延迟，可使用WebRTC方案。Node.js作为信令服务器，FFmpeg将RTSP转码为WebRTC流推送到信令服务，前端通过WebRTC API接收。

• 核心步骤：
  1. 用simple-peer或werift搭建信令服务器，处理前端的offer/answer交换。
  2. 使用FFmpeg将RTSP转码为WebRTC流，推送到信令服务器：

     ffmpeg -i rtsp://admin:password@192.168.1.100/axis-media/media.amp -c:v libx264 -c:a opus -f rtp_webrtc rtp://your-server-ip:5000
     

  3. 前端通过WebRTC API与信令服务器建立连接，接收并播放流。

注意事项 #

• 确保Axis摄像头的RTSP流可访问：检查摄像头的网络设置，开启RTSP服务，确认用户名密码正确。
• 公网访问需配置端口转发：如果服务器在局域网，需在路由器上转发对应端口（如3000、9999）。
• 性能优化：FFmpeg转码时可调整参数（如-preset ultrafast）降低CPU占用，根据网络带宽调整分辨率和码率。

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