TQ-VDC 文档
简介
TQ-VDC 因使用网易云信的PC Agent 模式实现，因此需要注意以下几项：
- 电脑硬件要求
-
只支持 window 电脑
-
音视频通话PC Agent方案基于webgl技术进行视频渲染，请注意浏览器兼容性情况。
-
此外对于高画质大尺寸的视频渲染与传输，对计算机硬件要求比较高，请斟酌使用。
-
PC Agent插件非常消耗内存，尤其是传输高清视频，请保证计算机 内存至少8G以上，CPU 至少2.40GHz以上，否则当你开启多个应用程序时，容易引起浏览器崩溃
-
- 插件下载地址
-
-
若已安装插件，但检测插件时，未调用插件（多次出现此问题），可考虑重新安装插件。
-
使用
一、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 | 有多人会议时，自己拒绝邀请后的通知 | - |