项目需求,需要前端页面实时展示摄像头采集的视频,视频啊,之前一点没接触过,经过一番调研、尝试,不得不说,网上文章真的大同小异,踩过许多坑,整理如下。

一、科普一下

1.流程

在这里插入图片描述

2.常见视频流格式

● RTMP(推流端、拉流端)
● RTSP(推流端)
● HLS(拉流端)
● FLV(拉流端)

3.FLV

● 原生video标签只支持Ogg、MPEG4、WebM三种格式
● 默认需要安装flash插件才可以播放
● bilibili开源flv.js插件可直接转码,vue项目直接使用
○ 推流端视频编码必须是H.264

4.HLS

● 把整个流分成一个个小的基于HTTP的文件下载,所以不适用直播,延迟会比其他协议的高,对网络质量要求高
● 前端处理HLS格式视频流,引入video.js

5.RTSP

● 实时传输协议
● 大屏项目大部分视频都是通过安装监测摄像头传输展示的
● 延时低,厂商直接提供,网络负载均衡
● 不支持移动端,浏览器兼容性差,需要低版本浏览器,且安装插件

6.RTMP

● 基于TCP,实时性高、稳定性高,主要用于直播
● 一般是传输的为flv流

二、代码实现

在这里插入图片描述
暂不考虑项目要求,对于现阶段前端可实现的途径进行了具体实现,如下:

1.ie浏览器+vlc插件

  • 本地下载VLC 32位的播放器,ie浏览器自动安装了vlc插件,可直接播放rtsp、rtmp格式的视频,代码如下
    在这里插入图片描述缺点:
  • 需要指定浏览器,安装指定插件
  • vlc插件并不稳定,测试过程中,经常无响应

2.直接播放flv格式vue在这里插入图片描述

在vue项目里,安装了flv.js,可直接播放flv编码格式的视频流

3.直接播放hls格式

在这里插入图片描述

4.webrtc播放

4.1 文档:https://webrtc.org/getting-started/overview

4.2 webrtc可实现的功能特别强大,网上可参考的资料很少,目前尝试的是webrtc-streamer插件,实现了rtsp直接播放

  • 本地下载webrtc-streameran安装包,双击运行,html代码里引入webrtc-streamer相关的文件,即可在浏览器播放,坑是rtsp的地址一定要标准,不然无法播放
  • rtsp地址不标准对应的展示在这里插入图片描述
  • rtsp地址标准后
    在这里插入图片描述
  • 对应代码
    在这里插入图片描述
  • 尝试了rtmp格式,不能播放,没有进一步验证错误原因,猜测可能是webrtc-streamer插件本身不支持rtmp

4.3 vue-webrtc

  • 调研多用于直播类,目前未找到直接播放rtsp、rtmp的对应function

三、小结

从几种方案调研来看,浏览器不支持flash插件已成趋势,不建议ie+vlc插件的方案,至于其他几种直接播放的方法,看项目需求,不过个人看法,主流应该是webrtc(ps:代码截图涉及的很多本地测试地址,都是后台小哥哥用ffmpeg转的😊😊😊)

视频小白,欢迎指正!

持续尝试中,后续更新…


2023-01-28 实现chrome播放rtmp

兔年大吉,复工第一天应项目需求,时隔一年多,再次尝试直接用chrome播放rtmp格式的视频流,在一番调研之后,具体实现如下。

  • vue项目npm安装video.js、videojs-flash依赖
  • 下载flash player(未尝试其他的插件)

具体代码如下

  • package.json对应依赖版本
    在这里插入图片描述
  • vue文件
    在这里插入图片描述
  • import引入
    在这里插入图片描述
  • 初始化data声明变量player
    在这里插入图片描述
  • mounted里代码
    在这里插入图片描述
  • 浏览器设置-允许当前页面的flash播放
    在这里插入图片描述
    截至到发文,rtmp://mobliestream.c3tv.com:554/live/goodtv.sdp此rtmp地址可用,以上代码是最简单的实现,并没有进一步的封装,小伙伴们可根据自身需求进行修改。来一张播放截图
    在这里插入图片描述
    ps:此处未进行实时推流播放测速,后续如果进行相关工作会持续更新。
Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