在web中播放rtsp视频方案对比

落日映苍穹つ 2023-10-16 15:17 44阅读 0赞

## 准备 ##

*  需要先准备好一个可播放的rtsp视频地址，可以下载 VLC Media Player测试是否可以播放，下载后点击“媒体”、“打开网络串流”、“输入地址”、“播放”

> 网上有很多方案都是通过将rtsp转成hls或者rtmp的视频流，这些方法实现起来较为简单，但不符合要求

## 舍弃方案 ##

*  【转hls】延时非常高，甚至几十秒，不适宜这种实时性强的场景
 *  【转rtmp】需要借助flash插件才可以使用，而2020年12月谷歌浏览器将不再支持flash，其他浏览器也将逐步淘汰flash，长远来看也不适宜
 *  【转图片帧】需要后端借助工具将rtsp视频流每一帧转成图片，再通过websocket协议实时传输到前端，前端用canvas绘制，这种方法对后端转流要求较高，每张图片如果太大会掉帧，延时也不稳定。

## flvjs + ffmpeg + websocket + node ##

1.  运行前准备

*  启动后端需要 node 环境，前往node官网下载，建议下载LTS稳定版本
 *  前端demo使用的是 Vue，不了解的无影响，想了解的请移步Vue官网
 *  电脑需要安装 FFmpeg 转流工具，前往FFmpeg下载页下载，安装教程，注意安装路径不要包含中文

2.安装依赖包

*  在项目根目录终端中运行 npm i 安装后端所需依赖包
 *  在 front 目录终端中运行 npm i 安装前端所需依赖包

3.修改代码

*  修改 index.js 文件中的 FFmpeg 安装路径 ffmpeg.setFfmpegPath("D:/software/ffmpeg-20200713-7772666-win64-static/bin/ffmpeg"); 填写本机的安装路径
 *  修改 front/src/componets/HelloWorld.vue 中的 rtsp 地址为经测试可用的地址

4.启动

*  在项目根目录终端中运行 node index.js 启动node服务
 *  在 front 目录终端中运行 npm run dev 启动前端服务，启动完成后在浏览器中打开前端服务地址即可看到视频

5.效果

*  延时在2秒左右
 *  FFmpeg占用CUP，且每增加一个视频都会占用更多的CUP，建议rtsp用辅码流以获取更加稳定的效果

## Kurento + WebRTC ##

> 这套方案需要搭载 Kurento 转流服务器，将 rtsp流 转成 webrtc流，直接在video中播放（需要浏览器支持webrtc）

1.  运行前准备

*  Ubuntu服务器或虚拟机
 *  支持 webrtc 的浏览器（现代主流浏览器基本都支持）

1.  在Ubuntu服务器或虚拟机上安装Kurento，服务器是后端的童鞋安装的，据说按照文章可以一步到位安装成功。
2.  clone一份官方的前端代码：kurento-rtsp2webrtc
3.  Kurento服务启动之后，启动前端项目，打开页面输入可用的rtsp视频地址，再点击start即可看到画面
4.  效果

*  延时非常低，几乎是实时的，满足要求
 *  只能在局域网内播放，如果你想在公网上使用，还要学习网络穿透打洞，服务器部署能力，流量消耗等等
 *  Kurento服务有很多配置，学习成本相对较高，需要专门去研究这个东西，而且是很久以前的项目，资料不是特别多，慎用

## VLC播放器 + http ##

> 这种方案实现起来简单，但是性能堪忧，可以试一下体验一下，大多数业务场景都使用

1.  运行前准备

*  VLC播放器 VLC Media Player

1.  VLC播放器操作步骤

*  点击媒体菜单，选择“流”

选择“网络”，输入可使用的rtsp地址，再选择“串流”

选择“下一个”

下拉选择“HTTP”，再点击右边的“添加”按钮

输入ip和路径（将组成写入video标签src的路径），点击“下一个”

选中“激活转码”，下拉选择“OGG”，点击“下一个”

选中“串流所有基本流”，再点击“流”

这时候看到窗口顶部显示“converting”，底部的时间也开始动起来了，就是已经在转http流了

3.前端实现

*  只需要填写video的src为 http://127.0.0.1:8889/123 (刚刚输入的端口和路径)并设置type为 video.ogg打开页面即可播放

4.效果

*  直接用 VLC 播放器播放本来就有一定的延迟，大概在3s左右，稳定的时候也有1-2s，在经过转流延时更高
 *  占用大量CPU，转流一个视频占用了大概15%-18%的CPU，多路播放需谨慎，使用辅码流可减少CPU消耗
 *  极少的情况会出现卡顿
 *  第一帧画面是绿色的影响观感

## jsmpeg.js + ffmpeg + websocket + node ##

> 这种方案是我见过免费方案中效果最好的，原理是在后端利用 转流工具 FFmpeg 将 rtsp流 转成 图片流，然后通过 websocket 传输 图片，在利用 jsmpeg.js 绘制到canvas上显示

1.  运行前准备

*  启动后端需要 node 环境，前往node官网下载，建议下载LTS稳定版本
 *  电脑需要安装 FFmpeg 转流工具，前往FFmpeg下载页下载，安装教程，注意安装路径不要包含中文

2.安装依赖包

*  在项目根目录终端中运行 npm i 安装后端所需依赖包

3.修改代码

*  rtsp-video-node 中的代码无需更改，node服务默认端口为8088，如出现端口占用，更改 app.js 中的 app.listen(8088, () => \{\})
 *  rtsp-video-canvas 中修改 rtspData.url 为可用的rtsp地址，修改rtspData.port 为没有被占用的端口给websocket

4.启动

*  在项目根目录终端中运行 node app.js 启动node服务
 *  在浏览器中打开 index.html

5.效果

*  延时在500ms左右
 *  FFmpeg占用CUP，且每增加一个视频都会占用更多的CUP，建议rtsp用辅码流以获取更加稳定的效果（辅码流每个ffmpeg进程占用3%的CPU），demo中有运行shell脚本的代码用于杀掉无用的FFmpeg进程，未测试效果。

## liveweb ##

liveweb是一款超低延时(150-200毫秒)、秒启动、无插件web实时视频播放器，h5视频播放器，支持egde、firefox、Chrome、safari等常见浏览器。支持h264、h265、AAC、G711等常见音视频格式。

支持协议：RTSP、RTMP、HLS、HTTP-FLV、WebSocket-FLV、GB28181、HTTP-TS、WebSocket-TS、HTTP-fMP4、WebSocket-fMP4、MP4、WebRTC。

支持RTSP/Onvif/GB/T28181/EHome/海康SDK/大华SDK等设备或者平台接入

服务器包含设备接入、音视频直播、流媒体分发服务器、录像存储和回放服务等功能。

提供GB28181信令转接和平台级联

支持HTTPS 加密等；

对外提供HTTP API二次开发接口；