刘仁 Java后端开发

如何不花钱让html5播放rtsp视频流

2019-12-19
LIUREN

如何不花钱让html5播放rtsp视频流

在安防项目工作的小伙伴大概都经历过一段时间,和国内各种摄像头对接,让视频显示到自己的项目中,这些视频厂商大多会提供自己的web插件,让你自己对接,集成到项目中,但这种视频插件大多使用了浏览器ActiveX控件,所以只能在IE内核浏览器以及低版本的火狐和谷歌浏览器使用,这就意味的你出来要与多个视频厂家对接,只能用ES5。还要做大量的浏览器兼容工作,就拿本人为例,一年多的时间前后对接了海康NVR,海康平台,大华平台,宇视,中天信,科达,东方网力,天地伟业等,IE兼容一度从IE11做到了IE6,期间趟雷趟到脚软。一句话,我要吐了。为了解决这些令人发指的问题,是时候研究一波怎么不用插件把视频流直接播放在页面上且减少视频对接工作。

作者:骆飞

链接:https://juejin.im/post/5d71c57be51d45620d2cb955

来源:掘金

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

需求:

  1. 不花钱,采用开源框架,无商业风险

  2. 延迟低,视屏流稳定

  3. 大多数nvr和ipc或者摄像机平台都支持输出的RTSP视频流,通过RTSP转换来实现,减少对接工作

  4. 无插件在浏览器显示视频画面,兼容火狐谷歌高版本浏览器

  5. 同一页面播放不同厂家视频

经过一轮严谨的科学调(bai)研(du),还是发现有很多的视频转码解决方案,如果公司愿意花钱,大家就不用往下看了,可以直接使用easyNVR,青柿,Streamedian等等这些付费的流媒体服务。不花钱的方案也有不少,咱们今天介绍第一种(文中所提的框架工具具体功能大家自行百度,不做过多的阐述)。

FFmpge + Nginx +Nginx-rtmp + video.js 实现视频直播

系统环境环境:centos7.5

原理:

最简单的FFmpeg全量安装:

静态预安装FFMpeg。
为此,首先要获取安装脚本:
wget https://raw.githubusercontent.com/q3aql/ffmpeg-install/master/ffmpeg-install
然后使文件可执行:

chmod a+x ffmpeg-install
现在安装发布版本:

./ffmpeg-install --install release
现在仔细检查它是否有效:

ffmpeg -version

吐槽:一开始使用了yum来安装,这里注意只能默认安装2.X版本,程序长跑的时候发现rtsp转码rtmp过程中大约1小时,转码进程会崩溃,导致视频流断开。查了资料得知这是2.X版本的一个已知问题,当get_ue_golomb()函数无法解析大于8190bit的数据,当遇到大于8190bit的数据时,就会报错。没办法,只能装一个高版本的全量FFmpeg,跟着教程走,十几个依赖一步一个坎,我只是个前端啊。然后去CSDN找了个FFmpeg安装脚本,60多个币,下载下来发现压根就不能用,脚本文件字母都能打错了,难道60多币的东西写完都不验证吗?你这不是坑币吗。最后,只能去google老外了,找到了这个脚本,妈妈咪啊,一步到位安装最新的FFmpeg4.2,视频转码3天不带断的。有时候我们当代程序员是不是要反思一下,不要被金钱冲昏了头脑,多多助人为乐,发扬雷锋精神,严谨一些至少写的东西能用吧,为改善中国编程环境奉献一份力量。

​ 题外话:前段时间技术胖发免费教学视频遭到一些付费视频人的打压,他们认为这是侵犯了他们的利益,不让技术胖继续发免费视频,这是多么让人恶心的行为。说实话,技术胖是我vue入门的导师,他的视频简单易懂,人也非常好,总是乐此不疲的为一些程序员解决问题。避免新手走很多弯路,多一些这种有奉新精神的大佬,国内的环境是不是能更好一些呢?

最简单的Nginx-rtmp 安装

安装docker
yum install -y docker
启动docker
systemctl start docker
下载镜像
docker pull tiangolo/nginx-rtmp
启动 nginx-rtsp
docker run -d -p 1935:1935 --name nginx-rtmp tiangolo/nginx-rtmp

小应用:

使用obs 推流到 nginx-rtsp 前端使用video.js播放 就可以做一个简单的直播间

关闭防火墙

firewall-cmd --state //防火墙状态
systemctl stop firewalld.service //停止防火墙
systemctl disable firewalld.service //禁止防火墙开机启动

FFmpeg推流

  1. 海康rtsp格式
rtsp://账户名:密码@IP:554/h264/ch33/main/av_stream 
   //ch+通道号,main主码流,sub子码流
  1. 大华rtsp格式:
rtsp://账户名:密码@IP:554/cam/realmonitor?channel=通道号&subtype=码流
  1. FFmpeg推流
    ffmpeg -re  -rtsp_transport tcp -i <rtsp地址> -vcodec libx264 -vprofile baseline -acodec aac -ar 44100 -strict -2 -ac 1 -f flv -s 1280x720 -q 10 rtmp://localhost:1935/live/随便写
    

