Integrate Linkus SDK for Web UI

Linkus SDK for Web UI provides a pre-integrated UI component that requires no additional coding, you can integrate it with your Web projects to implement call functionalities with a user interface based on the integration of 'Linkus SDK for Web Core'.

Prerequisites

Step 1. Import 'Linkus SDK for Web UI'

  1. Go to the GitHub Repository of 'Linkus SDK for Web UI', and download 'Linkus SDK for Web UI'.
  2. Use either of the following methods to import 'Linkus SDK for Web UI' to your project.
    • Use npm to install 'Linkus SDK for Web UI'
      npm install ys-webrtc-sdk-ui --save
    • Use script to import 'Linkus SDK for Web UI'
      <script src="./ys-webrtc-sdk-ui.js"></script>

Step 2. Initialize 'Linkus SDK for Web UI'

Use the init method to initialize 'Linkus SDK for Web UI' and render the UI components.
Method
init (container,{rtcOption})
Parameters
  • container: Used to render UI components, and the data type is HTMLElement.
  • rtcOption: Initialization options. Refer to the following table for specific parameters.
    Parameter Type Required Description
    username string Yes Extension number or email address.
    secret string Yes Linkus SDK login signature.
    pbxURL URL | string Yes The URL for accessing your PBX system, including the transfer protocol.

    For example, https://192.168.1.1:8088 .

    enableLog boolean No Whether to enable log output and report error logs to PBX.
    Valid value:
    • true: Enable
    • false: Disable
    Note: This feature is enabled by default.
    reRegistryPhoneTimes number No Define the number of retry attempts for SIP UA (User Agent) registration. By default, it is unlimited.
    deviceIds { cameraId?: string; microphoneId?: string;} No Define the IDs of the audio and video input devices, including the camera ID and microphone ID.
    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 dialpad 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 dialpad component.
    disableCallWaiting boolean No Whether to disable call waiting.
    Valid value:
    • true: Disable call waiting.

      The call waiting time set on PBX will NOT take effect and the PBX only handles a single call.

    • false: Enable call waiting.
    intl { local: string; messages: Record<string, string>} No Internationalization (multilingual) settings.
    SessionOption description
    type SessionOption = {
        sessionSetting?: {
            width?: number;
            height?: number;
            miniWidth?: number;
            miniHeight?: number;
            x?: number;
            y?: number;
        };
        style?: React.CSSProperties;
        class?: string;
    }
    intl (Internationalization) description
    • local: Name of the current language, connected with a -. For example, en-USzh-CN.
    • message: 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."
      }
Sample code
Use 'npm' to install and initialize 'Linkus SDK for Web UI'
import { init } from 'ys-webrtc-sdk-ui';
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)
})
Use 'script' to import and initialize 'Linkus SDK for Web UI'
<!-- 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>

Result

You have integrated and initialized 'Linkus SDK for Web UI', two instantiated Operator objects are returned:
  • PBXOperator: Contains methods and attributes related to the PBX, such as querying CDR records, logging out, and more.
  • PhoneOperator: Contains methods and attributes related to calls, such as making a call, answering a call, ending a call, and more.