项目概述

用电脑去控制闸门的开关，然后能在摄像头看见闸门的动态，这里面就需要接入摄像头，进入直播流，随时看见闸门的动态，当然是单独控制各自的闸门，摄像头，都是一一对应起来的。

那么这里面我们就需要跟后台接入摄像头，其实就是一个URL，然后我们在前端实现播放。

今天呢，我们就来说说怎么接入这个摄像头，又是怎么应用Vue的这个播放组件——vue-video-player

完成过程

完成这个监控屏大概需要这么几个步骤：

页面制作
设备的联调
接口数据接入及测试

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入口文件中引入

import VideoPlayer from 'vue-video-player'
require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')
Vue.use(VideoPlayer)

3、在页面中引用

<video-player  class="video-player vjs-custom-skin"ref="videoPlayer" 
  :playsinline="true" 
  :options="playerOptions"
></video-player>

4、配置数据

playerOptions: {
  playbackRates: [1.0, 2.0, 3.0], //播放速度
  autoplay: true, //如果true,浏览器准备好时开始回放。
  muted: false, // 默认情况下将会消除任何音频。
  loop: false, // 导致视频一结束就重新开始。
  preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。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  //全屏按钮
        }
   },

这样一来就可以把摄像头接入进来，

//动态设置改变视频地址
this.playerOptions.sources[0].src = url

这里面注意的是如果要支持Google的flash播放插件，需要引入VideoJS.swf，在这就费了很大的劲，查了很多的文档，问题出在如果引入的VideoJS.swf文件不对，就会导致下面的现象。

videojs播放rtmp视频流时，画面很小（非播放器小），当时我引入的是video-js.swf，后来我下载了VideoJS.swf，就好了。（大家可以借鉴，太头疼了！）

Vue 引入萤石云摄像头——vue-video-player videojs播放rtmp视频流

这样一来就可以完成一个完美的vue-video-player视频播放流。如上图一所示。

此外就是闸门的动态效果了，点击开启，关闭，暂停的效果，我是用CSS3写的，可以看一下：

div
{animation-play-state:paused;
-webkit-animation-play-state:paused; /* Safari 和 Chrome */ 
}

Vue 引入萤石云摄像头——vue-video-player

闸门开关效果

总结

Vue的vue-video-player还是很好用的，就是一些大坑很让人头疼，子父组件之间的通信也很头痛，写的时候一定要仔细，一旦入坑就会耗费很长时间。还有就是一般的视频流播放地址有很多，例如：ezopen、rtmp、http等，我们一般选择rtmp的，配置简单，接入简单，视频流畅。