vue项目接入视频监控系列-------播放器的选择

    在智慧城市发展迅速的今天，视频监控接入web平台的需求似乎成了不可或缺和潮流。博主准备对自己开发视频监控项目的经历做个记录，整理成一个系列的文章。

    在前端发展迅速的今天，h5的出现让在web平台实现无插件播放似乎成了可能，但是video对于RTMP或者RTSP协议的视频流却无能为力，在这里向大家推荐一个播放器： LivePlayer，这是一家视频公司封装的一个播放器，可以免费使用：说明文档

（获取的播放地址为后端配置服务后调用接口获取的）

   使用：

    第一步： 安装：

       npm install @liveqing/liveplayer

       npm i -D copy-webpack-plugin

第二步：引入：

在webpack.dev.conf.js中引入和声明插件：

const CopyWebpackPlugin = require('copy-webpack-plugin')

在该文件夹下plugins中声明插件new CopyWebpackPlugin

plugins: [

new CopyWebpackPlugin([

   { from: 'node_modules/@liveqing/liveplayer/dist/component/crossdomain.xml'},

   { from: 'node_modules/@liveqing/liveplayer/dist/component/liveplayer.swf'},

   { from: 'node_modules/@liveqing/liveplayer/dist/component/liveplayer-lib.min.js', to: 'js/'}

])]

第三步：

在index.html中引入：<script type="text/javascript" src="./js/liveplayer-lib.min.js"></script>

路径中的js为上面输出的js地址

第四步：

引入使用组件：

<template>
  <div class="video">
    <el-button type="primary" size="mini" @click="getDeviceChanleData" icon="el-icon-search">选择通道</el-button>
    <el-button type="primary" size="mini" @click="doStart" icon="el-icon-search">开始直播</el-button>
    <live-player :videoUrl="videoUrl" fluent autoplay live stretch></live-player>
  </div>
</template>
<script>
import LivePlayer from '@liveqing/liveplayer'
import {
  getDeviceList,
  getDeviceChanleList,
  start
} from './apis/index.js'
export default {
  data() {
    return {
      id: '',
      videoUrl: ''
    }
  },
  components: {
    LivePlayer
  },
  created() {
    this.getDeviceData()
  },
  methods: {
    // 获取设备数据列表
    getDeviceData() {
      const para = {
        start: 1,
        limit: 10,
        online: true,
        q: ''
      }
      var par = {
        params: para
      }
      getDeviceList(par).then(res => {
        console.log('设备数据', res)
        this.id = res.DeviceList[0].ID
      })
    },
    // 查询设备通道列表
    getDeviceChanleData() {
      const para = {
        serial: this.id
      }
      var par = {
        params: para
      }
      getDeviceChanleList(par).then(res => {
        console.log('设备通道数据', res)
      })
    },
    // 开始直播
    doStart() {
      const para = {
        serial: this.id
      }
      var par = {
        params: para
      }
      start(par).then(res => {
        console.log('开始直播', res)
        this.videoUrl = res.RTMP
        // this.videoUrl = res.HLS
        // this.videoUrl = res.FLV
      })
    }
  }
}
</script>
<style scoped>
.video{
  position: relative;
  width:500px;
  height:300px;
}
img{
  width:100%;
  height:100%;
}
.time1{
  position: absolute;
  top:13px;
  right:150px;
}
</style>

效果图：