海康摄像头RTSP转换前端浏览器实时播放
背景：
公司运维平台需求：把机房监控接入，可在运维平台web实时查看。
解决方案：前端无法播放RTSP数据，问了deepseek和查看别人的建议，最后决定采用以下方案：
基于 ffmpeg 的 Node 后端推流方案 + 基于 jspmeg 的前端视频展示。
RTSP 流 -> Web 能接收的流（Websocket ） -> Web Video
核心思路是借助后端服务做一次中转。我们用 Node.js 搭建一个转码服务，把浏览器无法识别的 RTSP 流，转成它能播放的格式。
后端部分：基于 ffmpeg 的 node 推流方案
准备：node环境 > 16
本人环境：CentOS 7 ，node: v22.22.3
第一步：安装 FFmpeg:
sudo yum install ffmpeg如果提示找不到包，可能需要先启用 EPEL 仓库：
CentOS 7 默认仓库不包含 ffmpeg，需要添加第三方仓库：
# 1. 安装 EPEL 仓库 sudo yum install -y epel-release # 2. 安装 RPMfusion 仓库（提供 ffmpeg） sudo yum install -y https://download1.rpmfusion.org/free/el/rpmfusion-free-release-7.noarch.rpm sudo yum install -y https://download1.rpmfusion.org/nonfree/el/rpmfusion-nonfree-release-7.noarch.rpm # 3. 安装 ffmpeg sudo yum install -y ffmpeg安装完成后验证是否安装成功：ffmpeg -version
第二步：搭建后端转码服务
创建项目并安装
新建一个文件夹（例如rtsp-server），注意文件夹名称不要叫rtsp2web。在命令行中进入该文件夹，然后执行：
npm init -y npm i rtsp2web注：安装卡住可能需要配置镜像源。
编写启动代码
在项目根目录下创建一个main.js文件，输入以下代码。这是启动转码服务的核心。
// main.js const RTSP2web = require('rtsp2web') // 服务端口，可以自定义，默认是 9999 const port = 9999 new RTSP2web({ port, host: '0.0.0.0', transportType: 'tcp', // ⭐ 关键配置：禁用文本水印 drawText: false })启动服务
在命令行中运行node main.js。如果看到类似“服务已启动”的日志，就说明后端服务跑起来了：
第三步：创建前端播放页面
在同一个文件夹（或任何静态服务器）中，创建一个index.html文件，这是播放视频的网页。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>RTSP 播放</title> <script src="https://jsmpeg.com/jsmpeg.min.js"></script> <style> body { background: #1a1a1a; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } canvas { width: 800px; height: 600px; background: #000; border-radius: 8px; } </style> </head> <body> <canvas id="video-canvas"></canvas> <script> // ⭐ 原始 RTSP 地址，不要做任何编码 // 海康web页面的用户名、密码 及 ip地址，端口默认554，后面的1301代表通道13的数据，如果是通道1则为101，其他通道类似：102, 103 ....。 var rawUrl = 'rtsp://username:password@xx.xx.xx.xxx:554/Streaming/Channels/1301'; // ⭐ 只做 Base64 编码 var encodedUrl = btoa(rawUrl); var serverIP = 'xxx.xx.xx.x'; # 上一步搭建的转换服务器的ip var wsUrl = 'ws://' + serverIP + ':9999/rtsp?url=' + encodedUrl; console.log('连接地址:', wsUrl); window.onload = function() { new JSMpeg.Player(wsUrl, { canvas: document.getElementById('video-canvas'), autoplay: true }); }; </script> </body> </html>第四步：开始播放
保持后端服务运行：确保第一步的命令行窗口没有关闭，
node main.js一直在运行。打开前端页面：在浏览器中打开你刚创建的
index.html文件。
在刚才的服务器上，用 VS Code 的 Live Server 插件，或者用 Python 快速启动一个静态服务：
# 在 index.html 所在目录执行
python3 -m http.server 8080
然后通过http://xxx.xxx.xx.xx:8080访问页面查看效果：稍等片刻（转码需要一点时间），你应该就能在页面上看到 RTSP 视频流了。
最后通过以上demo确认了方案是可行的，再按照上面的方法把接入到你的web上，就可以在自己的网站前端查看实时监控了。视频上有一个clear with qq的水印，问下ai看看如何消除，楼主当前还没解决，视频其他设置例如清晰度什么的有需要的也可以问问ai，都是能设置的。楼主本人之前无任何经验，都是询问DeepSeek和百度实现的😄，后续也是成功在运维平台的网站上接入实时监控。
最后如果还是不行，看看这个配置是否是这样的，或检查下其他配置。
------------------------------------------------------消除水印更新------------------------------------------------------
在node.js 中增加配置 wm1: false
// main.js const RTSP2web = require('rtsp2web') new RTSP2web({ port: 9999, host: '0.0.0.0', transportType: 'tcp', wm1: false, // ⭐ 关键：禁用水印 // 其他参数... })------------------------------------------------------https更新------------------------------------------------------
考虑到网站可能是https，ws会升级为wss，那么后端转码服务rtsp-server必须也要支持wss，只需要在配置中加入wss配置项，再生成自签名证书即可。
项目目录下创建certs 证书文件夹，并创建自签名证书：
# 在项目目录下执行 mkdir -p certs cd certs # 生成私钥 openssl genrsa -out key.pem 2048 # 生成证书（有效期365天）末尾为rtspserver的ip或域名 openssl req -new -x509 -key key.pem -out cert.pem -days 365 -subj "/CN=192.168.xx.xx"后端加上wss启动配置：
// main.js const RTSP2web = require('rtsp2web') const path = require('path') // 服务端口，可以自定义，默认是 9999 const port = 9999 new RTSP2web({ port, host: '0.0.0.0', transportType: 'tcp', // ⭐ 关键配置：禁用文本水印 drawText: false, // ⭐ 关键，移除水印 wm1: false, //q: 23, // 视频质量，数值越小越清晰 audio: false, // 禁用音频，减少带宽 freeTime: 5, // 空闲5秒后自动关闭通道 // wss配置 wss: { cert: path.join(__dirname, 'certs/cert.pem'), key: path.join(__dirname, 'certs/key.pem') } })前端升级wss：
# 前端index.html改为wss var wsUrl = 'wss://' + serverIP + ':9999/rtsp?url=' + encodedUrl; # 安装 serve npm install -g serve # 用 serve 启动 HTTPS 服务（--ssl 参数） serve -s /root/rtsp-server -l 8080 --ssl-cert /root/rtsp-server/certs/cert.pem --ssl-key /root/rtsp-server/certs/key.pem如果是自签名证书，浏览器会阻止连接。
解决方法：
在浏览器中先单独访问rtspserver服务：
https://192.168.xx.xx:9999/
浏览器会显示证书警告，点击"高级" → "继续访问"，然后再刷新你的播放页面。