集成 Linkus Web SDK UI

init (container,{rtcOption})

• container：用于渲染 UI 组件，类型为 HTMLElement。
• rtcOption：初始化选项，具体参数参见下表。

  属性	类型	是否必填	说明
  username	string	是	分机号或邮箱地址。
  secret	string	是	用户的 Linkus SDK 登录签名。
  pbxURL	URL | string	是	PBX 的访问地址，需要包含使用的协议以及对应的端口。如：https://192.168.1.1:8088.。
  enableLog	boolean	否	是否启用日志输出并将错误日志上报至 PBX。 取值范围： true：启用 false：禁用 注： 此功能默认启用。
  reRegistryPhoneTimes	number	否	指定可重新注册 SIP UA (User Agent) 的次数。
  deviceIds	{ cameraId?: string; microphoneId?: string;}	否	指定音视频输入设备的 ID，包含摄像头 ID 及麦克风 ID。
  incomingOption	{ style?: React.CSSProperties; class?: string; }	否	调整 Incoming 组件样式。
  dialPanelOption	{ style?: React.CSSProperties; class?: string; }	否	调整拨号盘组件样式。
  sessionOption	SessionOption	否	调整通话窗口组件位置和尺寸。
  hiddenIncomingComponent	boolean	否	隐藏来电弹屏组件。
  hiddenDialPanelComponent	boolean	否	隐藏拨号盘组件。
  disableCallWaiting	boolean	否	是否禁用呼叫等待。 取值范围： true：禁用呼叫等待，PBX 设置的呼叫等待时间不生效，且 PBX 只处理单路通话。 false：启用呼叫等待。
  intl	{ local: string; messages: Record<string, string>}	否	国际化 (多语言) 设置。

  SessionOption 类型说明

  type SessionOption = {
      sessionSetting?: {
          width?: number;
          height?: number;
          miniWidth?: number;
          miniHeight?: number;
          x?: number;
          y?: number;
      };
      style?: React.CSSProperties;
      class?: string;
  }

  intl (国际化设置) 类型说明

  • local：当前使用语言的名称，用短横线连接，如 en-US、zh-CN。
  • message：可配置的文案内容，以键值对形式呈现。参见以下内容以了解具体的配置项及默认值。

    {
        "common.cancel": "Cancel", // 取消操作提示文案
        "common.confirm": "Confirm", // 确认操作提示文案
        "dial_panel.input.placeholder": "Please input number", // "输入号码" 提示文案
        "dial_panel.tip.connect_failed": "Failed to connect to server, you cannot initiate or answer a call. Trying to reconnect to the server.", //服务器连接失败提示文案
        "incoming.btn.hang_up": "Hang up", // "挂断通话" 按钮文案
        "incoming.btn.audio": "Audio", // 选择 "语音通话" 按钮文案
        "session.calling": "Calling...", // "呼叫中" 文案
        "session.ringing": "Ringing...", // "对方振铃中" 文案
        "session.talking": "Talking...", // "通话中" 文案
        "session.connecting": "Connecting...", // "连接中" 文案
        "session.hang_up": "End Call", // "结束通话" 文案
        "session.new_call": "New call", // "新呼叫" 文案
        "session.record": "Record", // "录音" 文案
        "session.mute": "Mute", // "静音通话" 文案
        "session.hold": "Hold", // "保持通话" 文案
        "session.resume": "Resume", // "恢复通话" 文案
        "session.dialpad": "Dialpad", // "拨号键盘" 文案
        "session.transfer": "Transfer", // "转接通话" 文案
        "session.attended_transfer": "Attended Transfer", // "咨询转接" 文案
        "session.blind_transfer": "Blind Transfer", // "盲转接" 文案
        "session.error.client_error": "Client Error: {0}", // "客户端异常" 文案。"{0}" 为占位符
        "session.tip.recording": "Recording the Audio...", // "通话录音中" 文案
        "session.tip.pause": "The recording is paused.", // "通话录音已暂停" 文案
        "error.code_200": "Unknown Error.", // "未知错误" 提示文案
        "error.code_202": "No available communication device found.(no permissions)", // "无权获取通话设备" 提示文案
        "error.code_205": "Call failed. Cannot process more new calls now.", // "通话失败 (已达最大通话数)" 提示文案
        "error.code_206": "No available communication device found.", // "无可用的通话设备" 提示文案
        "error.code_207": "Attended Transfer Failed.", // "咨询转接失败" 提示文案 
        "error.code_208": "Call failed. Called too many times.", // "通话失败 (已达呼出次数上限)" 提示文案
        "error.code_209": "Call failed. Invalid Number.", // "通话失败 (无效号码)" 提示文案
        "error.code_210": "Operation failed with pending calls.", // "有待处理来电，操作失败" 提示文案
        "error.code_211": "Answer failed", // "接听来电失败" 提示文案
        "error.code_290": "No available microphone found.", // "无可用的麦克风" 提示文案
        "error.code_291": "No available camera found." // "无可用的摄像头" 提示文案
    }

使用 npm 安装并初始化 Linkus Web SDK UI

import { init } from 'ys-webrtc-sdk-ui';
import 'ys-webrtc-sdk-ui/lib/ys-webrtc-sdk-ui.css';
const container = document.getElementById('container');
// 初始化
init(container, {
    username: '1000',
    secret: 'sdkshajgllliiaggskjhf',
    pbxURL: 'https://192.168.1.1:8088'
}).then(data => {
// 可以在这里获取暴露出的实例，处理更多业务
const { phone, pbx, destroy, on } = data;
    // ...
}).catch(err=>{
    console.log(err)
})

使用 script 标签方式导入并初始化 Linkus Web SDK UI

<!-- 加载样式 -->
<link rel="stylesheet" href="ys-webrtc-sdk-ui.css">

<div id="test"></div>
<!-- 加载UI集成 SDK -->
<script src="./ys-webrtc-sdk-ui.js"></script>
<script>
    const test = document.getElementById('test');
    // 加载成功后通过YSWebRTCUI对象进行初始化
    window.YSWebRTCUI.init(test, {
        username: '1000',
        secret: 'sdkshajgllliiaggskjhf',
        pbxURL: 'https://192.168.1.1:8088'
    })
        .then(data => {
            const { phone, pbx } = data;
        })
        .catch(error => {
            console.log(error);
        });
</script>