最近在完成一個項目，需要把攝像頭設備接入到我們的項目裡面，然後在控制設備的同時，能在攝像頭裡面看到設備的狀態。如圖：
監控屏（1）
項目概述
用電腦去控制閘門的開關，然後能在攝像頭看見閘門的動態，這裡面就需要接入攝像頭，進入直播流，隨時看見閘門的動態，當然是單獨控制各自的閘門，攝像頭，都是一一對應起來的。
那麼這裡面我們就需要跟後臺接入攝像頭，其實就是一個URL，然後我們在前端實現播放。
今天呢，我們就來說說怎麼接入這個攝像頭，又是怎麼應用Vue的這個播放組件——vue-video-player
完成過程
完成這個監控屏大概需要這麼幾個步驟：
- 頁面製作
- 設備的聯調
- 接口數據接入及測試
監控屏（3）
①頁面的製作
這就不用多說了，都是Vue頁面，大概分為三個頁面（index，left，right），首頁就是最底層的地圖了，上面也是渲染了閘門的點位，具體在那個地方安裝了閘門，左側就是這些閘門的列表和一些閘門的詳情，中間就是對應閘門的視頻了，右側就是控制閘門的頁面。
就是一個父組件加兩個子組件，然後實現通信，點擊左側閘門，然後給父組件，子組件傳參，顯示不同的信息。
②設備的聯調
在這就需要把設備返回的數據接入到後臺，實現用代碼去控制閘門，各個閘門返回數據的時候都有相應的文檔，根據文檔說明就可以把閘門返回的數據接入進來。當時跟廠家聯調的時候也是相當費勁的，不過最後還是實現了。
③接口數據接入及測試
這裡面更多的是後端把閘門的數據給你返回過來，然後前端進行渲染，包括攝像頭播放的URL以及閘門控制的接口。在這我們就詳細的說明一下怎麼去根據URL去播放攝像頭
攝像頭的播放
這裡我們用了Vue的播放組件vue-video-player，下面詳細說明一下組件的使用以及入坑：
1、安裝：npm install vue-video-player --save
2、在main.js入口文件中引入
<code>import VideoPlayer from 'vue-video-player'
require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')
Vue.use(VideoPlayer)/<code>3、在頁面中引用
<code>/<code>
4、配置數據
<code>playerOptions: {
playbackRates: [1.0, 2.0, 3.0], //播放速度
autoplay: true, //如果true,瀏覽器準備好時開始回放。
muted: false, // 默認情況下將會消除任何音頻。
loop: false, // 導致視頻一結束就重新開始。
preload: 'auto', // 建議瀏覽器在加載元素後是否應該開始下載視頻數據。auto瀏覽器選擇最佳行為,立即開始加載視頻（如果瀏覽器支持）
language: 'zh-CN',
aspectRatio: '16:9', // 將播放器置於流暢模式，並在計算播放器的動態大小時使用該值。值應該代表一個比例 - 用冒號分隔的兩個數字（例如"16:9"或"4:3"）
fluid: true, // 當true時，Video.js player將擁有流體大小。換句話說，它將按比例縮放以適應其容器。
techOrder: ['flash', 'html5'], // 兼容順序
flash: {
hls: { withCredentials: false },
swf: 'static/VideoJS.swf' // 引入靜態文件swf
},
html5: { hls: { withCredentials: false } },
sources: [{ // 流配置，數組形式，會根據兼容順序自動切換
type: 'rtmp/hls',
src: ''
}],
poster: "", //你的封面地址
width: '',
notSupportedMessage: '此視頻暫無法播放，請稍後再試', //允許覆蓋Video.js無法播放媒體源時顯示的默認信息。
controlBar: {
timeDivider: true,
durationDisplay: true,
remainingTimeDisplay: false,
fullscreenToggle: true //全屏按鈕
}
},/<code> 這樣一來就可以把攝像頭接入進來，
<code>//動態設置改變視頻地址 this.playerOptions.sources[0].src = url /<code>
這裡面注意的是如果要支持Google的flash播放插件，需要引入VideoJS.swf，在這就費了很大的勁，查了很多的文檔，問題出在如果引入的VideoJS.swf文件不對，就會導致下面的現象。
videojs播放rtmp視頻流時，畫面很小（非播放器小），當時我引入的是video-js.swf，後來我下載了VideoJS.swf，就好了。（大家可以借鑑，太頭疼了！）
videojs播放rtmp視頻流
這樣一來就可以完成一個完美的vue-video-player視頻播放流。如上圖一所示。
此外就是閘門的動態效果了，點擊開啟，關閉，暫停的效果，我是用CSS3寫的，可以看一下：
<code>div
{animation-play-state:paused;
-webkit-animation-play-state:paused; /* Safari 和 Chrome */
}/<code>
閘門開關效果
總結
Vue的
vue-video-player還是很好用的，就是一些大坑很讓人頭疼，子父組件之間的通信也很頭痛，寫的時候一定要仔細，一旦入坑就會耗費很長時間。還有就是一般的視頻流播放地址有很多，例如：ezopen、rtmp、http等，我們一般選擇rtmp的，配置簡單，接入簡單，視頻流暢。
