浏览器播放RTSP、RTMP等几种编码格式视频流

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

一、科普一下

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插件

  • 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安装包,cmd起webrtc服务,命令行为:./webrtc-streamer rtsp://172.16.100.36:8554/cv/admin:123,坑是rtsp的地址一定要标准,不然无法播放
  • rtsp地址不标准对应的展示在这里插入图片描述
  • rtsp地址标准后
    在这里插入图片描述
  • 对应代码
    在这里插入图片描述
  • 尝试了rtmp格式,不能播放,没有进一步验证错误原因,猜测可能是webrtc-streamer插件本身不支持rtmp

4.3 vue-webrtc

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

三、小结

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

视频小白,欢迎指正!

持续尝试中,后续更新…

  • 6
    点赞
  • 27
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论

打赏作者

sunmeng666

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值