Wechat
HomeHelp CenterAPI Reference
Product Updates
Product Introduction
Quick Start
Operation Guide
Development Guide
FAQ
SDK Documentation

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(): 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:

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:

::: code-group

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

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(): void

Example:

client.stop();

Event Listener Methods

on()

Register an event listener.

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:

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>
): this

Example:

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

off()

Remove an event listener.

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:

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(): void

back()

Press the Back key.

client.back(): void

menu()

Press the multitask/menu key.

client.menu(): void

volumeUp()

Increase volume.

client.volumeUp(): void

volumeDown()

Decrease volume.

client.volumeDown(): void

sendKeyCode()

Send a custom key code.

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:

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
): void

Example:

client.clickKey(AndroidKeyCode.Enter);

Text Input Methods

sendText()

Send text to the device.

client.sendText(text: string): void

Parameters:

  • text: Text string to send

Example:

client.sendText("Hello World!");

Screen Control Methods

setRotation()

Set screen rotation direction.

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:

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

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

getRotation()

Get current rotation state.

client.getRotation(): 0 | 1

Returns: 0 for portrait, 1 for landscape.

Group Control Methods

setGroupControlMode()

Enable or disable group control mode.

client.setGroupControlMode(enabled: boolean): void

Parameters:

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

Example:

client.setGroupControlMode(true);

joinGroupControl()

Add devices to the group control group.

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:

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[]): void

Parameters:

Example:

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

Status Query Methods

getRunningState()

Get current running state.

client.getRunningState(): boolean

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

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

getScale()

Get current scale ratio.

client.getScale(): number

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

Quick customer support
Download