VMOS Edge Documentation

English

简体中文

English

简体中文

Appearance

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.

typescript
VmosEdgeClient.isWebCodecsSupported(): boolean

Returns: 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:

typescript
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 ​

typescript
new VmosEdgeClient(options: VmosEdgeClientOptions)

Type Definition: VmosEdgeClientOptions

Parameters:

ParameterTypeRequiredDescription
options.configVmosEdgeClientConfig✅Device connection configuration
options.containerHTMLElement✅DOM container element for displaying device screen
options.isGroupControlboolean❌Whether to enable group control mode, default false
options.retryCountnumber❌Retry count on disconnection, default 0 (no retry)
options.retryIntervalnumber❌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.touchMoveFrequencynumber❌Touch move event frequency (Hz), default 60

Example:

typescript
// 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",
});
typescript
// 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 the dbid field in device information
  • ip: Use ip field for LAN mode, use hostip field for non-LAN mode
  • ports.video: Fixed to 9999 for LAN mode, use tcp_port field for non-LAN mode
  • ports.touch: Fixed to 9997 for LAN mode, use tcp_control_port field for non-LAN mode
  • Network Mode Detection: network_mode === 'macvlan' indicates LAN mode

Methods ​

start() ​

Start connection and establish connection with the device.

typescript
client.start(): Promise<void>

Returns: Promise<void>, resolves on successful connection, rejects on failure.

Example:

typescript
try {
  await client.start();
  console.log("Connected successfully");
} catch (error) {
  console.error("Connection failed:", error);
}

stop() ​

Stop connection and release all resources.

typescript
client.stop(): void

Example:

typescript
client.stop();

Event Listener Methods ​

on() ​

Register an event listener.

typescript
client.on<T extends VmosEdgeClientEventName>(
  event: T,
  listener: VmosEdgeClientEventListener<T>
): this

Parameters:

  • event: Event name (use constants from VmosEdgeClientEvents)
  • listener: Event handler function

Returns: Returns this for method chaining.

Example:

typescript
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).

typescript
client.once<T extends VmosEdgeClientEventName>(
  event: T,
  listener: VmosEdgeClientEventListener<T>
): this

Example:

typescript
client.once(VmosEdgeClientEvents.STARTED, () => {
  console.log("First connection successful");
});

off() ​

Remove an event listener.

typescript
client.off<T extends VmosEdgeClientEventName>(
  event: T,
  listener?: VmosEdgeClientEventListener<T>
): this

Parameters:

  • event: Event name
  • listener: Optional, the listener function to remove. If not provided, removes all listeners for this event.

Example:

typescript
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.

typescript
client.home(): void

back() ​

Press the Back key.

typescript
client.back(): void

Press the multitask/menu key.

typescript
client.menu(): void

volumeUp() ​

Increase volume.

typescript
client.volumeUp(): void

volumeDown() ​

Decrease volume.

typescript
client.volumeDown(): void

sendKeyCode() ​

Send a custom key code.

typescript
client.sendKeyCode(
  keyCode: AndroidKeyCode,
  action: AndroidKeyEventAction,
  metaState?: number
): void

Parameters:

  • keyCode: Android key code (use AndroidKeyCode enum)
  • action: Key action (AndroidKeyEventAction.Down or AndroidKeyEventAction.Up)
  • metaState: Optional, meta key state (for modifier keys like Shift, Ctrl, etc.)

Example:

typescript
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).

typescript
client.clickKey(
  keyCode: AndroidKeyCode,
  metaState?: AndroidMetaState
): void

Example:

typescript
client.clickKey(AndroidKeyCode.Enter);

Text Input Methods ​

sendText() ​

Send text to the device.

typescript
client.sendText(text: string): void

Parameters:

  • text: Text string to send

Example:

typescript
client.sendText("Hello World!");

Screen Control Methods ​

setRotation() ​

Set screen rotation direction.

typescript
client.setRotation(rotation: 0 | 1): void

Parameters:

  • rotation: 0 for portrait, 1 for landscape

Note: The SDK usually automatically adjusts rotation based on video stream direction. Only call manually for special requirements.

Example:

typescript
// Switch to landscape
client.setRotation(1);

// Switch to portrait
client.setRotation(0);

getRotation() ​

Get current rotation state.

typescript
client.getRotation(): 0 | 1

Returns: 0 for portrait, 1 for landscape.

Group Control Methods ​

setGroupControlMode() ​

Enable or disable group control mode.

typescript
client.setGroupControlMode(enabled: boolean): void

Parameters:

  • enabled: true to enable group control, false to disable

Example:

typescript
client.setGroupControlMode(true);

joinGroupControl() ​

Add devices to the group control group.

typescript
client.joinGroupControl(config: VmosEdgeClientConfig[]): void

Parameters:

Note:

  • Must call setGroupControlMode(true) first to enable group control mode
  • In group control mode, slave devices only need touch port, video port is not required

Example:

typescript
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.

typescript
client.leaveGroupControl(config: VmosEdgeClientConfig[]): void

Parameters:

Example:

typescript
client.leaveGroupControl([
  {
    ip: "192.168.1.101",
    deviceId: "device_002",
    ports: { touch: 9002 },
  },
]);

Status Query Methods ​

getRunningState() ​

Get current running state.

typescript
client.getRunningState(): boolean

Returns: true if running, false if stopped.

getVideoSize() ​

Get video size information.

typescript
client.getVideoSize(): { width: number; height: number }

Returns: Object containing video width and height (similar to videoWidth and videoHeight in VmosEdgeSizeChangedEvent).

Example:

typescript
const size = client.getVideoSize();
console.log(`Video size: ${size.width} x ${size.height}`);

getConfig() ​

Get device configuration information.

typescript
client.getConfig(): VmosEdgeClientConfig | null

Returns: Device configuration object (VmosEdgeClientConfig), or null if not initialized.

getScale() ​

Get current scale ratio.

typescript
client.getScale(): number

Returns: Scale ratio (display size / video source size).