1.0.8 • Published 4 years ago
yl-jcinvcc
使用说明
引入依赖
将node_modules/yl-jcinvcc/libs/* 文件夹下的文件拷贝到public文件夹并通过script标签引入
<script src="<%= context.config.publicPath +'libs/socket.io.js'%>"></script>
<script src="<%= context.config.publicPath +'libs/jssip.min.js'%>"></script>
<script src="<%= context.config.publicPath +'libs/jcinvccbar-pure.min.js'%>"></script>
创建对象
import Jcinvcc,{ JcinvccInstance } from 'yl-jcinvcc';//引入js
import 'yl-jcinvcc/dist/es/style/index.css';//引入样式文件
const { makeCall, makeCallVideo } = JcinvccInstance
<Jcinvcc jcinvccState={jcinvccState} tenantId={tenantId} userList={[]}/>
属性 props
| 描述 | 类型 | 默认值 | 描述 |
|---|
| jcinvccState | Boolean | true | 是否显示拨号控制台 |
| userList | {id, label, value, avatar, orgname} | [] | id:唯一标识, label:中文名, value:电话号码, avatar:头像, orgname:结构名称 |
| rouletteRender | (Store) => ReactNode | - | 自定义操作盘 |
| makeCallRender | (Store) => ReactNode | - | 自定义拨号盘 |
| mailListRender | (Store) => ReactNode | - | 自定义通讯录 |
| configUrl | string | - | 自定义配置获取接口 |
| getAccountUrl | string | - | 自定义账号获取接口 |
| returnAccountUrl | string | - | 自定义账号释放接口 |
JcinvccInstance 实例对象接口
| 描述 | 类型 | 描述 |
|---|
| makeCall | (phone:String) => void | 拨打电话 |
| makeCallVideo | (phone:String) => void | 拨打视频电话 |
| disconnect | () => void | 挂断电话 |
| mute | (0/1) => void | 静音 |
| snapShot | () => void | 截取对面视频图像 |
| connect | (phone:String) => void | 邀请第三方加入聊天 |
| updateMedia | () => void | 切换拨打电话类型(语音/视频) |
| switchVideoSource | () => void | 桌面分享 |
| setRouletteVisible | (Boolean) => void | 设置操作盘显隐 |
| setMakeCallModalVisible | (Boolean) => void | 设置拨号盘显隐 |
| setMailListModalVisible | (Boolean) => void | 设置通信录显隐 |
自定义组件
import { inject, observer } from "mobx-react";
import Jcinvcc,{ JcinvccInstance } from 'yl-jcinvcc';//引入js
import 'yl-jcinvcc/dist/es/style/index.css';//引入样式文件
const rouletteRender = (Store) => {
const { isCalled } = Store;
return <div>{isCalled}</div>;
}
<Jcinvcc rouletteRender={rouletteRender}/>
Store 属性
| 描述 | 类型 | 默认值 | 描述 |
|---|
| isInitialed | Boolean | false | 是否初始化中,展示初始化 loading |
| mailListModalVisible | Boolean | false | 是否显示通讯录 |
| isCalled | Boolean | false | 是否拨打电话 |
| isCalling | Boolean | false | 是否正在呼叫电话中 |
| callTime | string | - | 通话计时 |
| isMute | Boolean | false | 是否静音 |
| rouletteVisible | Boolean | false | 是否显示操作盘 |
| makeCallModalVisible | Boolean | false | 是否显示拨号盘 |
| isConnect | Boolean | false | 是否接通电话 |
| makeCallingModalVisible | Boolean | false | 是否正在呼叫电话 |
| phoneType | string | 'audio' | 拨打电话类型 |
| callPhone | string | - | 当前拨打电话号码 |
| userList | {id, label, value, avatar, orgname} | [] | id:唯一标识, label:中文名, value:电话号码, avatar:头像, orgname:结构名称 |
| manyPeopleList | [] | [] | 当前多人会话人员数组 |