海康摄像头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 charsetUTF-8 titleRTSP 播放/title script srchttps://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 idvideo-canvas/canvas script // ⭐ 原始 RTSP 地址不要做任何编码 // 海康web页面的用户名、密码 及 ip地址端口默认554后面的1301代表通道13的数据如果是通道1则为101其他通道类似102, 103 ....。 var rawUrl rtsp://username:passwordxx.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更新------------------------------------------------------考虑到网站可能是httpsws会升级为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 /CN192.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/浏览器会显示证书警告点击高级 → 继续访问然后再刷新你的播放页面。