Yeastar WebRTC SDK separates the PBX web calling component UI and call logic.
Yeastar WebRTC SDK UI is pre-integrated UI components that require no additional coding, while the core logic for the calling functionality is based on the integration of Yeastar WebRTC SDK Core.
npm install ys-webrtc-sdk-ui --saveInitialize the Yeastar WebRTC SDK UI and render the UI components,
import { init } from 'ys-webrtc-sdk-ui';
import 'ys-webrtc-sdk-ui/lib/ys-webrtc-sdk-ui.css';
const container = document.getElementById('container');
// Initialization
init(container, {
username: '1000',
secret: 'sdkshajgllliiaggskjhf',
pbxURL: 'https://192.168.1.1:8088'
}).then(data => {
// Obtain the exposed instances for additional business needs
const { phone, pbx, destroy, on } = data;
// ...
}).catch(err=>{
console.log(err)
})<!-- Loading styles -->
<link rel="stylesheet" href="ys-webrtc-sdk-ui.css">
<div id="test"></div>
<!-- Loading Yeastar WebRTC SDK UI-->
<script src="./ys-webrtc-sdk-ui.js"></script>
<script>
const test = document.getElementById('test');
// Initialize Yeastar WebRTC SDK UI with the 'YSWebRTCUI' object.
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>Initialize Yeastar WebRTC SDK UI using the init method. Upon successful initialization, two instantiated Operator objects are returned:
-
phone: The object contains methods and attributes related to the call handling, such as 'call', 'hangup', and others.
-
pbx: The object contains methods and attributes related to the PBX operations, such as querying CDR.
Note: For more information, see ys-webrtc-sdk-core.
The init function requires two parameters:
- container: Applicable for rendering UI components, and the data type is 'HTMLElement'.
- rtcOption: Initialization options.
| Parameter | Type | Required | Description |
|---|---|---|---|
| username | string | Yes | Extension number. |
| secret | string | Yes | Login signature, which can be obtained using OPEN API. For more information, see Obtain a Server-side Signature. |
| pbxURL | URL | string | Yes | The URL for accessing your PBX system, including the transfer protocol and the port number. For example, https://192.168.1.1:8088 or https://xx.xxx.com. |
| enableLog | boolean | No | Whether to enable log output and report error logs to PBX. This feature is enabled by default. |
| reRegistryPhoneTimes | number | No | Define the number of attempts to reconnect to the SIP service. By default, it is unlimited. |
| deviceIds | { cameraId?: string; microphoneId?: string; speakerId:string; volume:number } | No | Specify the IDs of the audio and video input devices, including the camera ID, microphone ID, and speaker ID. Volume refers to the volume level for calls, incoming call ringtones, and keypad tones, ranging from 0 to 1. The default value is 0.6. |
| incomingOption | { style?: React.CSSProperties; class?: string; } | No | Adjust the styling of the 'incoming call component'. |
| dialPanelOption | { style?: React.CSSProperties; class?: string; } | No | Adjust the styling of the 'dial panel component'. |
| sessionOption | SessionOption | No | Adjust the position and size of the 'call window component'. |
| hiddenIncomingComponent | boolean | No | Hide the 'incoming call component'. |
| hiddenDialPanelComponent | boolean | No | Hide the 'dial panel component'. |
| disableCallWaiting | boolean | No | Whether to disable call waiting. When setting this value to true, the PBX call waiting value does NOT take effect and PBX only handles single calls. |
| intl | { local: string; messages: Record<string, string>} | No | Internationalization (multilingual) settings. For more information, see intl (Internationalization) description. |
type SessionOption = {
sessionSetting?: {
width?: number;
height?: number;
miniWidth?: number;
miniHeight?: number;
x?: number;
y?: number;
};
style?: React.CSSProperties;
class?: string;
}local: Name of the current language, connected with a '-'. For example,en-USorzh-CN.messages: Configurable text content, which is presented in key-value pairs. Refer to the following content for specific configuration items and their default values.{ "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}", "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." }