Skip to main content

JavaScript Bridge API

When an HTML5 application runs inside App Container, the container runtime automatically injects JavaScript bridge interfaces under window.appcontainer. These objects allow web developers to control native device functions directly from browser JavaScript - with zero latency, no network round-trips, and no authorization tokens required.

🔍 Platform & Hardware Detection​

window.appcontainer.isOem​

A boolean flag that indicates whether the application is running on dedicated AVstudio touch panel hardware (such as AVS-10 or AVS-15) vs. a standard smartphone or tablet.

if (window.appcontainer?.isOem) {
  console.log("Running on AVstudio dedicated hardware touch panel");
  // Enable hardware-specific UI controls (LEDs, relays, serial, etc.)
} else {
  console.log("Running on standard mobile device or emulator");
}

đŸŽĨ Native Video Streaming - streamBridge​

The native player overlay interface uses Flutter's native libmpv/FFmpeg engine to render RTSP camera streams directly above the WebView. It provides zero added latency and full hardware video decoding.

Opening a Stream​

window.appcontainer.streamBridge.postMessage(JSON.stringify({
  action: 'open',
  id:     'cam1',          // Unique stream identifier string
  url:    'rtsp://192.168.1.10:554/stream',
  divId:  'player-div'    // DOM element ID acting as video container
}));

Alternatively, position the video overlay using fractional screen coordinates (rect object with values from 0.0 to 1.0):

window.appcontainer.streamBridge.postMessage(JSON.stringify({
  action: 'open',
  id:     'cam1',
  url:    'rtsp://192.168.1.10:554/stream',
  rect:   { x: 0, y: 0, w: 1, h: 0.5 } // Top half of screen
}));

Resizing / Updating Position​

Track DOM changes with ResizeObserver to ensure the native video overlay stays aligned with HTML layout shifts during scroll or window resize:

const playerDiv = document.getElementById('player-div');
const observer = new ResizeObserver(() => {
  window.appcontainer.streamBridge.postMessage(JSON.stringify({
    action: 'resize',
    id:     'cam1',
    divId:  'player-div'
  }));
});
observer.observe(playerDiv);

Closing Streams​

// Close a specific stream by ID
window.appcontainer.streamBridge.postMessage(JSON.stringify({
  action: 'close',
  id:     'cam1'
}));

// Close all active native video streams
window.appcontainer.streamBridge.postMessage(JSON.stringify({
  action: 'closeAll'
}));

💡 Hardware & GPIO Control - gpioBridge​

Note: Supported on AVstudio touch panels (AVS-10 / AVS-15).

LED Strip Control​

Control the bezel RGB status LED strip directly from your web project:

// Turn LED strip ON or OFF
window.appcontainer.gpioBridge.postMessage(JSON.stringify({ action: 'ledOn' }));
window.appcontainer.gpioBridge.postMessage(JSON.stringify({ action: 'ledOff' }));

// Set custom RGB color (red, green, blue values from 0 to 255)
window.appcontainer.gpioBridge.postMessage(JSON.stringify({
  action: 'ledColor',
  red: 255,
  green: 128,
  blue: 0
}));

GPIO & Relay Control​

Control physical GPIO pins and relay outputs:

Pin IndexPhysical HardwareType
0IO 1Digital I/O (Read / Write)
1IO 2Digital I/O (Read / Write)
2Relay 1Relay Contact Output (CLOSED / OPEN)
3Relay 2Relay Contact Output (CLOSED / OPEN)
// Write high (1) or low (0) level to a GPIO or Relay pin
window.appcontainer.gpioBridge.postMessage(JSON.stringify({
  action: 'write',
  pin: 2,
  level: 1
}));

// Read digital status from an input pin
window.appcontainer.gpioBridge.postMessage(JSON.stringify({
  action: 'read',
  pin: 0
}));

📡 Low-Level UDP Transmission​

App Container allows web applications to dispatch raw UDP datagrams directly to local network devices without requiring external WebSocket bridges.

sendUdp(host, port, hex)​

Sends hex-encoded binary data over UDP. Broadcast addresses (e.g., 192.168.1.255 or 255.255.255.255) are automatically handled.

window.appcontainer.sendUdp('192.168.1.255', 502, '010600660001A815')
  .then(response => {
    console.log("UDP Hex Sent:", response);
    // Returns: { status: "ok", host: "192.168.1.255", port: 502, sent: 8 }
  })
  .catch(error => {
    console.error("UDP Send Error:", error);
  });

sendUdpRaw(host, port, string)​

Sends a raw text string over UDP as-is:

window.appcontainer.sendUdpRaw('192.168.1.100', 9000, 'PING')
  .then(response => {
    console.log("UDP Raw Sent:", response);
  })
  .catch(error => console.error("UDP Error:", error));

📲 Native Android Application Management​

Note: Available on AVstudio touch panel hardware running Android.

Web applications can trigger launch or removal of approved third-party Android packages:

// Launch an installed Android package by package name
window.appcontainer.launchApp('com.example.app');

// Request uninstallation of an Android package
window.appcontainer.uninstallApp('com.example.app');

📞 SIP / SIP Intercom Support (Coming Soon)​

App Container will support native SIP protocol integration for full-duplex VoIP audio and video intercom calls directly from HTML5 applications.

ℹī¸ Complete JavaScript bridge API methods and developer documentation will be provided soon.

🔄 Lifecycle & Page Navigation Rules​

  • Automatic Stream Cleanup: All active native video overlays opened via streamBridge are automatically closed when navigating between HTML pages or reloading the WebView.
  • Persistence: Hardware states (LED colors, GPIO/Relay settings) persist across page navigations until explicitly modified or reset.