集成 Linkus Web SDK UI
Linkus Web SDK UI 提供预设好的 UI 组件,你可以将其与 Web 项目集成,在 Linkus Web SDK Core 集成的基础上实现带有 UI 界面的通话功能。
前提条件
步骤一、导入 Linkus Web SDK UI
- 前往 Linkus SDK UI 的 GitHub 仓库,下载 Linkus SDK UI。
- 使用以下任意一种方式将 Linkus Web SDK UI 引入至你的 Web 项目。
- 使用 npm 安装 Linkus Web SDK
UI
npm install ys-webrtc-sdk-ui --save
- 使用 script 标签方式引入 Linkus Web SDK
UI
<script src="./ys-webrtc-sdk-ui.js"></script>
- 使用 npm 安装 Linkus Web SDK
UI
步骤二、初始化 Linkus Web SDK UI
使用
init
方法初始化 Linkus Web SDK UI,渲染 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>
执行结果
你已完成 Linkus Web SDK UI 的集成及初始化,且得到了两个实例化后的 Operator 对象:
- PBXOperator:包含 PBX 相关的方法和参数,如通话记录查询、用户账号登出等。
- PhoneOperator:包含通话相关的方法及参数,如发起呼叫、接听通话及挂断通话等。