微信小程序接入海康威視螢石雲直播


微信小程序接入海康威視螢石雲直播

微信小程序中播放海康螢石雲HLS '.m3u8'視頻 video標簽

因為項目需要在微信小程序上展示實時視頻流信息,以下內容是我將螢石雲平台官方文檔和自己實踐過程中遇到的問題的總結。官方文檔地址:https://open.ys7.com/doc/zh/book/index/live_proto.html

螢石雲開放平台

  1. 按照螢石攝像機官方攜帶的說明書進行注冊 ,圖中①和②都有HLS地址,①是官方給用戶試用的地址,②是自己添加的攝像頭地址。
    在這里插入圖片描述
  2. 以①為例,獲取螢石雲試用設備HLS地址 ,點擊播放測試,即可觀看當前HLS地址的視頻信息。
    在這里插入圖片描述

微信開發者工具

  1. 搭建好自己的微信小程序(我們使用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>
  1. 利用微信開發者工具分享二維碼,在真機上測試,模擬器不支持!!!
    在這里插入圖片描述

OK,大功告成!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM