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>