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;}}}

执行命令