MonitorDog Web SDK Released: Real-Time Screen Security Detection in the Browser

MonitorDog real-time detection is now available in web applications.

Even in environments where installing a separate desktop agent is difficult, you can use the browser and webcam to detect security risks around the screen and reflect the results immediately in your service UI.

Key Release Details

MonitorDog Web SDK Released

• Real-Time Browser Detection: Detect faces and phones in webcam video and deliver the results to your web application.
• Flexible Installation: Use the npm package or static zip in frontend projects, JSP/WAR applications, and static HTML environments.
• Local AI Inference: Run detection in the browser with encrypted ONNX models and a WebAssembly runtime.
• Secure Session Integration: Configure SDK sessions through your server-side token broker without exposing the Partner API Key to the browser.

Details

1. Real-Time Webcam Security Detection

The Web SDK uses browser camera permission to analyze webcam video and provides face and phone detection results through a real-time callback. Your service can use these results to display warnings, block a screen, or implement its own security UI.

When integrated with MonitorDog event policies, your service can record and respond to situations such as:

• Phone detection
• No user visible
• Multiple faces detected

2. npm and Static Zip Installation

For standard frontend projects such as Vite, Webpack, Rspack, and Next.js client bundles, install the SDK from npm.

npm install @monitordog/detector

For JSP/WAR, static HTML, and script tag environments where npm or a bundler is difficult to use, install with the static zip. Extract the archive and place the entire monitordog/ folder under a static resource path to load the UMD script and required runtime assets together.

3. Local AI Inference in the Browser

The SDK includes encrypted detector ONNX models for input sizes 320, 416, and 640, along with ONNX Runtime WebAssembly files. The default auto setting selects a model size suited to the execution environment and falls back to smaller input sizes when memory is limited.

Only the key required to run the encrypted model is requested from the MonitorDog API, so browser detection can be configured without including the original model in deployment files.

4. Secure SDK Session Integration

Keep the Partner API Key only on your server, while the browser calls an SDK session token broker implemented by your service. This authenticates the SDK without exposing the Partner API Key in a JavaScript bundle, HTML, browser storage, or public environment variable.

After MPA navigation or refresh, the SDK session can be restored through the existing customer login session. Separating actual user login from page restoration prevents duplicate login events.

5. Clear Runtime Lifecycle

The SDK provides lifecycle APIs for initialization, login, starting and stopping detection, logout, and resource cleanup. SPAs can keep one detector instance and run detection only on required screens, while MPAs can restore the session for each page.

Before Installation

• Webcam detection requires browser camera permission and an HTTPS environment.
• The Partner API Key must only be used on your server.
• When using the static zip, deploy the entire monitordog/ folder rather than copying only the UMD script.
• Future changes and improvements will be announced in separate update notes.

Get started with the MonitorDog Web SDK

Choose the npm or static zip installation method that fits your project.

View Web SDK Installation Guide