html5播放rtsp方案

转自开源社区一个大佬文章,只是内容有些过时安装会出错,所以就更新一下

准备工具

  1. Ffmpeg(点击下载),用来解码的,做视频逃不掉这个,因为系统不一样选择builds包自行下载
  2. Node.js(点击下载),搭建webSocket服务器,以及运行一个jsmpeg的js文件
  3. jsmpeg(点击下载),运行主程序

1 安装Ffmpeg

  1. Ffmpeg(做视频的应该都听过这个软件,在github上星星很多,使用c语言编写,可以在gitHub上面看到有兴趣研究一下代码,它不只是解析rtsp这么简单),这里下载是一个压缩文件,
  2. 下载完了解压到一个盘符里面,比如我解压到D盘的soft下面
    如图: html5播放rtsp方案
  3. 配置环境变量,把ffmpeg下的bin配置到系统path变量里面,根据自己不同的路径配置 如图: html5播放rtsp方案

html5播放rtsp方案

  1. 配置之后控制台输入ffmpeg出现下面的文字说明安装正确,否则请自行百度 如图: html5播放rtsp方案

html5播放rtsp方案 上面是配置正确的信息

2 安装Node

  1. 下载node安装文件,傻瓜式的安装这里就不截图了,安装完成之后在cmd控制台输入node -v验证是否安装完成 如图: html5播放rtsp方案 出现版本信息说明安装正确,关于node的一些其他相关操作自行百度,就不详细叙述了。

3 运行jsmpeg

  1. 解压jsmpeg压缩文件到某个盘符,里面出现有一个websocket-relay.js,我们主要运行这个js文件 如图: html5播放rtsp方案 在运行websocket-relay.js之前node需要安装webSocket模块
  2. webSocket模块安装
    在cmd控制台输入: npm install ws

html5播放rtsp方案 出现这种文字说明安装正确,然后在当前目录下运行jsmpeg文件夹里面的websocket-relay.js 执行命令: node websocket-relay.js supersecret 8081 8082

说明:

  1. Supersecret是密码
  2. 8081是ffmpeg推送端口
  3. 8082是前端webSocket端口 html5播放rtsp方案 出现上面的文字说明执行正确,然后另起一个窗口运行ffmpeg 执行命令: ffmpeg -i "你的rtspurl" -q 0 -f mpegts -codec:v mpeg1video -s 1366x768 http://127.0.0.1:8081/supersecret

你的rtspurl就是监控地址的全地址包含协议头 rtsp这些,然后出现下面的文字说明运行正确

html5播放rtsp方案 打开jsmpeg文件夹里面的view-stream.html页面如果没有问题应该出现下面的画面,到此为止在h5播放rtsp方案算基本完成

html5播放rtsp方案

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

多个摄像头播放补充

作者源码地址 gitee

操作步骤

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

html5播放rtsp方案 然后执行: node websocket.js supersecret 8081 8082,我们主程序改为websocket.js了 2. 在另一个cmd输入:ffmpeg "你的rtsl" -q 0 -f mpegts -codec:v mpeg1video -s 800x600 http://127.0.0.1:8081/supersecret/live1 3. 再开一个cmd输入,这里测试:ffmpeg "你的rtsl" -q 0 -f mpegts -codec:v mpeg1video -s 800x600 http://127.0.0.1:8081/supersecret/live2 4. 上述2和3这两不一样的就是最后的live1和live2了 5. 最后修改view-stream.html里面的代码如下 html5播放rtsp方案

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

html5播放rtsp方案

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

对于解码的时候有的说cpu占用很高的情况这里我说一下,第一种减少摄像头的码率,第二种采用gpu加速解码ffmpeg,网上也有很多参考,但是对硬件是有要求的,如果项目够大,可以要求客户购买显卡,比如英伟达的1080ti,A卡不知道可不可以,参考: 其他说明 原文地址

上一篇:Python读取推流地址Rtsp、Rtmp、Http


下一篇:协议圣经 四 rtspclient