软电话组件 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,
};