API Reference
VmosEdgeClient Class
This is the core class of the SDK, used to create and manage device connections.
Static Methods
isWebCodecsSupported()
Detects whether the current environment supports SDK usage.
VmosEdgeClient.isWebCodecsSupported(): booleanReturns: boolean, true indicates the current environment supports SDK usage, false indicates it does not.
Description:
- This static method detects whether the browser supports WebCodecs API and whether it's running under file:// protocol or localhost environment
- The SDK requires WebCodecs API for video decoding and currently only supports running under file:// protocol or localhost environment
- It's recommended to call this method before using the SDK to detect environment support
Example:
import { VmosEdgeClient } from "@vmosedge/web-sdk";
// Detect environment support before using the SDK
if (!VmosEdgeClient.isWebCodecsSupported()) {
console.error("Current environment does not support SDK usage");
console.error("Please ensure:");
console.error("1. Using a modern browser (Chrome 94+, Edge 94+, Safari 16.4+)");
console.error("2. Open the HTML file using file:// protocol, or access through localhost on a local web server");
return;
}
// Environment supports SDK, can use normally
const client = new VmosEdgeClient({
container: document.getElementById("container")!,
config: {
ip: "192.168.1.100",
deviceId: "EDGE418ASOC2LX9C",
ports: {
video: 9999,
touch: 9997,
},
},
});Detection Content:
- Whether WebCodecs API is available (
VideoDecoder, etc.) - Whether running under file:// protocol or localhost environment
- Whether the browser supports necessary Web APIs
Constructor
Constructor
new VmosEdgeClient(options: VmosEdgeClientOptions)Type Definition: VmosEdgeClientOptions
Parameters:
| Parameter | Type | Required | Description |
|---|---|---|---|
options.config | VmosEdgeClientConfig | ✅ | Device connection configuration |
options.container | HTMLElement | ✅ | DOM container element for displaying device screen |
options.isGroupControl | boolean | ❌ | Whether to enable group control mode, default false |
options.retryCount | number | ❌ | Retry count on disconnection, default 0 (no retry) |
options.retryInterval | number | ❌ | Retry interval (milliseconds), default 1000 |
options.videoCodecPreference | "no-preference" | "prefer-hardware" | "prefer-software" | ❌ | Video codec preference, default "no-preference" |
options.renderPreference | "default" | "high-performance" | "low-power" | ❌ | Render performance preference, default "default" |
options.touchMoveFrequency | number | ❌ | Touch move event frequency (Hz), default 60 |
Example:
// LAN mode (network_mode === 'macvlan')
const client = new VmosEdgeClient({
container: document.getElementById("container")!,
config: {
ip: "192.168.1.100", // Use device's ip field
deviceId: "EDGE418ASOC2LX9C", // Use device's dbid field
ports: {
video: 9999, // LAN mode fixed port
touch: 9997, // LAN mode fixed port
},
},
retryCount: 3,
retryInterval: 1000,
videoCodecPreference: "prefer-hardware",
});// Non-LAN mode
const client = new VmosEdgeClient({
container: document.getElementById("container")!,
config: {
ip: "example.com", // Use device's hostip field
deviceId: "EDGE418ASOC2LX9C", // Use device's dbid field
ports: {
video: 22003, // Use device's tcp_port field
touch: 24003, // Use device's tcp_control_port field
},
},
retryCount: 3,
retryInterval: 1000,
videoCodecPreference: "prefer-hardware",
});Configuration Field Guide:
deviceId: Corresponds to thedbidfield in device informationip: Useipfield for LAN mode, usehostipfield for non-LAN modeports.video: Fixed to9999for LAN mode, usetcp_portfield for non-LAN modeports.touch: Fixed to9997for LAN mode, usetcp_control_portfield for non-LAN mode- Network Mode Detection:
network_mode === 'macvlan'indicates LAN mode
Methods
start()
Start connection and establish connection with the device.
client.start(): Promise<void>Returns: Promise<void>, resolves on successful connection, rejects on failure.
Example:
try {
await client.start();
console.log("Connected successfully");
} catch (error) {
console.error("Connection failed:", error);
}stop()
Stop connection and release all resources.
client.stop(): voidExample:
client.stop();Event Listener Methods
on()
Register an event listener.
client.on<T extends VmosEdgeClientEventName>(
event: T,
listener: VmosEdgeClientEventListener<T>
): thisParameters:
event: Event name (use constants fromVmosEdgeClientEvents)listener: Event handler function
Returns: Returns this for method chaining.
Example:
client.on(VmosEdgeClientEvents.STARTED, () => {
console.log("Connected successfully");
});
client.on(VmosEdgeClientEvents.ERROR, (error) => {
console.error("Error occurred:", error);
});once()
Register a one-time event listener (automatically removed after one trigger).
client.once<T extends VmosEdgeClientEventName>(
event: T,
listener: VmosEdgeClientEventListener<T>
): thisExample:
client.once(VmosEdgeClientEvents.STARTED, () => {
console.log("First connection successful");
});off()
Remove an event listener.
client.off<T extends VmosEdgeClientEventName>(
event: T,
listener?: VmosEdgeClientEventListener<T>
): thisParameters:
event: Event namelistener: Optional, the listener function to remove. If not provided, removes all listeners for this event.
Example:
const handler = (error: VmosEdgeErrorEvent) => console.log(error);
// Register listener
client.on(VmosEdgeClientEvents.ERROR, handler);
// Remove specific listener
client.off(VmosEdgeClientEvents.ERROR, handler);
// Remove all ERROR event listeners
client.off(VmosEdgeClientEvents.ERROR);Key Control Methods
home()
Press the Home key.
client.home(): voidback()
Press the Back key.
client.back(): voidmenu()
Press the multitask/menu key.
client.menu(): voidvolumeUp()
Increase volume.
client.volumeUp(): voidvolumeDown()
Decrease volume.
client.volumeDown(): voidsendKeyCode()
Send a custom key code.
client.sendKeyCode(
keyCode: AndroidKeyCode,
action: AndroidKeyEventAction,
metaState?: number
): voidParameters:
keyCode: Android key code (useAndroidKeyCodeenum)action: Key action (AndroidKeyEventAction.DownorAndroidKeyEventAction.Up)metaState: Optional, meta key state (for modifier keys like Shift, Ctrl, etc.)
Example:
import { AndroidKeyCode, AndroidKeyEventAction } from "@vmosedge/web-sdk";
// Press Power key
client.sendKeyCode(AndroidKeyCode.Power, AndroidKeyEventAction.Down);
client.sendKeyCode(AndroidKeyCode.Power, AndroidKeyEventAction.Up);
// Press Enter key (with Shift)
client.sendKeyCode(
AndroidKeyCode.Enter,
AndroidKeyEventAction.Down,
AndroidMetaState.ShiftOn
);clickKey()
Press and release a key (shortcut method).
client.clickKey(
keyCode: AndroidKeyCode,
metaState?: AndroidMetaState
): voidExample:
client.clickKey(AndroidKeyCode.Enter);Text Input Methods
sendText()
Send text to the device.
client.sendText(text: string): voidParameters:
text: Text string to send
Example:
client.sendText("Hello World!");Screen Control Methods
setRotation()
Set screen rotation direction.
client.setRotation(rotation: 0 | 1): voidParameters:
rotation:0for portrait,1for landscape
Note: The SDK usually automatically adjusts rotation based on video stream direction. Only call manually for special requirements.
Example:
// Switch to landscape
client.setRotation(1);
// Switch to portrait
client.setRotation(0);getRotation()
Get current rotation state.
client.getRotation(): 0 | 1Returns: 0 for portrait, 1 for landscape.
Group Control Methods
setGroupControlMode()
Enable or disable group control mode.
client.setGroupControlMode(enabled: boolean): voidParameters:
enabled:trueto enable group control,falseto disable
Example:
client.setGroupControlMode(true);joinGroupControl()
Add devices to the group control group.
client.joinGroupControl(config: VmosEdgeClientConfig[]): voidParameters:
config: Slave device configuration array (VmosEdgeClientConfig[])
Note:
- Must call
setGroupControlMode(true)first to enable group control mode - In group control mode, slave devices only need
touchport,videoport is not required
Example:
client.setGroupControlMode(true);
const slaveDevices = [
{
ip: "192.168.1.101",
deviceId: "device_002",
ports: { touch: 9002 }, // Group control mode only needs touch port
},
{
ip: "192.168.1.102",
deviceId: "device_003",
ports: { touch: 9003 }, // Group control mode only needs touch port
},
];
client.joinGroupControl(slaveDevices);leaveGroupControl()
Remove devices from the group control group.
client.leaveGroupControl(config: VmosEdgeClientConfig[]): voidParameters:
config: Array of device configurations to remove (VmosEdgeClientConfig[])
Example:
client.leaveGroupControl([
{
ip: "192.168.1.101",
deviceId: "device_002",
ports: { touch: 9002 },
},
]);Status Query Methods
getRunningState()
Get current running state.
client.getRunningState(): booleanReturns: true if running, false if stopped.
getVideoSize()
Get video size information.
client.getVideoSize(): { width: number; height: number }Returns: Object containing video width and height (similar to videoWidth and videoHeight in VmosEdgeSizeChangedEvent).
Example:
const size = client.getVideoSize();
console.log(`Video size: ${size.width} x ${size.height}`);getConfig()
Get device configuration information.
client.getConfig(): VmosEdgeClientConfig | nullReturns: Device configuration object (VmosEdgeClientConfig), or null if not initialized.
getScale()
Get current scale ratio.
client.getScale(): numberReturns: Scale ratio (display size / video source size).
