背景
之前在開發公司項目的時候,有一個需求是要開發實時的監控直播用於監控醫院和水質站點的情況,視頻直播使用的是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.盡量去官方文檔找答案