浏览器播放RTSP视频流几种解决方案

简介: Streamedian 提供了一种“html5_rtsp_player + websock_rtsp_proxy”的技术方案,可以通过html5的video标签直接播放RTSP的视频流。

方案一: H5 + websocket_rtsp_proxy 实现视频流直播

Streamedian 提供了一种“html5_rtsp_player + websock_rtsp_proxy”的技术方案,可以通过html5的video标签直接播放RTSP的视频流。


整个架构如下图所示,分为服务器端和浏览器端两部分:

20210322154448267.png

方案二:RTSP转RTMP到RTMP服务器,转http-flv,播放端用flv.js播放

flv.js在获取到FLV格式的音视频数据后将 FLV 文件流转码复用成 ISO BMFF(MP4 碎片)片段,再通过Media Source Extensions API 传递给原生HTML5 Video标签进行播放。


flv.js 是使用 ECMAScript 6 编写的,然后通过 Babel Compiler 编译成 ECMAScript 5,使用 Browserify 打包。


flv.js 从服务器获取FLV再解封装后转给Video标签的原因如下:


  • 兼容目前的直播方案:目前大多数直播方案的音视频服务都是采用FLV容器格式传输音视频数据。
  • flv格式简单,相比于MP4格式转封装简单、性能上也占优势,解析起来更快更方便。

方案三:RTSP转RTMP到RTMP服务器,转hls,播放端用video.js播放

Video.js是一款web视频播放器,支持html5和flash两种播放方式。更有自定义皮肤,插件,组件,语言还有丰富的选项配置。

方案四:VLC或者SmartPlayer第三方插件播放

VLC不再多说,几乎做流媒体的开发者都知道,SmartPlayer是大牛直播SDK (Github) 的播放插件,延迟和功能体验更好。


插件形式的优点是无需二次转换,直接通过ActiveX控件的形式播放,延迟非常低,缺点是只支持IE浏览器。

20210215221545340.png

方案五:RTSP转WebRTC播放

浏览器对webrtc的支持良好,特别是在H264编码方面几个主流的浏览器都已经支持了。webrtc使用srtp进行媒体数据的传输,那么我们只需要将rtp中的负载数据通过webrtc通道发送给浏览器,而浏览器端只需要通过video标签播放即可,目前RTSP转WebRTC对浏览器的适配比较好,延迟也比较低。

相关文章
|
6月前
|
移动开发 小程序 API
微信外部浏览器或短信链接唤起微信小程序的解决方案
微信外部浏览器或短信链接唤起微信小程序的解决方案
1434 1
|
3月前
|
数据采集 Web App开发 测试技术
使用Selenium调试Edge浏览器的常见问题与解决方案
在互联网数据采集领域,Selenium常用于自动化网页爬取。针对使用Edge浏览器时遇到的启动远程调试失败、访问受限及代理IP设置等问题,本文提供了解决方案。通过特定命令启动Edge的远程调试模式,并利用Python脚本配合Selenium库,可实现代理IP、User-Agent的设定及Cookie管理等高级功能,有效提升爬虫稳定性和隐蔽性。遵循步骤配置后,即可顺畅执行自动化测试任务。
758 1
使用Selenium调试Edge浏览器的常见问题与解决方案
|
3月前
|
存储 API 网络架构
【Azure 存储服务】MP4视频放在Azure的Blob里面,用生成URL在浏览器中打开之后,视频可以正常播放却无法拖拽视频的进度
【Azure 存储服务】MP4视频放在Azure的Blob里面,用生成URL在浏览器中打开之后,视频可以正常播放却无法拖拽视频的进度
|
4月前
解除谷歌浏览器默认禁止音频自动播放
解除谷歌浏览器默认禁止音频自动播放
88 1
|
4月前
|
Web App开发 前端开发
canvas保存图片时,谷歌浏览器Chrome报错【解决方案】Not allowed to navigate top frame to data URL
canvas保存图片时,谷歌浏览器Chrome报错【解决方案】Not allowed to navigate top frame to data URL
133 0
|
6月前
浏览器兼容性解决方案
【5月更文挑战第4天】浏览器兼容性解决方案。
56 5
|
6月前
|
JavaScript IDE 测试技术
Rtsp转Flv在浏览器中播放
【2月更文挑战第5天】本文简单介绍如何间接实现在浏览器中播放rtsp的流,涉及技术点和工具较多,本文仅做功能实现思路的梳理和简单的代码实践,后续整理更深入的实现原理。
508 1
|
6月前
|
计算机视觉
关于人脸识别最近浏览器打不开摄像头的解决方案
关于人脸识别最近浏览器打不开摄像头的解决方案
|
缓存 前端开发 JavaScript
前端跨浏览器标签页数据共享解决方案
vue 项目中有一个工单消息通知列表页,每条消息有已读和未读状态,点击消息会用 window.open 打开一个新的浏览器标签页跳转到工单列表页,工单列表页里有项操作是查看消息,会弹窗显示出具体的详细内容,进入这个弹窗就代表用户已经看到消息了,此时会去调后端接口修改消息状态为已读
155 0
Edge浏览器崩溃解决方案
Edge浏览器崩溃解决方案
149 0