Linux环境下使用flv.js + websokect播放RTSP视频流
本文适用于Linux系统部署Web项目，通过浏览器播放RTSP视频流
背景
在最近的项目中，涉及到海康威视接入的视频监控播放问题，海康这边可以获取到的视频流是rtsp格式，web端目前没有直接可以播放的组件，于是查阅众多博客以及帖子，刷了不少Gitee和Github上的项目，总结出如下解决方案。
解决方案
将RTSP视频流通过ffmpeg 转成flv格式流，然后通过WebSocket传输flv视频流至前端，通过WebSocket获取到视频流后，使用flv.js对视频流进行播放。
本文搭建环境使用Centos 7 Linux发行版，使用Windows11平台自带的Hyper-V虚拟化管理工具开启Centos7镜像
一、搭建本地RTSP视频流推送服务
模拟视频监控，创建RTSP视频流
参考文章：笔记本摄像头模拟监控推送RTSP流
二、Centos 7 安装Nodejs
参考文章：Centos 7 安装Node.js服务
三、 Centos7 安装 ffmpeg转流服务
参考文章：Centos 7 安装 ffmpeg
四、下载Gitee上开源的Html5播放RTSP流项目
Gitee项目地址：H5播放RTSP视频流: 服务端使用express+express-ws将rtsp转换为flv，通过websocket将flv流推送到前端进行显示 (gitee.com)
下载地址
五、将下载好的代码上传至Linux服务器
# 创建文件夹
cd /home
mkdir node
cd node
# 解压
unzip rtsp-to-flv-master.zip
# 启动项目
cd rtsp-to-flv-master
node index.js
注：如出现 Error Cannot find module ‘express’ 报错执行下方命令进行安装
npm install express
正常启动提示：Project is running at http://localhost:8888/
在物理机上打开浏览器，并在浏览器地址栏上输入地址 示例： http://192.168.1.89:8888/ 其中192.168.1.89为虚拟机IP地址。
如果出现404或者他访问失败问题，可以按照如下方法排查：
-
检查物理机是否可以ping通虚拟机
ping 192.168.1.89 -
使用telnet 命令检查物理机是否可以连通虚拟机中对应的端口
telnet 192.168.1.89 8888 -
检查虚拟机防火墙状态
firewall-cmd --state -
如果虚拟机防火墙开启，则检查虚拟机开放的端口是否包含8888
firewall-cmd --zone=public --list-ports
六、设置代理
在发布到线上环境时，node服务器肯定也是要搭建到线上的服务器的（线上搭建和之前的方式差不多，就是看服务器是Linux还是Windows了，两者区别在于ffmpeg的安装，其他index.js是一样的），就会涉及到代理websokect的问题。
6.1 Vue项目添加代理配置
- 添加代理配置
module.exports = {
devServer: {
proxy: {
'/streamWs/**': {
target: 'ws:http://localhost:8888',
secure: false,
changeOrigin: true,
pathRewrite: {
'^/streamWs': ''
},
ws: true
}
}
}
}
- 修改调用地址
let player = flvjs.createPlayer({
type: "flv",
isLive: true,
// url: `ws://localhost:8888/rtsp/${id++}/?url=${rtsp}`,
url: `ws://${location.host}/streamWs/rtsp/${id++}/?url=${rtsp}`
});
6.2 使用Nginx开启代理服务
参考文章: Centos 7 安装Nginx
修改/usr/local/nginx/conf 下nginx.conf配置文件
worker_processes 1;
pid /usr/local/nginx/logs/nginx.pid;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
map $http_upgrade $connection_upgrade {
default upgrade;
'' close;
}
server {
listen 80;
server_name localhost;
location / {
proxy_pass http://127.0.0.1:8888;
}
location /streamWs/ {
proxy_pass http://localhost:8888/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection $connection_upgrade;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
}
执行命令
nginx -s reload
七、验证
7.1 启动物理机Easy Darwin 推流服务
参考文章：笔记本摄像头模拟监控推送RTSP流
7.2 使用ffmpeg将笔记本摄像转成rtsp视频流
参考文章：笔记本摄像头模拟监控推送RTSP流
7.3 将EasyDarWin推流列表中源地址复制到播放地址数据框中，点击播放
参考文章：笔记本摄像头模拟监控推送RTSP流