微信小程序接入海康威視螢石雲直播
微信小程序中播放海康螢石雲HLS '.m3u8'視頻 video標簽
因為項目需要在微信小程序上展示實時視頻流信息,以下內容是我將螢石雲平台官方文檔和自己實踐過程中遇到的問題的總結。官方文檔地址:https://open.ys7.com/doc/zh/book/index/live_proto.html
螢石雲開放平台
- 按照螢石攝像機官方攜帶的說明書進行注冊 ,圖中①和②都有HLS地址,①是官方給用戶試用的地址,②是自己添加的攝像頭地址。
- 以①為例,獲取螢石雲試用設備HLS地址 ,點擊播放測試,即可觀看當前HLS地址的視頻信息。
微信開發者工具
- 搭建好自己的微信小程序(我們使用mpvue),原生也可以.
在mpvue中,采用vue語法嵌入video組件,並將HLS地址寫入src中。
<video direction="0" src="https://hls01open.ys7.com/openlive/d34ae15138ff4bfe8b1348f2e00fd8eb.m3u8" controls="true" objectFit="cover" autoplay :show-fullscreen-btn="false" :show-play-btn="false"> </video>
- 利用微信開發者工具分享二維碼,在真機上測試,模擬器不支持!!!
OK,大功告成!