前端視訊監控和回放方案
採用方案:
1、採用了螢石雲(屬於海康威視旗下的雲服務)視訊方案。
2、支援第三方、海康部分及螢石雲攝像頭接入。
3、螢石雲接入登入入口:登入-使用者認證中心 (ys7.com)。
繫結流程:
1、註冊並登入螢石雲平臺。
2、在【我的賬號 -> 應用資訊】填寫相關應用資訊得到應用祕鑰:AppKey、Secret、AccessToken 重要資訊需妥善保管。
3、其中可通過AppKey + Secret 可獲取到AccessToken,獲取方式參見:獲取Access Token · 螢石開放平臺API文件 (ys7.com) ,其中AccessToken為7天有效期,不可頻繁獲取,可採用相關儲存方案進行儲存。
4、在【我的資源 -> 裝置列表】接入裝置,其中海康部分或螢石雲攝像頭,可點選 **螢石協議接入 **按鈕,填寫 裝置序列號 及 裝置驗證碼 即可接入,第三方接入則需要選擇符合國際協議的裝置進行接入,接入之後視訊裝置詳情列表中會出現一條裝置資訊,並注意該裝置是否是線上狀態,如果不是線上狀態則無法連線。
5、接下來即可編寫前端程式碼進行接入。
程式碼實現:
1、採用了 ezuikit-js 進行視訊接入,其相關文件地址:UIKit Javascript · 螢石開放平臺API文件 (ys7.com)
2、視訊直播及回放相關案例展示:https://open.ys7.com/console/ezuikit/template.html
3、程式碼二次封裝元件案例(實現直播和回放):
4、呼叫示例: <VideoEzuikit accessToken="需要獲取到的AccessToken" deviceName="G53164888" controller={false} autoplay={false} audioplay={false} width={400} height={200} />
5、按正常步驟都無法獲取視訊資訊,那麼則檢查視訊是否處於加密狀態,如果屬於加密狀態,那麼視訊則無法播放,必須解密才能進行視訊播放,解密方案參見文件:提示“視訊已加密”怎麼辦? - 螢石服務中心 - 螢石官網 - EZVIZ
注意事項:
1、其中在使用的時候,元件解除安裝並不會暫停或解除安裝視訊,反而還會佔用很高的記憶體,所以需要在頁面離開的時候把視訊暫停(注意:暫停的視訊不能再次暫停否則會報錯,這個屬於video-ezuikit的bug,需要自行進行處理)。
2、這裡解決這個bug採用的方式是:在視訊元件中賦值了 window._ezuikit_list 相關陣列變數進行儲存,記錄每個video-ezuikit元件中的視訊物件,並記錄了該物件是否是暫停還是播放狀態,那麼在切換頁面的時候需先進行對 window._ezuikit_list 陣列進行遍歷查詢是否有在播放的視訊,有的話則需要呼叫 .stop() 方法進行暫停(這裡採用了setTimeout稍微進行延時處理,先把視訊進行暫停),再跳轉到其它頁面方案進行解決(當然有更好的方案也可以告知我進行改進)。
3、接入多個視訊流注意事項,參見ezuikit-js文件: