萤石云rtmp格式直播流在H5端App开发的踩坑经历
背景
之前在开发公司项目的时候,有一个需求是要开发实时的监控直播用于监控医院和水质站点的情况,视频直播使用的是rtmp直播流协议结合一个网页播放插件SewisePlayer,该协议支持实时监控播放,然后在这个基础上结合公司项目业务需求进行二次开发。
一开始的回放一直在PC端做web应用,并且在PC端浏览器视频回放没有任何问题,都是顺风顺水,后来有一个需求是要在app端同时也开发一个可以观看监控的功能。因为我们的app都是安卓外壳内嵌h5页面,基本上之前的做法都是按照原有的接口,对界面进行适配移动端就可以了,反正移动端PC端最终使用的都是H5。所以带着这个思路就开始做这个移动端视频直播流的功能,使用的插件什么的都没变化。等把接口之类的开发完毕,界面适配完毕,对接接口的时候,却发现在进行移动端进行调试的时候,直播死活播放不出来。一直报这个错误。
Failed to load resource: net::ERR_UNKNOWN_URL_SCHEME
Uncaught (in promise) DOMException: Failed to load because no supported source was found.
过程
就开始很奇怪,为什么在pc端浏览器都没这个问题,正常的一匹,看这个报错的意思是未知的范围,不支持这种源之类的问题。然后带着报错去百度查,有说移动端浏览器只支持http、https的,还有说插件问题的,然后花了大量的时间去找解决方案解决这个问题,甚至还换了很多播放插件,均没有解决。最后无奈去直播流提供方,萤石云官网的开发文档找找有没有什么替代方案。在搜寻过程中发现了这个表格才惊醒!
跨平台比较
协议\对比 | 移动端 | 桌面端 | Html5 | Web | 综合评分 |
---|---|---|---|---|---|
EZOPEN | 支持 | 支持 | X | 支持 | ★★★★ |
HLS | 支持 | 支持 | 支持 | 支持 | ★★★★★ |
RTMP | X | 支持 | X | 支持 | ★★ |
注意:
RTMP移动端仅Android系统支持
扩展性比较
协议\对比 | 二次开发 | 三方CDN集成 | 三方视频云集成 | 综合评分 |
---|---|---|---|---|
EZOPEN | 支持 | X | X | ★★ |
HLS | 支持 | X | 支持 | ★★★ |
RTMP | 支持 | 支持 | 支持 | ★★★★ |
原来RTMP根本就不支持H5播放,然后去搜了一下RTMP的有关知识
RTMP协议简介
RTMP(Real Time Messaging Protocol)实时消息传送协议,是Adobe Systems公司为Flash播放器和服务器之间音频、视频和数据传输开发的开放协议。萤石支持以rtmp链接的形式播放设备的实时视频。
兼容性
标准流并不能在所有系统或者移动设备上使用,系统支持情况如下:
协议\系统 | iOS | Android | IE | Safari | Firefox |
---|---|---|---|---|---|
HLS | 支持 | 支持 | 支持 | 支持 | 支持 |
RTMP | X | 支持 | 支持 | 支持 | 支持 |
注意:
RTMP依赖Flash Player
解决方案
看到这里就明了了,RTMP只能在Flash播放。之前一直都是被一个思维固化所限制,都是H5播放,为什么pc可以,切换成移动端视图就不行了呢。现在我个人猜测是,由于pc端浏览器更为强大,当识别到是RTMP协议的时候,就会自动调用Flash进行播放,而在App端嵌入的浏览器则没有这么强大的功能,因此会报错导致无法播放。既然H5端不能直接播放,所以想在移动端的直接通过H5播放rtmp格式的直播流是无解的,那么最后的解决方案就是,通过和公司安卓开发协调,调用Andriod原生的播放器,传入视频地址进行播放,因为安卓的原生是支持Flash的。
1.当出现问题时不要被表象限制,打破自己的固有思维反而是解决问题的途径。
2.找到问题的根本原因,不要浮在表面
3.尽量去官方文档找答案