vap-sdk开发说明

一、版本说明

功能描述：该版本支持vzflv的硬解和软件方式播放本地及远程视频

兼容性：支持pc端浏览器Chrome、Edge

安装vap-sdk

// 使用 npm 安装
$ npm install vap-sdk
// 使用 yarn 安装
$ yarn add vap-sdk

示例

参数说明

| 参数 | 描述 | 是否必传 | 类型 | | ---------------- | ---------------------------------------------------------------------- | -------- | ------ | | accessKey.id | 用户创建的AccessKey ID | 是 | string | | accessKey.secret | 用户创建的AccessKey Secret | 是 | string | | endpoint | 臻云极致地址，默认地址为：https://open.vzicloud.com | 否 | string | | sn | 设备sn编码，有ip则播放本地视频，没有ip有sn则播放远程视频 | 是 | string | | type | 视频格式（vzflv） | 是 | string | | dom | 播放容器，dom元素的id | 是 | string | | ip | 设备ip，有ip则播放本地视频，没有ip有sn则播放远程视频 | 是 | string | | decodeType | 解码方式（auto、soft）单个视频推荐soft软解，多个视频推荐auto硬解，默认：auto | 是 | string |

引入vap-sdk

import vapjs from 'vap-sdk'

初始化

let config = {
	accessKey: {
		id: 'AccessKey  ID',
		secret: 'AccessKey  Secret'
	},
	endpoint: 'https://open.vzicloud.com'
}

vapjs.init(config)

播放/停止

// 创建播放实例
let player = vapjs.createPlayer({
	type: 'vzflv',
	sn: 'sn',
	dom: 'video'
})
// 播放
player.start()
// 停止
player.stop()

代码示例

<template>
  <div>
    <div id='video'></div>
    <button @click="handleClickStart">start</button>
    <button @click="handleClickStop">stop</button>
  </div>
</template>
<script>
import vapjs from 'vap-sdk'
export default {
  name: 'video',
  data () {
    return {
      player: ''
    }
  },
  mounted () {
    let config = {
      accessKey: {
        id: 'AccessKey ID',
        secret: 'AccessKey Secret'
      },
      endpoint: 'https://open.vzicloud.com'
    }
    vapjs.init(config)
    this.player = vapjs.createPlayer({
      type: 'vzflv',
      sn: 'sn',
      dom: 'video'
    })
    //页面销毁时请务必调用stop停止播放
    this.$once('hook:beforeDestroy', () => {
      if (this.player) {
        this.player.stop()
      }
    })
  },
  methods: {
    handleClickStart () {
      // 开始播放
      this.player.start()
    },
    handleClickStop () {
      // 停止播放
      this.player.stop()
    }
  }
}
</script>