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或者他访问失败问题，可以按照如下方法排查：

1. 检查物理机是否可以ping通虚拟机

   ping 192.168.1.89
   

2. 使用telnet 命令检查物理机是否可以连通虚拟机中对应的端口

   telnet 192.168.1.89 8888
   

3. 检查虚拟机防火墙状态

   firewall-cmd --state
   

4. 如果虚拟机防火墙开启，则检查虚拟机开放的端口是否包含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流