如何使用Html5 Stream開發(fā)實(shí)時(shí)監(jiān)控系統(tǒng)

這篇文章主要介紹如何使用Html5 Stream開發(fā)實(shí)時(shí)監(jiān)控系統(tǒng)，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

H5Stream

在網(wǎng)上搜索web直播/攝像頭直播等關(guān)鍵詞找到了H5Stream，這是一個(gè)可以基于Native H5 Video標(biāo)簽實(shí)現(xiàn)直播的解決方案。當(dāng)然它也支持其他的RTMP/HLS等。

發(fā)流服務(wù)通過RTSP地址從攝像頭采集視頻，在代碼中可以通過配置文件進(jìn)行配置。

配置好攝像頭信息后，我們啟動(dòng)發(fā)流服務(wù)h6ss.bat，開始進(jìn)行client端的調(diào)試。

在www目錄下有一個(gè)demo.html，這是demo網(wǎng)頁，打開該文件可以知道如何連接發(fā)流服務(wù)。

在Vue項(xiàng)目中應(yīng)用H5Stream的方法如下：

（1）在static目錄下新增這幾個(gè)js（adapter.js，h6splayer.js，h6splayerhelper.js，platform.js），這些在demo中有提供。

（2）在index.html中引用這些js

（3）在vue頁面調(diào)用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()
    }
}

運(yùn)行代碼，可以實(shí)時(shí)地看到攝像頭畫面?。ù蛄舜a，哈哈）

以上是“如何使用Html5 Stream開發(fā)實(shí)時(shí)監(jiān)控系統(tǒng)”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！