rtsp视频流播放
/
rtsp视频流播放
# 1.各方案介绍、对比
https://juejin.cn/post/6873691566436253710#heading-9 (opens new window)
# 【舍弃方案】
- 【转hls】延时非常高，甚至几十秒，不适宜这种实时性强的场景
- 【转rtmp】需要借助flash插件才可以使用，而2020年12月谷歌浏览器将不再支持flash，其他浏览器也将逐步淘汰flash，长远来看也不适宜
- 【转图片帧】需要后端借助工具将rtsp视频流每一帧转成图片，再通过websocket协议实时传输到前端，前端用canvas绘制，这种方法对后端转流要求较高，每张图片如果太大会掉帧，延时也不稳定。
# 【可用方案】
# flvjs + ffmpeg + websocket + node
- 延时在2秒左右
- FFmpeg占用CUP，且每增加一个视频都会占用更多的CUP，建议rtsp用辅码流以获取更加稳定的效果
# Kurento + WebRTC
- 这套方案需要搭载 Kurento 转流服务器，将 rtsp流 转成 webrtc流，直接在video中播放（需要浏览器支持webrtc）
- 延时非常低，几乎是实时的，满足要求
- 只能在局域网内播放，如果你想在公网上使用，还要学习网络穿透打洞，服务器部署能力，流量消耗等等
# jsmpeg.js + ffmpeg + websocket + node
- 原理是在后端利用 转流工具 FFmpeg 将 rtsp流 转成 图片流，然后通过 websocket 传输 图片，在利用 jsmpeg.js 绘制到canvas上显示
- 延时在500ms左右
- FFmpeg占用CUP，且每增加一个视频都会占用更多的CUP，建议rtsp用辅码流以获取更加稳定的效果（辅码流每个ffmpeg进程占用3%的CPU），demo中有运行shell脚本的代码用于杀掉无用的FFmpeg进程，未测试效果
# 1.flvjs + ffmpeg + websocket + node
信控云平台使用的方案
- 运行前准备
- 电脑需要安装 FFmpeg 转流工具，前往FFmpeg下载页下载，安装教程，注意安装路径不要包含中文
- 安装依赖包
- 在项目根目录终端中运行 npm i 安装后端所需依赖包
- 在 front 目录终端中运行 npm i 安装前端所需依赖包
- 修改代码
- 修改 index.js 文件中的 FFmpeg 安装路径 ffmpeg.setFfmpegPath("D:/software/ffmpeg-20200713-7772666-win64-static/bin/ffmpeg"); 填写本机的安装路径
- 修改 front/src/componets/HelloWorld.vue 中的 rtsp 地址为经测试可用的地址
- 启动
- 在项目根目录终端中运行 node index.js 启动node服务 --这是利用nodejs将rtsp转为flv
- 在 front 目录终端中运行 npm run dev 启动前端服务，启动完成后在浏览器中打开前端服务地址即可看到视频
- 效果
- 延时在2秒左右
- FFmpeg占用CUP，且每增加一个视频都会占用更多的CUP，建议rtsp用辅码流以获取更加稳定的效果
# 2. jsmpeg.js + ffmpeg + websocket + node
这种方案是我见过免费方案中效果最好的，原理是在后端利用 转流工具 FFmpeg 将 rtsp流 转成 图片流，然后通过 websocket 传输 图片，在利用 jsmpeg.js 绘制到canvas上显示
运行前准备 电脑需要安装 FFmpeg 转流工具
修改代码 rtsp-video-node 中的代码无需更改，node服务默认端口为8088，如出现端口占用，更改 app.js 中的 app.listen(8088, () => {}) rtsp-video-canvas 中修改 rtspData.url 为可用的rtsp地址，修改rtspData.port 为没有被占用的端口给websocket
启动
在项目根目录终端中运行 node app.js 启动node服务 在浏览器中打开 index.html
效果
延时在500ms左右 FFmpeg占用CUP，且每增加一个视频都会占用更多的CUP，建议rtsp用辅码流以获取更加稳定的效果（辅码流每个ffmpeg进程占用3%的CPU），demo中有运行shell脚本的代码用于杀掉无用的FFmpeg进程，未测试效果。