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服务器

shell 复制代码
# 创建文件夹
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' 报错执行下方命令进行安装

shell 复制代码
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项目添加代理配置
  • 添加代理配置
js 复制代码
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配置文件

properties 复制代码
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流

相关推荐
程序员南飞1 小时前
ps aux | grep smart_webrtc这条指令代表什么意思
java·linux·ubuntu·webrtc
StrokeAce1 小时前
linux桌面软件(wps)内嵌到主窗口后的关闭问题
linux·c++·qt·wps·窗口内嵌
黄尚圈圈3 小时前
Vue 中引入 ECharts 的详细步骤与示例
前端·vue.js·echarts
热爱嵌入式的小许5 小时前
Linux基础项目开发1:量产工具——显示系统
linux·运维·服务器·韦东山量产工具
一路向前的月光7 小时前
Vue2中的监听和计算属性的区别
前端·javascript·vue.js
长路 ㅤ   7 小时前
vue-live2d看板娘集成方案设计使用教程
前端·javascript·vue.js·live2d
韩楚风8 小时前
【linux 多进程并发】linux进程状态与生命周期各阶段转换,进程状态查看分析,助力高性能优化
linux·服务器·性能优化·架构·gnu
陈苏同学9 小时前
4. 将pycharm本地项目同步到(Linux)服务器上——深度学习·科研实践·从0到1
linux·服务器·ide·人工智能·python·深度学习·pycharm
Jiaberrr9 小时前
Element UI教程:如何将Radio单选框的圆框改为方框
前端·javascript·vue.js·ui·elementui
Ambition_LAO9 小时前
解决:进入 WSL(Windows Subsystem for Linux)以及将 PyCharm 2024 连接到 WSL
linux·pycharm