浏览器播放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对浏览器的适配比较好,延迟也比较低。

相关文章
|
2月前
|
移动开发 小程序 API
微信外部浏览器或短信链接唤起微信小程序的解决方案
微信外部浏览器或短信链接唤起微信小程序的解决方案
151 1
|
2月前
|
计算机视觉
关于人脸识别最近浏览器打不开摄像头的解决方案
关于人脸识别最近浏览器打不开摄像头的解决方案
39 0
|
2月前
|
JavaScript IDE 测试技术
Rtsp转Flv在浏览器中播放
【2月更文挑战第5天】本文简单介绍如何间接实现在浏览器中播放rtsp的流,涉及技术点和工具较多,本文仅做功能实现思路的梳理和简单的代码实践,后续整理更深入的实现原理。
104 1
|
6月前
|
缓存 前端开发 JavaScript
前端跨浏览器标签页数据共享解决方案
vue 项目中有一个工单消息通知列表页,每条消息有已读和未读状态,点击消息会用 window.open 打开一个新的浏览器标签页跳转到工单列表页,工单列表页里有项操作是查看消息,会弹窗显示出具体的详细内容,进入这个弹窗就代表用户已经看到消息了,此时会去调后端接口修改消息状态为已读
82 0
|
6月前
Edge浏览器崩溃解决方案
Edge浏览器崩溃解决方案
83 0
|
7月前
|
编解码 Cloud Native 前端开发
H.265 视频在浏览器中的播放问题探究
H.265 视频在浏览器中的播放问题探究
106 0
|
7月前
|
Web App开发 安全 Shell
【异常解决】浏览器无法访问此网站ERR_UNSAFE_PORT/网页可能无法连接,或者它已永久性地移动到了新网址问题解决方案
【异常解决】浏览器无法访问此网站ERR_UNSAFE_PORT/网页可能无法连接,或者它已永久性地移动到了新网址问题解决方案
285 0
|
8月前
|
Web App开发 JavaScript 前端开发
SAP UI5 在 PC 端浏览器和移动设备使用摄像头进行条形码扫描的几种解决方案介绍
SAP UI5 在 PC 端浏览器和移动设备使用摄像头进行条形码扫描的几种解决方案介绍
66 0
|
8月前
|
编解码 网络协议 开发工具
IE浏览器下如何低延迟播放RTSP或RTMP流
首先,虽然本文是介绍IE浏览器下OCX控件播放RTSP或RTMP,但这种方式并不推荐,毕竟它只能用于IE浏览器环境下,局限太大,而且随着微软IE浏览器的更新,不确定后续支持情况。当然,话说回来,如果是在特定的使用场景下,只需要某些版本IE浏览器支持,但对延迟和稳定性要求非常高,OCX控件方式也不失为一个好的选择。
|
7月前
|
Web App开发 前端开发 JavaScript

热门文章

最新文章