前言
想必各位作為開發(fā)者的程序員,有時候公司會給你安排在項目中實現(xiàn)視頻實時監(jiān)控
視頻實時監(jiān)控功能,在很多領(lǐng)域都廣泛應(yīng)用,能幫我們在各行各業(yè)都解決很多事情,像智慧工地中AI識別（安全帽、在離崗等）、國標(biāo)級聯(lián)（平臺對接政府平臺監(jiān)管中心）、音視頻通話（工地巡檢）等便于施工過程監(jiān)管、施工進(jìn)度把控、遠(yuǎn)程協(xié)同作業(yè)等各環(huán)節(jié)的平臺能力,等等一系列的應(yīng)用領(lǐng)域
這里我們來講一下用瑩石云開方平臺的第三方插件怎么快速,方便,高效的在vue中接入視頻實時監(jiān)控功能
一、瑩石云開放平臺是什么？
瑩石云開放平臺簡單來說就是把攝像頭硬件接入到軟件中的第三方平臺,官網(wǎng)為:open.ys7.com 瑩石云依賴的第三方插件為
ezuikit-js //建議使用版本為0.7.2
如何在vue項目中去安裝呢
npm install ezuikit-js@0.7.2
cnpm install ezuikit-js@0.7.2
安裝完成以后 單獨在vue項目中創(chuàng)建一個名為
前言
想必各位作為開發(fā)者的程序員,有時候公司會給你安排在項目中實現(xiàn)視頻實時監(jiān)控
視頻實時監(jiān)控功能,在很多領(lǐng)域都廣泛應(yīng)用,能幫我們在各行各業(yè)都解決很多事情,像智慧工地中AI識別（安全帽、在離崗等）、國標(biāo)級聯(lián)（平臺對接政府平臺監(jiān)管中心）、音視頻通話（工地巡檢）等便于施工過程監(jiān)管、施工進(jìn)度把控、遠(yuǎn)程協(xié)同作業(yè)等各環(huán)節(jié)的平臺能力,等等一系列的應(yīng)用領(lǐng)域
這里我們來講一下用瑩石云開方平臺的第三方插件怎么快速,方便,高效的在vue中接入視頻實時監(jiān)控功能
一、瑩石云開放平臺是什么？
瑩石云開放平臺簡單來說就是把攝像頭硬件接入到軟件中的第三方平臺,官網(wǎng)為:open.ys7.com 瑩石云依賴的第三方插件為
ezuikit-js //建議使用版本為0.7.2
如何在vue項目中去安裝呢
npm install ezuikit-js@0.7.2
cnpm install ezuikit-js@0.7.2
安裝完成以后 單獨在vue項目中創(chuàng)建一個名為EZUIKitJs.vue的組件,
//EZUIKitJs.vue的組件,
//結(jié)構(gòu)部分
<template>
<div class="hello-ezuikit-js">
<div id="video-container"
style="width: 920px; height: 400px"></div>
</div>
</template>
//功能代碼
<script>
import EZUIKit from 'ezuikit-js' //引入第三方插件
export default {
name: 'EZUIKitJs',
data() {
return {
player: null,
}
},
mounted() {
console.log('mounted 組件掛載完畢狀態(tài)=======》.')
let accessToken = 'ezopen://open.ys7.com/K98465602/1.hd.live'
let accessUrl = 'at.divbz5775o6e5hvi6pu7ca2k8zwhqp7y-9693moz9ua-1rus2dr-gik15mzz8'
this.player = new EZUIKit.EZUIKitPlayer({
id: 'video-container', // 視頻容器ID
accessToken: accessToken,
url: accessUrl,
// simple - 極簡版; pcLive-pc直播；pcRec-pc回放； mobileLive-移動端直播；mobileRec-移動端回放;security - 安防版;voice-語音版;
template: '6ab9d0384ff5459cbe86adff53eac251', //模板
plugin: ['talk'], // 加載插件，talk-對講
width: 920,
height: 400,
})
},
},
}
</script>
那么問題來了,我們開發(fā)者怎么去獲取代碼中的accessToken,accessUrl中的參數(shù)呢,
我們接下來去注冊瑩石云開放平臺的開發(fā)者,
跟著我一起來吧
二、如何注冊瑩石云開放平臺
代碼如下（示例）：https://open.ys7.com/
1 打開網(wǎng)站后我們點擊注冊
2.根據(jù)注冊流程注冊完成
3.注冊完成以后我們登錄成功,點擊控制臺
4.在控制臺左側(cè)導(dǎo)航欄中找到設(shè)備管理菜單并點擊
5.瑩石協(xié)議接入并輸入攝像頭設(shè)備序列號
6.添加成功后點擊監(jiān)控地址,拿設(shè)備的token和url
7.拿去url 和token 到項目中去
8.如何選取api的模塊功能的模板
9.模塊的使用,把模塊拿到項目中使用就行了
- List item
三.遇到的一些坑
3.1 攝像頭視頻被加密的問題
1.打開首先打開瑩石云開放平臺官網(wǎng),
2.點擊控制臺,
在控制臺點擊左側(cè)菜單云接入,然后點擊視頻監(jiān)控平臺
3.在視頻監(jiān)控平臺頁面
點擊左側(cè)導(dǎo)航欄的設(shè)備管理,我這里步驟是解密完成的,
沒有解決的視頻這里會有一個解密按鈕點擊就完成了,
3.2 打包部署線上,網(wǎng)頁白屏問題
這個是坑是我在做這個項目遇到最大的一個坑
不知道是不是框架打包路徑的問題,
解決方法:
1.在EZUIKitJs.vue組件中刪除
import EZUIK from ’ezuikit-js‘ 引入
2. 在官網(wǎng)上插件js文件下載到本地
3. 放到public/static目錄下
4.然后在public/index.html
5.引入這個/ezuikit.js文件
文章來源：http://www.zghlxwxcb.cn/news/detail-465654.html
總結(jié)
以上就是今天要講的內(nèi)容，本文僅僅簡單介紹了vue項目中如何接入視頻監(jiān)控，怎么去使用瑩石云開放平臺,以及接入監(jiān)控視頻的時候遇到的一些坑,多分享給大家了,不懂的可以在文章下方留言,共同討論文章來源地址http://www.zghlxwxcb.cn/news/detail-465654.html
到了這里，關(guān)于vue2項目中如何接入視頻監(jiān)控的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
