Web SDK Integration Guide

Web SDK for cloud phone screen casting and real-time control.

1. Installation and Import

npm install @vmaos/web-cast-sdk

import { UniSDK } from '@vmaos/web-cast-sdk/uni-sdk';

2. Initialization Configuration

Property	Description	Required
mountedElement	Mount node; supports an HTMLElement instance or a selector/node ID.	Required
connectConfig	WebRTC connection configuration, obtained from the connection configuration API provided by the backend / SDK.	Required
isGroup	Whether to enable group control. Defaults to false.	Optional
enabledDebug	Whether to enable debug mode / log output. Defaults to false.	Optional
disabledVerticalSwipe	Whether to block vertical swiping. Defaults to false.	Optional
disabled	Whether to disable keyboard event handling. Defaults to false.	Optional
enabledIMEKeyboard	Whether to enable IME keyboard mapping. Defaults to false.	Optional
enabledDecode	Whether to enable decoding (Canvas rendering). Defaults to false.	Optional
cursorType	Cursor style, defaults to default. Available values and their enums: • default: UniSDK.CURSOR_TYPE.DEFAULT_CURSOR • circle: UniSDK.CURSOR_TYPE.CIRCLE_CURSOR • triangle: UniSDK.CURSOR_TYPE.TRIANGLE_CURSOR	Optional
cloudDeviceSize	Cloud phone screen size, in the format { width, height }.	Optional
videoAngle	Video rotation angle.	Optional
remoteViewBackgroundColor	Remote view background color. Defaults to transparent.	Optional

3. Instance Methods

Method	Description
goHome	Go to the home screen (Android Home key)
goTask	Recents list (Android Recents key)
goBack	Go back (Android Back key)
enableAudio	Enable audio
disableAudio	Disable audio
sendClipboardData	Send clipboard data
openIMEKeyboard	Open keyboard mapping
closeIMEKeyboard	Close keyboard mapping
switchToGestureNavigation	Switch to gesture navigation
switchToThreeButtonNavigation	Switch to three-button navigation
changeLevel	Set the clarity level; access the supported levels via UniSDK.CLARITY_LEVEL. Currently Smooth, Standard, and Ultra are supported
setVideoAngle	Set the video rotation angle
getVideoAngle	Get the video rotation angle
setStreamAngle	Set the stream angle
setCloudDeviceSize	Set the cloud phone screen size
destroy	Destroy the SDK instance

4. Event Listening

Listen with player.addListener(event, callback); event enums are accessible via UniSDK.EVENTS:

Event	Callback Parameter	Description
CONNECTED	-	Connection established
LOADED_SUCCESS	-	Stream loaded successfully
LOADED_FAILURE	error: any	Stream loading failed
STOP_CONNECT	-	Connection closed
STATISTIC_INFO	info: StatisticInfo	Real-time statistics update (includes framesPerSecond, bitrate, lostRate, currentRoundTripTime, averageDecodeTime)
CLARITY_LEVEL_CHANGE	level: number	Clarity level change notification
DIRECTION_CHANGE	angle: number	Cloud phone screen orientation change (0 for portrait, -90 for landscape)
RESIZE	screen: { screenWidth, screenHeight }	Cloud phone resolution change notification
GESTURE_MODE_CHANGE	mode: number	Cloud phone navigation mode change (0 three-button navigation, 2 gesture navigation)
RECEIVE_MEDIA_STREAM_TRACK	track: MediaStreamTrack	Media stream track received
RECEIVE_ARRAY_BUFFER	buffer: ArrayBuffer	Binary data received
CLICK_DATA	data: ChannelDataType	Click data
CHANNEL_EVENT	-	Channel event
GROUP_CONTROL_EVENT	-	Group control event
ERROR	error: Error	Streaming-related error

5. Error Codes

Code	Description	Severity
10001	WebSocket connection failed	High
10002	WebSocket closed	High
10003	Failed to create offer	High
10004	Failed to process offer	High
10005	Failed to create answer	High
10006	Failed to process answer	High
10007	Failed to set local description	High
10008	Failed to set remote description	High
10009	Failed to handle ICE exchange	High
10010	ICE state abnormal	High
10011	Camera error	High
10012	The cloud phone is powered off or does not exist	High
10013	Signaling channel error	Low
10014	Failed to get WebRTC statistics	Low

6. Complete Example

const config = {}; // Obtain the connectConfig from the connection configuration API

const player = new UniSDK({
    mountedElement: "#player-mounted",  // Mount node; can be an HTMLElement or a node ID
    isGroup: false, // Group control mode; defaults to false
    disabled: true, // Disabled
    enabledDebug: process.env.NODE_ENV !== 'production', // Enable logging in development; defaults to false
    disabledVerticalSwipe: false, // Whether to block vertical swiping; defaults to false
    enabledIMEKeyboard: false,     // Whether to enable keyboard mapping; defaults to false
    cursorType: UniSDK.CURSOR_TYPE.CIRCLE_CURSOR, // Cursor type; defaults to default
    connectConfig: {
      ...config
    }
});

player.addListener(UniSDK.EVENTS.CONNECTED, () => {
    console.log('Connected');
});

player.addListener(UniSDK.EVENTS.LOADED_SUCCESS, () => {
    console.log('Streaming started');
});

player.addListener(UniSDK.EVENTS.LOADED_FAILURE, (error: any) => {
    console.log('Streaming failed', error);
});

player.addListener(UniSDK.EVENTS.STATISTIC_INFO, (info: any) => {
    console.log('Statistics', info); // See the statistics fields in the Event Listening section
});

player.addListener(UniSDK.EVENTS.CLARITY_LEVEL_CHANGE, (level: number) => {
    console.log('Clarity level updated', level);
});

player.init();