如何不花钱让html5播放rtsp视频流(第二弹)

16,124 阅读3分钟

前言

书接上文,上期教程我们实现了利用FFmpeg将rtsp转码为rtmp,nginx分发,在页面上播放视频。但是rtmp也有还是具有缺陷的,比方说:

  • rtmp视屏流基于flash才能播放,所以你的电脑必须安装flash,但是当前各大浏览器都准备不再支持flash
  • rtmp视频流播放还是具有2-3秒的延迟实现,这对实时告警系统还是不太理想。

那么这期教程就搭建一个完整的视频系统,顺便优化一下这两个问题。

项目地址

github.com/JackFlyL/no…

项目需求

  • 多平台IPC实时播放视频
  • 历史录像播放
  • 云台控制
  • 轮询转码任务防止视频断连
  • node.js实现接口交互

技术架构

上期已经说过怎么通过脚本创建FFmpeg转码命令,这套方案还是同样的套路,但不是转rtmp 通过nginx分发了。转码后通过node创建websocket连接,客户端连接,动态展示视频。

技能栈

前端:

  • jsmpeg.js (连接wbesocket,绘制视频图像)

服务端(node):

  • express(静态服务,接口处理)
  • body-parser(处理接口接收数据)
  • node-rtsp-stream-jsmpeg (下发FFmpeg指令,创建websocke服务端)
  • child_process(启动shell脚本指令)

其他:

  • FFmpeg(视频流转码)
  • pm2(node进程守护)
  • 云台控制程序(通过视频厂家提供的sdk二次开发,通过ajax调用)

服务端

  • 使用Node.js创建一个静态服务器

  • 接收参数以及跨域处理

  • post接口案例

  • Node.js调用shell脚本(child_process)

  • 启动转码创建websocket服务端

  • 定时查杀FFmpeg进程,websocket后重启防止视频断开连接

客户端

使用jsmpeg.js 指定websocket地址和dom就可以愉快的播放啦!

pm2进程守护

  • linux安装node和npm
  • npm install pm2 -g
  • pm2 start xx.js (启动)
  • pm2 stop xx.js (停止)
  • pm2 list (服务列表)
  • pm2 log (日志输出)
  • pm2 monit (服务监控)

这大概就是常用的几个命令,非常简单好用的pm2 详细的可以去官网看看

看一下效果

总结

到此为止,我们就用node全栈实现了一个简单工的是视频平台,优点:

  • 同时预览来自海康,大华等能生产rtsp流的IPC视频和录像。
  • 不需要安装任何插件
  • 不依赖flash播放视频
  • 视频延时缩小到1s内

当然也有一些已知问题:

  • 主码流转码时性能消耗巨大(每个逻辑cpu占用率达到120左右,所以尽量使用子码流转码,性能消耗大概是20)
  • 历史视频流转码只支持海康(部分nvr不支持历史rtsp录像输出)
  • 前端jsmpeg 连接websocket 频繁切换会导致内存溢出,刷新后正常显示
  • 视频没有声音

最后,如果项目需求 对录像以及声音没有要求的话这套方案还是非常不错的,它具备非常良好的兼容性,移动端pc端基本都没什么限制,其次延迟也比较理想,毕竟经过转码处理,肯定比不上源视频,但是目前他的延迟时间应该算的上是理想的了。