溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹如何使用Html5 Stream開發實時監控系統，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
H5Stream
在網上搜索web直播/攝像頭直播等關鍵詞找到了H5Stream，這是一個可以基于Native H5 Video標簽實現直播的解決方案。當然它也支持其他的RTMP/HLS等。
發流服務通過RTSP地址從攝像頭采集視頻，在代碼中可以通過配置文件進行配置。
配置好攝像頭信息后，我們啟動發流服務h6ss.bat，開始進行client端的調試。
在www目錄下有一個demo.html，這是demo網頁，打開該文件可以知道如何連接發流服務。
在Vue項目中應用H5Stream的方法如下：
（1）在static目錄下新增這幾個js（adapter.js，h6splayer.js，h6splayerhelper.js，platform.js），這些在demo中有提供。
（2）在index.html中引用這些js
（3）在vue頁面調用API
createH5Video() {
let conf1 = {
videoid: 'divPlugin',
protocol: this.$store.state.config.H5_STREAM_SERVER_PROTOCOL,
host: this.$store.state.config.H5_STREAM_SERVER_HOST,
rootpath: '/',
token: 'token1',
hlsver: 'v1',
session: 'c1782caf-b670-42d8-ba90-2342340ee83'
}
this.v1 = H5sPlayerCreate(conf1)
this.v1.connect()
},
closeH5Video() {
if (this.v1) {
this.v1.disconnect()
this.v1 = null
$(".h6video").get(0).pause()
}
}運行代碼，可以實時地看到攝像頭畫面！（打了碼，哈哈）
以上是“如何使用Html5 Stream開發實時監控系統”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
