wwav_url_player_test

wcs-wwav-talk

🚀 wcs 视频对讲组件 🌈.

安装

npm i @vanwei-wcs/wwav_url_player

使用

// main.js
import WWAVUrlVideoPlayer from ' @vanwei-wcs/wwav_url_player'
Vue.use(WWAVUrlVideoPlayer)

  <WWAVUrlVideoPlayer
    ref="Player"
    :default-video-quality="defaultVideoQuality"
    :default-enable-p-t-z="false"
    :player-options="options"
    :send-message="sendMessage"
    @changeQuality="changeQuality"
  />

组件api

属性 Attributes

组件的props

参数	说明	类型	可选值	默认值
player-options	参数	string	-	-
default-video-quality	默认视频品质	Number	0-高清,1-标准,2-流畅	1
send-message	websocket请求	Function	-
default-enable-p-t-z	默认展示云台控制	Boolean	true / false	false

player-options

属性	说明	类型	可选值	默认值
mode	播放模式	string	both、video、audio	video
flushingTime	buffer缓冲区刷新毫秒间隔	number	-	500
maxDelay	最大毫秒延迟	number	-	500
debug	是否开启 h264 播放器的debug模式	boolean	-	false

// 示例
options: {
  baseLibPath: '/static/javascript/h265/',
  debug: false
},

关于player-options详细配置请点击这里查看

send-message

// 示例
sendMessage(message, ctx) {
      if (this.$WCS_WS) {
        this.$WCS_WS_send(message, ctx)
        return true
      }
    }

方法 Methods emit

事件名	说明	参数
changeQuality	视频质量改变回调	0-高清,1-标准,2-流畅

// 示例
// 改变视频质量
    changeQuality (quality) {
      // 1. 关闭连接
      this.close()
      // 2. 改变质量参数
      this.defaultVideoQuality = quality
      // 3. 重新获取地址
      this.getUri()
      // 4. 打开播放器
    },

方法 Methods

事件名	说明	传递参数
openVideo	打开视频	url,token,devicePath
closeVideo	关闭视频	-
fullscreen	全屏	-

参考

<script>
export default {
  components: {
    WCSWWAVPlayer: () => import('@/components/WCS_Components/wwav-url-player')
  },
  data() {
    return {
      uri: '',
      token: '',
      defaultVideoQuality: 0,
      device_path: '/dist_24/link_1/b2abd67d-2925-3b16-81be-6a37d7211985/0',
      options: {
        baseLibPath: '/static/javascript/h265/',
        debug: false
      },
      stream_id: ''
    }
  },
  watch: {
    token () {
      this.open()
    }
  },
  methods: {
    open() {
      if (this.uri && this.token) {
        this.$refs.Player.openVideo(
          {
            url: this.uri,
            token: this.token,
            devicePath: this.device_path
          }
        )
      } else {
        this.$message.error('请正确填写地址')
      }
    },
    close() {
      this.$refs.Player.closeVideo()
    },
    // 获取 url token
    getUri() {
      const message = {
        'namespace': 'WCS/MMS',
        'request': 'open.video.websocket_wwav',
        'msg_id': 0,
        'content': {
          'device_path': this.device_path,
          'params': {
            'video_quality': this.defaultVideoQuality
          }
        }
      }
      this.$WCS_WS_send(message, { cb: this.getVideoURLCB })
    },
    getVideoURLCB(res) {
      if (res.reply === 200) {
        this.uri = res.content.url.replace('ws://192.168.1.210', 'ws://219.135.170.101')
        this.token = res.content.token
        this.stream_id = res.content.stream_id
      }
    },
    // 发送api请求
    sendMessage(message, ctx) {
      if (this.$WCS_WS) {
        this.$WCS_WS_send(message, ctx)
        return true
      }
    },
    // 改变视频质量
    changeQuality (quality) {
      // 1. 关闭连接
      this.close()
      // 2. 改变质量参数
      this.defaultVideoQuality = quality
      // 3. 重新获取地址
      this.getUri()
      // 4. 打开播放器
    },
    // 双击全屏
    dblClickScreen () {
      this.$refs.Player.fullscreen()
    }
  }
}
</script>