@nan07/tq-vdc NPM

TQ-VDC 文档

简介

TQ-VDC 因使用网易云信的PC Agent 模式实现，因此需要注意以下几项：

电脑硬件要求
- 只支持 window 电脑
- 音视频通话PC Agent方案基于webgl技术进行视频渲染，请注意浏览器兼容性情况。
- 此外对于高画质大尺寸的视频渲染与传输，对计算机硬件要求比较高，请斟酌使用。
- PC Agent插件非常消耗内存，尤其是传输高清视频，请保证计算机内存至少8G以上，CPU 至少2.40GHz以上，否则当你开启多个应用程序时，容易引起浏览器崩溃
插件下载地址
- https://yx-web-nosdn.netease.im/package/1582511072/WebAgent_Setup_V3.0.1.0.zip?download=WebAgent_Setup_V3.0.1.0.zip
- 若已安装插件，但检测插件时，未调用插件（多次出现此问题），可考虑重新安装插件。

使用

一、Vue 引入方式

1. 安装依赖

npm install @nan07/tq-vdc -S

2. 初始化

import TqVdc from '@nan07/tq-vdc'
import '@nan07/tq-vdc/dist/tq-vdc.css'
Vue.use(TqVdc)

3. 代码示例

<template>
  <tq-vdc
    v-model="vdcVisible"
    :data="data"
    :account="caller"
    :regionCode="regionCode"
    :action="action"
    :nodeHandler="nodeHandler"
    @startMeeting="startMeeting"
    @joinChannel="joinChannel"
    @closeMeeting="closeMeeting"
    @leaveChannel="leaveChannel"
    @acceptCalling="acceptCalling"
    @refuceCalling="refuceCalling" />
</template>
<script>
export default {
  data() {
    return {
      vdcVisible: false,
      action: '/app/registerAccidAndReturnToken',
      caller: '20411162',
      regionCode: '',
      data: [
        {
          accid: '20411162',
          name: '张三',
        },
        {
          accid: '20314342',
          name: '李四',
        },
      ],
    }
  },
  methods: {
    openVdc() {
      this.vdcVisible = true
    },
    startMeeting() {
      console.log('startMeeting')
    },
    closeMeeting() {
      console.log('closeMeeting')
    },
    joinChannel() {
      console.log('joinChannel')
    },
    leaveChannel() {
      console.log('leaveChannel')
    },
    acceptCalling() {
      console.log('acceptCalling')
    },
    refuceCalling() {
      console.log('refuceCalling')
    },
    nodeHandler(v) {
      const { accid, name, avatar, address, ...others } = v
      return { accid, name, avatar, address, others }
    },
  }
}
</script>

二、JQuery 引入方式

1. 引入依赖

<!-- import Vue.js -->
<script src="//vuejs.org/js/vue.min.js"></script>
<!-- import stylesheet -->
<link rel="stylesheet" href="//unpkg.com/view-design/dist/styles/iview.css">
<!-- import iView -->
<script src="//unpkg.com/view-design/dist/iview.min.js"></script>
<!-- 引入 vdc 样式及js代码 -->
<link rel="stylesheet" type="text/css" href="/resource/js/tq-vdc.css">
<script type="text/javascript" src="/resource/js/tq-vdc.umd.js"></script>

2. 代码示例

</head>
<body>
<div id="app">
    <i-button @click="openVdc">Click me!</i-button>
    <tq-vdc v-model="vdcVisible" :data="data" :account="caller" :regionCode="regionCode" 
        :action="action"
        :nodeHandler="nodeHandler"
        @startMeeting="startMeeting"
        @joinChannel="joinChannel"
        @closeMeeting="closeMeeting"
        @leaveChannel="leaveChannel"
        @acceptCalling="acceptCalling"
        @refuceCalling="refuceCalling"></tq-vdc>
</div>
<script>
  Vue.use(window.tqVdc)
    new Vue({
        el: '#app',
        data: {
          vdcVisible: false,
          action: 'http://192.168.110.49:8088/app/registerAccidAndReturnToken',
          caller: '20411162',
          regionCode: '',
          data: [
            {
              accid: '20411162',
              name: '张三',
            },
            {
              accid: '20314342',
              name: '李四',
            },
          ]
        },
        methods: {
          openVdc() {
            this.vdcVisible = true
          },
          startMeeting() {
            console.log('startMeeting')
          },
          closeMeeting() {
            console.log('closeMeeting')
          },
          joinChannel() {
            console.log('joinChannel')
          },
          leaveChannel() {
            console.log('leaveChannel')
          },
          acceptCalling() {
            console.log('acceptCalling')
          },
          refuceCalling() {
            console.log('refuceCalling')
          },
          nodeHandler(v) {
            const { accid, name, avatar, address, ...others } = v
            return { accid, name, avatar, address, others }
          },
        }
    })
  </script>
</body>

API

属性	说明	类型	默认值
value	是否展示该组件	Boolean	false
data	数据源	Array	[]
title	标题	String	视频通话
account	用户ID	String	-
regionCode	组织结构ID	String	-
action	请求 appkey 路径	String	/app/registerAccidAndReturnToken (代理测试IP: http://192.168.110.49:8088)
nodeHandler	数据结构处理函数, 格式见`代码案例`	Function	-

Methods

方法名	说明	返回值
startMeeting	自己加入房间时的通知	-
closeMeeting	自己离开房间时的通知	-
joinChannel	加入多人房间后，有新用户加入房间时的通知	object(用户信息)
leaveChannel	加入多人房间后，有用户离开房间时的通知	object(用户信息)
acceptCalling	有多人会议时，自己接受邀请后的通知	-
refuceCalling	有多人会议时，自己拒绝邀请后的通知	-