注意:推流时一定要使用 -rtsp_transport tcp协议 否则默认UDP,视频流会有花屏问题,其他厂家rtsp格式百度一下,大厂基本都能搜到。

相关脚本

  1. 多视频流推流脚本
    #!/bin/shrtspUrl1="rtsp://admin:jd123456@172.16.154.62:554/cam/realmonitor?channel=12&subtype=1"rtspUrl2="rtsp://admin:jd123456@172.16.154.62:554/cam/realmonitor?channel=11&subtype=1"rtspUrl3="rtsp://admin:jd123456@172.16.154.62:554/cam/realmonitor?channel=10&subtype=1"rtspUrl4="rtsp://admin:jidian123@172.16.151.230:554/Streaming/tracks/1001?starttime=20190827t220910z&endtime=20190827t221030z"ffmpeg -re  -rtsp_transport tcp -i $rtspUrl1 -vcodec libx264 -vprofile baseline -acodec aac -ar 44100 -strict -2 -ac 1 -f flv -s 1280x720 -q 10 rtmp://localhost:1935/live/120 &# ffmpeg -re  -rtsp_transport tcp -i $rtspUrl2 -vcodec libx264 -vprofile baseline -acodec aac -ar 44100 -strict -2 -ac 1 -f flv -s 1280x720 -q 10 rtmp://localhost:1935/live/2 &# ffmpeg -re  -rtsp_transport tcp -i $rtspUrl3 -vcodec libx264 -vprofile baseline -acodec aac -ar 44100 -strict -2 -ac 1 -f flv -s 1280x720 -q 10 rtmp://localhost:1935/live/3 &# ffmpeg -re  -rtsp_transport tcp -i $rtspUrl4 -vcodec libx264 -vprofile baseline -acodec aac -ar 44100 -strict -2 -ac 1 -f flv -s 1280x720 -q 10 rtmp://localhost:1935/live/4 &
    
  2. 杀FFmpeg进程脚本
    #!/bin/bashecho "restart..."pid=`ps -ef | grep rtsp_transport | awk '{print $2}'`if [ -n "$pid" ]then   kill -9 $pid   echo "kill pid:"$pidfiecho "kill pid finish..."
    

    使用建议:使用脚本可以在同一窗口实现多个视频流的推送,便于维护。

可以同过手动执行,记得给脚本加上权限!也可以自己写个程序关联到业务平台,控制推流的启动关闭,node,java等都可以实现。

前端页面播放视频

可以通过video.js 封装一个rtmp播放器,直接在页面上播放。

这里我们推荐ckplayer

html

<div id="video" style="width: 400px; height: 400px; float: left;"></div>

js

var videoObject = {            
    container: '#video', //容器的ID或className            
    variable: 'player', //播放函数名称            
    autoplay: true,            
    live: true,            
    video: 'rtmp://172.16.151.154:1935/live/1'  //rtmp地址        
};
var player = new ckplayer(videoObject);

效果

关于性能

服务器配置

服务器配置

内存:32GB

cpu逻辑内核:24

这里我同时下发了9个FFmpeg进行转码,每个进程内存占用60mb左右,cup一个逻辑内核占用20%左右,理想状态这台服务满载可以达到120任务,但肯定是达不到120,我测试过50个同时下发,cpu总占用50%左右,还要考虑网络因素,数据只供大家做一个参考,根据自己的服务器量力而行。

相关代码

github地址:https://github.com/JackFlyL/rtmpPlayer.git

总结

至此,我们如何实现在html播放rtsp视屏流就能实现了,一般小型安防项目展示十几个摄像头这套方案就能胜任,集成项目方便,且浏览器兼容好,再也不用搞IE兼容了。但是今天说的是初步方案,还是有一些缺陷的

  1. rtmp基于flash播放器,各大浏览器现在都纷纷摒弃了flash,所以rtmp播放也不是长久方案。(这里可以将rtsp转为http协议通过bilibili开发的flv.js进行播放,不使用flash,原理是一样的)
  2. FFmpeg在rtsp转码rtmp会有大概3秒的延时,不能达到一些项目需求

如何使用node全栈打造一套,接口请求,FFmpeg实时下发推流,终止推流,完全独立的视频平台,可以与任何业务平台对接。敬请期待如何不花钱让html5播放rtsp视频流(第二弹)

最后

还是提一下技术胖的事吧,之前vue入门 一直跟着技术胖的视频学习,他的博客不单单只有视频,还细心的吧代码都一行一行贴了出来,对于新手真的很友好,看了那么多视频基本都是白嫖,就链接一下吧,www.jspang.com/

我不知道有多少人能看到,但至少我能影响我周围的这些人。免费,不等于义务,一句温馨的话也能暖人心。

作者:骆飞

链接:https://juejin.im/post/5d71c57be51d45620d2cb955

来源:掘金

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

博客地址:https://www.codepeople.cn

=====================================================================

微信公众号:


Comments

Content