因公司业务需求，研究了下在web端播放rtsp流视频的方案，过程很曲折，但也算是颇有收获。
本文介绍的在web端播放rtsp视频的方案都已实现并通过了测试，如果还有其他更好的方案，请务必告知我！

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

flvjs + ffmpeg + websocket + node

这套方案的核心为 bilibili 开源的 flvjs，原理是在后端利用转流工具 FFmpeg 将 rtsp流 转成 flv流，然后通过 websocket 传输 flv流，在利用 flvjs 解析成可以在浏览器播放的视频。

参考文章

demo地址

运行前准备

启动后端需要 node 环境，前往node官网下载，建议下载LTS稳定版本
前端demo使用的是 Vue，不了解的无影响，想了解的请移步Vue官网
电脑需要安装 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服务
在 front 目录终端中运行 npm run dev 启动前端服务，启动完成后在浏览器中打开前端服务地址即可看到视频

效果

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

Kurento + WebRTC

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

参考文章：基于Kurento搭建WebRTC服务器、WebRTC之Kurento:直播、视频通话、视频会议我都行！

运行前准备

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

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

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

VLC播放器 + http

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

运行前准备

VLC播放器 VLC Media Player

VLC播放器操作步骤

点击媒体菜单，选择“流”
选择“网络”，输入可使用的rtsp地址，再选择“串流”
选择“下一个”
下拉选择“HTTP”，再点击右边的“添加”按钮
输入ip和路径（将组成写入video标签src的路径），点击“下一个”
选中“激活转码”，下拉选择“OGG”，点击“下一个”
选中“串流所有基本流”，再点击“流”
这时候看到窗口顶部显示“converting”，底部的时间也开始动起来了，就是已经在转http流了

前端实现

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

效果

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

jsmpeg.js + ffmpeg + websocket + node

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

参考文章：如何不花钱让html5播放rtsp视频流（第二弹）（因为项目中使用的是vue，所以将文章中的demo拆成了前端和后端两个文件夹，并且通过ajax请求的方式开启rtsp流的转换）

demo地址

运行前准备

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

安装依赖包

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

修改代码

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进程，未测试效果。

H5stream

由零视技术提供的一种解决方案，有收费版，可发送公司相关信息获取测试licence，无licence会受到每隔一小时转流服务会自动断开的限制，一小时后需要重新启动服务，且最多同时播放 9路视频

使用方法

根据系统不同下载对用版本官方下载地址，注意最新版本在最下面，使用r11版本
下载之后将文件放在英文目录下，运行目录下的 h5ss.bat，Linux系统运行 h5ss.sh
某些版本的 window 系统或者centOS 还需要安装一些东西安装PDF 8.0 软件安装
打开目录下的 conf 文件夹下的 h5ss.conf, 修改 source.src 中的内容，该数组中的每一项都代表一个视频地址资源，修改为可用的rtsp地址
打开目录下的 www 文件夹下的 demo.html, 在浏览器这种查看即可

注意事项

安装路径不能有中文
token 是每个视频的唯一标识，可以使用url作为token
处理直接修改 conf 配置文件，还可以动态添加视频，h5stream api 手册，这里提供一个动态添加视频的demo供参考，直接放到 demo.html 同级的目录用浏览器打开即可
从 demo.html 文件中可以看出有两种播放器实例 H5sPlayerCreate 和 H5sPlayerRTC，前者基于websocket，后者基于webRTC，webRtc实时性更强且更稳定，本地调试只要浏览器支持webrtc基本不会有问题，如果h5stream服务和前端文件不再一个网络下，还需要更改配置文件 h5ss.conf，将bCloudMode置为true，strRelatedPublicIp填写h5stream 服务所在服务器的的ip地址：
有些电脑没有GPU加速，但浏览器开启了GPU加速选项，这会导致播放出来的视频帧数变低（播放稳定但是会感觉卡顿），解决办法是关闭掉浏览器的GPU加速：如谷歌浏览器 -> 设置 -> 高级 -> 系统 -> 使用硬件加速模式（如果可用）另外，检查电脑是否带GPU，打开任务管理器 -> 性能，能看到GPU项那就是有
每隔一小时服务会自动断开，先杀掉h5ss进程在重启，懂shell的可以写定时查杀重启，但不知道h5stream会不会有什么机制防止这种操作。
更多问题及解决方案见官方问答

效果

延时400ms左右
一个页面同时播放9路无压力

结论

总的来说，h5stream的效果最好，毕竟后面有团队支持，这是我目前项目中使用的方法，公司后续可能会购买，利用ffmpeg转图片流的方法大体也满足需求，平时自己学习研究可以拿来玩玩。

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

目录

播放rtsp要求

各方案demo地址

准备

各种方案对比

舍弃方案

flvjs + ffmpeg + websocket + node

Kurento + WebRTC

VLC播放器 + http

jsmpeg.js + ffmpeg + websocket + node

H5stream

结论