背景需求:
EasyNVR自身擁有獨立的客戶端體系,安卓和IOS擁有各自獨立的APP,
安卓下載地址:https://fir.im/EasyNVR;
IOS下載可直接在APPstore搜索EasyNVR即可;
對於應用最爲廣泛的web端,直接包含在EasyNVR軟件包的www目錄下;
對於EasyNVR的web端,使用的是vue+webpack進行打包壓縮的,不僅項目體積小,而且很友好的提升了瀏覽器的可讀性;
對於實際的應用過程中,EasyNVR自身的web頁面也是擁有自身的風格,因此和許多需要將視頻播放頁面集成到自身系統的用戶就不是很友好了。EasyNVR自身的播放頁面也是包含了,雲臺控制、視頻分享、掃碼直播等功能,然而部分客戶需要的僅僅只是一個播放頁面的集成。
這樣,即使是簡約的風格,也在用戶的集成中帶來了一定的麻煩。
解決方案:
有過閱讀EasyNVR軟件包使用文檔的用戶應該知道了這個解決方案;其實在這個播放頁面已經給出了答案;
就是通過iframe集成,在集成的過程中,通過對於參數的傳遞來 ,去除自身不需要的元素,最終集成到自身的頁面的就是一個單純的視頻播放器畫面;而且我們還可以通過傳遞參數來 設置播放器的長寬比和是否將視頻直播鋪滿全屏直播;
具體傳遞參數
iframe:是否以iframe形式嵌入,支持傳遞參數yes、no;
autoplay:是否開啓自動直播,支持傳遞參數yes、no;
stretch:是否開啓自動直播,支持傳遞參數yes、no;
aspect:播放器的比例,傳遞形式x:y,默認16:9
例: ip:port/play.html?channel=id&iframe=yes&aspect=4:3&autoplay=yes&stretch=yes
代碼實例及樣式展示:
測試集成播放頁樣式:
原始樣式:
簡單的集成應用:
<html>
<head>
<title>播放頁集成測試用</title>
</head>
<body>
<div>
<iframe src="http://192.168.1.202:10800/play.html?channel=1&iframe=yes&aspect=640x360" width="640" height="360" allowfullscreen></iframe>
</div>
</body>
</html>
關於EasyNVR
EasyNVR能夠通過簡單的網絡攝像機通道配置,將傳統監控行業裏面的高清網絡攝像機IP Camera、NVR等具有RTSP協議輸出的設備接入到EasyNVR,EasyNVR能夠將這些視頻源的音視頻數據進行拉取,轉換爲RTMP/HLS,進行全平臺終端H5直播(Web、Android、iOS),並且EasyNVR能夠將視頻源的直播數據對接到第三方CDN網絡,實現互聯網級別的直播分發;
點擊鏈接加入羣【EasyNVR解決方案】:383501345
Copyright © EasyDarwin Team 2012-2018