软电话组件 API
组件展示
掘金地址
掘金地址
webPhoneV3 - Antd3 版本
import webPhone from 'web-rtc-phone'
import React,{useRef,useEffect} from 'react'
import {
Row,
Col,
Popover,
Form,
Input,
Button,
message,
Table,
Collapse,
Switch,
Radio,
Tooltip,
Badge,
Icon,
} from 'antd';
const AntdNode = {
Row,
Col,
Popover,
Form,
Input,
Button,
message,
Table,
Icon,
Collapse,
Switch,
Radio,
Tooltip,
Badge,
};
const TestWebPhoneV3Com = ({ form }) => {
const webPhoneRef = useRef();
const config = {}
useEffect(()=>{
if(webPhoneRef.current){
webPhoneRef.current?.login(config)
}
},[webPhoneRef.current])
return (
<div style={{ backgroundColor: '#f6f6f6' }}>
<WebPhone
ref={webPhoneRef}
AntdNode={AntdNode}
form={form}
version="V3"
debugPrivilege={true}
/>
</div>
);
};
const TestWebPhoneV3 = Form.create()(TestWebPhoneV3Com);
export default TestWebPhoneV3;
API
| 方法、属性 | 描述 | 类型 | 默认值 |
|---|
| form | 经 Form.create() 包装过的组件会自带 this.props.form 属性(必传) | |
| ref | ref = useRef() ref 暴露的方法 | ref | |
| AntdNode | AntdNode 的 V3 | antd | |
| version | antd 的版本(必传) | string | V3 |
| debugPrivilege | 调试按钮权限 | boolean | false |
webPhoneV4-Antd4 版本
import webPhone from 'web-rtc-phone'
import React,{useRef,useEffect} from 'react'
import {
Row,
Col,
Popover,
Form,
Input,
Button,
message,
Table,
Collapse,
Switch,
Radio,
Tooltip,
Badge,
Icon,
} from 'antd';
import Icon from '@ant-design/icons';
const AntdNode = {
Row,
Col,
Popover,
Form,
Input,
Button,
message,
Table,
Icon,
Collapse,
Switch,
Radio,
Tooltip,
Badge,
};
const TestWebPhoneV4 = () => {
const webPhoneRef = useRef();
const [form] = Form.useForm();
const config = {}
useEffect(()=>{
if(webPhoneRef.current){
webPhoneRef.current?.login(config)
}
},[webPhoneRef.current])
return (
<div style={{ backgroundColor: '#f6f6f6' }}>
<WebPhone
ref={webPhoneRef}
AntdNode={AntdNode}
form={form}
version="V4"
debugPrivilege={true}
/>
</div>
);
};
export default TestWebPhoneV4;
API
| 方法、属性 | 描述 | 类型 | 默认值 |
|---|
| form | 经 Form.useForm() 创建的 form 控制实例，不提供时会自动创建(必传) | | |
| ref | ref = useRef() ref 暴露的方法 | ref | |
| AntdNode | AntdNode 的 V4 | antd | |
| version | antd 的版本(必传) | string | V4 |
| debugPrivilege | 调试按钮权限 | boolean | false |
ref 暴露的方法
login:(values)=> void //登录
getPhoneNumber: () => phoneNumber, // 拨打号码
getConfigInfo: () => configInfo, // 配置信息
getSipCall: () => sipClientRef.current, // SipCall实例
sipCallEvent, // 电话状态回调
| 方法、属性 | 描述 | 默认值 |
|---|
| login （登录） | (values)=> void | values:{ host,port,extNo,extPwd }login 的参数 |
| getPhoneNumber (获取拨打号码) | () => phoneNumber | |
| getConfigInfo (获取配置信息) | () => configInfo | configInfo:{ host,port,extNo,extPwd }login 的参数 |
| getSipCall (获取 SipCall 实例) | () => sipClientRef.current | |
| sipCallEvent(sipCall 的 events 事件) | sipCallEvent?.addListener('phoneStatus', (phoneStatus) => {console.log('phoneStatus', phoneStatus) }); | |
login 的参数
host, // 服务器地址
port, // 服务器端口
extNo, // 分机号
extPwd; // 密码
//例如：
const wsServer = `[ws || wss]://${host}:port`
this.socket = new jssip.WebSocketInterface(wsServer);
new jssip.UA({
sockets: [this.socket],
uri: 'sip:' + extNo + '@'+ host,
password: extPwd,
//...
})
AntdNode 的 V3
import {
Button,
Col,
Row,
Popover,
Form,
Input,
Table,
Icon,
Badge,
Tooltip,
message,
Collapse,
Switch,
Radio,
} from 'antd';
const AntdNode = {
Row,
Col,
Popover,
Form,
Input,
Button,
message,
Table,
Icon,
Collapse,
Switch,
Radio,
Tooltip,
Badge,
};
AntdNode 的 V4
import {
Button,
Col,
Row,
Popover,
Form,
Input,
Table,
Badge,
Tooltip,
message,
Collapse,
Switch,
Radio,
} from 'antd';
import Icon from '@ant-design/icons';
const AntdNode = {
Row,
Col,
Popover,
Form,
Input,
Button,
message,
Table,
Icon,
Collapse,
Switch,
Radio,
Tooltip,
Badge,
};