H5播放RTSP流媒体

由于摄像头是 rtsp 格式的，h5 原生不支持这种格式，网上查了很多教程大多是使用 rtsp 转 rtmp，不过 rtmp 需要 falsh 的支持，但是在 chrome 已经默认禁用、包括未来也会逐渐淘汰，所有最终这种方案被淘汰。一种叫 jsmpeg 的插件，它主要是通过 webSocket 发送 MPEG，前端通过 js 解析 MPEG 不断绘制 canvas，包括音频。最终测试的结果就是一个 1920*1080 分辨率的画面延时大概的 0.5s 左右，性能蛮高的。

说了这么多开始教程吧

（未知原因博客无法访问了，重新审核一下）

准备工具

1 . Ffmpeg（点击下载），配置环境添加到 path 变量中

2 . Node.js（点击下载），配置环境添加到 path 变量中

3 . jsmpeg（点击下载），运行主程序

4 . 运行 jsmpeg

解压 jsmpeg 压缩文件到某个盘符，里面出现有一个 websocket-relay.js，我们主要运行这个 js 文件

 

• 在运行 websocket-relay.js 之前 node 需要安装 webSocket 模块

终端: npm install ws

• 运行 jsmpeg 文件夹里面的 websocket-relay.js

终端: node websocket-relay.js supersecret 8081 8082

说明： Supersecret 是密码 8081 是 ffmpeg 推送端口 8082 是前端 webSocket 端口

• 运行解码程序

终端：ffmpeg -i "rtsp" -q 0 -f mpegts -codec:v mpeg1video -s 1366x768 http://127.0.0.1:8081/supersecret

 

 

上述方案目前还没有投入生产使用，想要真正投入使用至少要解决同时播放多个 rtsp 流的问题，官方提供 websocket-relay.js 只能播放一个源，所以需要重写里面的代码，学一下 node.js 吧，考虑到性能问题，最好在有 GPU 的客户端使用，否则性能会是一个瓶颈，网络带宽也是一个值得考虑的问题

**       2019 年 7 月 17**** 日更新代码，因为之前有人问我怎么实现多个视频流同时播放的问题，这里我把代码提交上来了，先看一下代码里面的注释，说明之后补充，感谢，代码提交到这里了 **(https://gitee.com/yzfar/RtspWebSocket.git)

5 . 2019 年 8 月 19 日多个摄像头播放的补充

之前我把播放多个摄像头的代码上传的码云上面了，今天我说一下怎么播放废话不多说，怎么用说一下

• 第一

其他步骤和上面的一致保证环境没得问题之后在 cd 到项目目录

 

然后执行: node websocket.js supersecret 8081 8082，我们主程序改为 websocket.js 了

• 第二

终端： ffmpeg "rtsp" -q 0 -f mpegts -codec:v mpeg1video -s 800x600 http://127.0.0.1:8081/supersecret/live1

再开一个 cmd 输入，这里测试:

终端：ffmpeg "rtsp" -q 0 -f mpegts -codec:v mpeg1video -s 800x600 http://127.0.0.1:8081/supersecret/live2

这两不一样的就是最后的 live1 和 live2 了

• 第三

修改 view-stream.html 里面的代码如下

 

变化的就是 var url = 'ws://127.0.0.1:8082/live'; 变化的就是 live1 和 live2 和第二步的相对应就像，双击打开 view-stream.html 呈现如下效果

 

这里补充一下，代码里面没有关闭视频流的功能，在日志打印关闭连接之后最好删除一下后台的 ffmpeg 流，不然会造成性能问题，这个关闭的代码在 js 里面不能体现出来，最好是在控制 cmd 命令的程序里面关闭一下。

ffmpeg 具备 gpu 加速功能，本人未测试过，有兴趣的朋友可以尝试一下 cuda 方式。

• 第一条使用英特尔的 CPU 硬件加速，普通 pc 机 cpu 有效，服务器如至强处理器无效

ffmpeg -c:v h264_qsv -rtsp_transport tcp -i "rtsp" -q 0 -vcodec h264_qsv -f mpegts -codec:v mpeg1video -s 800x600 http://127.0.0.1:8081/supersecret/live1

• 第二条使用 cuda 加速，需要 gpu 并安装 cuda

ffmpeg -c:v h264_cuvid -rtsp_transport tcp -i "rtsp" -q 0 -vcodec h264_cuvid -f mpegts -codec:v mpeg1video -s 800x600 http://127.0.0.1:8081/supersecret/live2

• 另外需要使用声音的采用如下命令

ffmpeg -i -i "rts" -f mpegts -codec:v mpeg1video -s 800x600 -codec:a mp2 http://127.0.0.1:8081/supersecret/live2

基于 webrtc 播放的解决方案移步到：https://my.oschina.net/chengpengvb/blog/5023676

6 . 开源视频播放系统

我发现大家对视频直播的需求比较大于是开源这个项目出来，减少重复工作，项目地址：https://github.com/chengpengvb/video

先看一下效果

 

• 主要功能包括：

1 .  自动负载均衡（扩展 agent 数量）

2 . 比较低的延迟

3 . 对于非 IE 内核使用 H5 的播放功能，IE 使用的是 rtmp（需要 nginx-rtmp，因为 IE 不支持声音）

4 . 支持声音播放

5 . 同一播放流复用，不用重新解码

支持 ssl 加密方式

• 运行环境：

1 . Windows、Linux

2 . 2jdk1.8、ffmpeg、nodejs、nginx-rtmp（IE 播放）

• 运行配置

1 . video-regist 的注册中心，常规配置 bootstrap.yml

2 . video-agent 负责解码

 

3 . video-center，负责调用缓存业务中心

 

• 启动程序

1 . video-regist

2 . video-agent （可部署多个）

3 . video-center

4 . 打开浏览器：http://127.0.0.1:8080/ 或者 http://127.0.0.1:8080/index

• 引入 css 和 js 部分

参考 multiPlay.html 和 default.html 页面

• 前端 api 说明

var wssConn = wsConnect (window.location.host, UUID ()); // 初始化一个连接对象 (于后台交互)，单例，UUID () 为一个随机数标识

var video = $("dom").video(wssConn);

var option = {

url : rtsp,//rtsp 流

userName : userName,//rtsp 流用户名

passWord : passWord,//rtsp 流密码

width : 800,// 视频宽度

height : 450,// 视频高度

type : 0 // 解码类型 0:cpu,1:qsv,2:cuda，查看 agent 端是否支持该解码方式，可能需要相关硬件

};

video.play(option, null);// 开始播放

video.close (); // 关闭