由于摄像头是 rtsp 格式的, h5 原生不支持这种格式, 网上查了很多教程大多是使用 rtsp 转 rtmp, 不过 rtmp 需要 falsh 的支持, 但是在 Chrome 已经默认禁用, 包括未来也会逐渐淘汰, 所有最终这种方案被淘汰.
于是我想应该把 rtsp 转化成一种类似 http 协议的方式, 能够直接被 h5 识别, 于是我 google, 百度就不用说了, 查了半天全是没用的东西. 终于我找到了一种叫 jsmpeg 的插件, 它主要是通过 webSocket 发送 MPEG, 前端通过 JS 解析 MPEG 不断绘制 canvas, 包括音频. 最终测试的结果就是一个 1920*1080 分辨率的画面延时大概的 0.5s 左右, 超出我的预料, 性能居然这么高. 后台观察发现浏览器使用了 GPU 加速.
准备工具:
1,FFMPEG: 用来解码的, 做视频逃不掉这个
2,Node.JS: 搭建 webSocket 服务器, 以及运行一个 jsmpeg 的 JS 文件
3,jsmpeg: 运行主程序
可以到我的 GitHub 去下载
其实整个步骤就以下几步:
解压 FFMPEG, 然后配置一下环境变量
安装 node, 如电脑已安装 node, 这一步忽略
安装 webSocket 模块 [具体操作: cd 到 jsmpeg 所在路径, 执行 NPM install ws 即可]
在 jsmpeg 所在路径下, 执行
node websocket-relay.JS supersecret 8081 8082
打开另一个 cmd:
FFMPEG -i "你的 rtspurl" -q 0 -f mpegts -codec:v mpeg1video -s 1366x768 http://127.0.0.1:8081/supersecret
打开 jsmpeg 文件夹里面的 view-stream.html 页面就可以看到你的监控视频了
如果在 view-stream.HTML 中能看到摄像头视频的话, 那也就可以在自己的 HTML 中这样去实现:
- <!-- html -->
- <canvas id="video-canvas">
- </canvas>
- // JS var canvas = document.getElementById('video-canvas'); var url =
- 'ws://127.0.0.1:8082/'; var player = new JSMpeg.Player(url, {canvas: canvas});
效果如下:
下面是比较详细的操作过程:
解压之后的 FFMPEG 是这样
接下来需要配置一下环境变量, 把 FFMPEG 下的 bin 配置到系统 path 变量里面, 根据自己不同的路径配置
在 cmd 里输入 FFMPEG 回车 输出以下代表配置正确
此时如果电脑上已经安装了 node, 那就直接可运行 jsmpeg, 如果没有安装 node, 请先百度安装. 由于我的电脑已安装 node, 在这里就直接跳过安装 node 这一步.
解压 jsmpeg 压缩文件到某个盘符, 里面出现有一个 websocket-relay.JS, 我们主要运行这个 JS 文件
运行 websocket-relay.JS 之前 node 需要安装 webSocket 模块
打开 cmd 控制台, cd 到 jsmpeg 所在路径
- NPM install ws
- node websocket-relay.JS supersecret 8081 8082
说明:
Supersecret 是密码
8081 是 FFMPEG 推送端口
8082 是前端 webSocket 端口
然后在 cmd 中执行:
FFMPEG -i "你的 rtspurl" -q 0 -f mpegts -codec:v mpeg1video -s 1366x768 http://127.0.0.1:8081/supersecret
出现下面这样说明正确
打开 jsmpeg 文件夹里面的 view-stream.HTML 页面如果没有问题应该出现下面的画面, 到此为止在 h5 播放 rtsp 方案算基本完成
我这边的 node 版本是 v10.15.3
安装过程中遇到的小问题
我的是 window10 操作系统 8G 64 位
在全局安装 ws 后, 执行 node websocket-relay.JS supersecret 8081 8082 会报 cannot find module 'ws', 不知道是不是 node 版本太高的原因
所以在安装的时候不要加 - g, 按照下面的步骤来.
如果电脑设置了睡眠之后再打开, 会发现视频监控停止了, 此时不要紧张, 在 cmd 里重新执行一下
在 D:\videoStream\jsmpeg-master 路径下执行
node websocket-relay.JS supersecret 8081 8082
打开另一个 cmd 执行:
FFMPEG -i "你的 rtspurl" -q 0 -f mpegts -codec:v mpeg1video -s 1366x768 http://127.0.0.1:8081/supersecret
参考资料
html5 播放 rtsp 方案
来源: http://www.jianshu.com/p/8e88e23e2409