1.前言
由於開發需要，項目需要接入螢石的視頻監控。螢石官方提供了三種協議的的視頻方式，hls，rtmp，ezopen。三種協議是視頻直播有一定差別，由於hls有十多秒的延遲，不符合項目的要求，所以本人采用了延遲最低的ezopen。在使用的過程中遇到了很多很多的坑，即使在嘗試別人的解決方案依舊無用。希望這篇文章對使用的同學有所幫助。
2.初探
看看官方文檔，他有一個UIKit JavaScript的demo示例，請使用的同學先下載官方demo示例。同時看看官方文檔他是這么描述使用的：
官方示例demo是使用原生的書寫形式沒有使用框架，剛開始看到官方示例就照着他模仿寫一些，我把官方demo的ezuikit.js和它的js復制粘貼到我的項目當中。現在我的vue目錄是這樣的，其中static就是裝入了我復制的文件。static目錄和js目錄分別如下圖：
現在我的Vue代碼模仿着官方文檔書寫如下，為了讓大家看清楚整個.vue復制給了大家：
<style scoped lang="scss">
.media-container {
padding-top: 50px;
height: 100vh;
width: 100%;
div {
height: 200px;
width: 100%;
background-color: red;
}
}
</style>
<template>
<div class="media-container">
<div id="playWind"></div>
</div>
</template>
<script>
import '../../../../static/ezuikit.js'
export default {
data() {
return {
playerInstance: null
}
},
mounted() {
this.initPlayer()
},
methods: {
/**
* 初始化播放器實例
*/
initPlayer() {
this.playerInstance = new EZUIKit.EZUIPlayer({
id: 'playWind',
autoplay: true,
url: 'ezopen://open.ys7.com/序列號/1.hd.live',
accessToken: 'xxx',
decoderPath: '',
width: '400',
height: '300'
});
},
}
}
</script>
按照常理我們需要引入ezuikit.js文件，直接可以使用我代碼所寫的引入形式，引入之后就像官方示例一樣new一個實例。但是我們回到瀏覽器一看報錯了：
第一個錯誤是螢石下載的demo，ezuikit.js報錯。正常人可能很這么想，別人官方寫得東西怎么會報錯，完了是不是我的東西哪里寫錯了，趕緊上網找解決方案，典型面向百度編程。其實我一開始的反應也是這樣的，但是這樣很久都沒有解決。然后就靜下來，打開它的ezuikit源碼文件看看什么原因。好我們定位到這個報錯的地方。
175行，可能大家都發現為什么報錯了，i 沒有定義就使用了，肯定報錯呀。當然在你原生的時候語法要求並沒有這么嚴格，他是不會報錯的。這是官方js的書寫人員犯了一個小錯誤。那我就給他加一個let那就定義了，所以現在代碼改為（如下圖），回到瀏覽器打開看不會報錯了。
回到來看看第二個報錯。JSPlugin沒有定義，仔細觀看官方文檔的同學應該都發現了，其實這個JSPlugind對應就是下圖的decorderPath路徑，如果你的路徑寫錯了肯定是JSPlugin未定義，那這個路徑到底怎么書寫：
官方文檔說需要絕對路徑（這個絕對路徑意思是你部署到服務器上的時候，你在網站輸入的服務器部署這個文件路徑要在瀏覽器上找得到才算成功），其實我開始不是很明白，然后我們來嘗試看看它的源碼是怎么樣的，我們就知道如何書寫了，定位到瀏覽器報錯的地方：
我們可以看到報錯地方在1331行，但是我們看看1325行發現了他是怎么找到這個路徑的，就是使用我們的參數后面拼接/js/jsPlugin得到的。那現在就清楚這個路徑怎么書寫了。有的同學可能會直接把vue項目打包部署到服務器上，但是這樣依舊會JSPlugin is not defined。因為即使你在vue中引入了這個JSPlugin的js文件，但是經過打包之后，文件的名字就會發生變化。你打包的服務器上路徑依舊都是錯誤的。那解決辦法就是手動自己在Vue目錄的public下創建一個static目錄，然后把所有的資源都放在這個static下，為什么放在public目錄，原因在於Vue的打包的時候是不會解析這個publc目錄，他會把public目錄下的文件原封不動的輸出到你的dist中，這樣就不怕打包之后文件名稱或者路徑錯誤，當然如果不知道的話就build之后，在dist文件中創建這個目錄也可以。最后部署到服務器上就可以了。最后Vue打包目錄如下圖，static就是裝有官方的js：
點擊static：
js裝有：
最后配置這么寫：
最后部署到服務器上就可以正常使用了。
總結：
整個視頻的引用真的很多坑，有時有錯誤的時候要大膽看看別人的源碼怎么寫的，總比一直百度找解決方案好。