LivePlayer播放器安装与使用

公司项目需要抛弃萤石云插件，因此视频播放要另寻出路，找来找去，找到了LiveGBS GB28181流媒体服务，研究了一下demo，因为要使用LivePlayer，所以想要在自己项目里使用，还得把LivePlayer装好，项目用的vue。

1、安装模块

npm install @liveqing/liveplayer

2、配置

在该文件中配置如下。

  externals: {
    'video.js': 'videojs',
    'flv.js': 'flvjs'
  },

plugins: [
    new CopyWebpackPlugin([
      { from: 'node_modules/@liveqing/liveplayer/dist/component/liveplayer-lib.min.js', to: 'js/'},
      { from: 'node_modules/@liveqing/liveplayer/dist/component/liveplayer.swf'}
    ])
  ]

index.html增加

<script src="js/liveplayer-lib.min.js"></script>

3、使用

<template>
  <div id="app">
    <LivePlayer ref="player" :videoUrl="videoUrl" :snapUrl="snapUrl" :live="live" muted :hasaudio="hasAudio"></LivePlayer>
    <div @mouseup="ptzStop()">
      <label><input name="Fruit" type="radio" value="" @click="ptzControl('up')"/>FLV</label>
      <label><input name="Fruit" type="radio" value="" @click="change('up')"/>RTMP</label>
    </div>
    <div @mouseup="ptzStop()">
      <button @mousedown="ptzControl('up')">上</button>
      <button @mousedown="ptzControl('down')">下</button>
      <button @mousedown="ptzControl('left')">左</button>
      <button @mousedown="ptzControl('right')">右</button>
      <button @mousedown="ptzControl('up')">上</button>
      <button @mousedown="ptzControl('right')">讲话</button>
      <button @mousedown="ptzControl('up')">放大</button>
      <button @mousedown="ptzControl('right')">缩小</button>
    </div>
  </div>
</template>

<script>

import LivePlayer from '@liveqing/liveplayer'
export default {
  name: 'HelloWorld',
  data () {
    return {
      hasAudio: '',
      videoUrl: '',
      protocol: '',
      videoTitle: '',
      snapUrl: '',
      serial: '',
      code: '',
      streamid: '',
      bRecording: '',
      streamInfo: {},
      msg: 'Welcome to Your Vue.js App',
      serial: '34020000001320000003',
      code: '34020000001320000001'
    }
  },
  props: {
    live: {
      type: Boolean,
      default: false
    }
  },
  components: {LivePlayer},
  mounted() {
    this.getSteram();
  },
  methods: {
    getSteram () {
      let params = {
        serial: this.serial,
        code: this.code
      }
      this.$http.get("/video/v1/stream/start", {
        params: params
      }).then(res => {
        let streamInfo = res.data || {};
        var videoUrl = this.isMobile() ? streamInfo.HLS : streamInfo.RTMP;

        var protocol = this.isMobile() ? "HLS" : "RTMP";
        if(this.flvSupported() && streamInfo.FLV) {
          videoUrl = streamInfo.FLV;
          protocol = "FLV";
        }
        this.hasAudio = streamInfo.AudioEnable && streamInfo.SourceAudioCodecName != "";
        this.videoUrl = videoUrl || "";
        this.protocol = protocol;
        this.videoTitle = 'title' || "";
        this.snapUrl = streamInfo.sn || "";
        this.serial = params.serial || "";
        this.code = params.code || "";
        this.streamid = streamInfo.StreamID || "";
        this.bRecording = streamInfo.RecordStartAt != ""
        this.streamInfo = streamInfo;
        }).catch(() => {
      })
    },

    /**
     * @name: 摄像头控制
     */
    ptzControl(type) {
      let params = {
        serial: this.serial,
        code: this.code,
        command: type
      }
      this.$http.get("/video/v1/control/ptz", {
        params: params
      }).then(res => {

      });
    },

    /**
     * @name: 停止
     */
    ptzStop() {
      let params = {
        serial: this.serial,
        code: this.code,
        command: 'stop'
      }
      this.$http.get("/video/v1/control/ptz", {
        params: params
      }).then(res => {

      });
    },

    /**
     * @name: 切换类型
     */
    ptzControl(type) {
      let params = {
        serial: this.serial,
        code: this.code,
        command: type
      }
      this.$http.get("/video/v1/control/ptz", {
        params: params
      }).then(res => {
        var protocol = this.isMobile() ? "HLS" : "RTMP";
        if(this.flvSupported() && streamInfo.FLV) {
          videoUrl = streamInfo.FLV;
          protocol = "FLV";
        }
        this.videoUrl = videoUrl || "";
      });
    },
  }
}
</script>