VORTEX Streaming

This is the documentation for the vortex-streaming web component.
It requires the following props: deviceId, apiToken.

Web Components

are a set of web platform APIs that allow you to create reusable custom elements in web pages and applications.
To learn more about Web Components, you can refer to the MDN Web Components documentation.

Lastest SDK

Released

https://portal.vortexcloud.com/vortex-streaming.min.js

In Development

DEV The following release is currently under development.

https://portal.dev.vortexcloud.com/vortex-streaming.min.js

Info: To incorporate the loading icon and other icons within the web component, please download the sprite.svg file provided below and place it in the root directory of your project.

Usage

Reference in header

html

<script defer src="https://portal.vortexcloud.com/vortex-streaming.min.js"></script>

Props

Prop	Type	Description	Required
deviceId	String	The ID of the device.	Yes
deviceType	String	The type of the device. Possible values: `nvrchannel` for NVR camera and `camera` for camera. Defaults to `camera` if not specified.	No
apiToken	String	The API token used for authentication.	Yes
autoPlay	Boolean	Determines if the streaming block should start playing automatically. For manual playback control, ensure autoPlay is set to false before adding the component to the DOM.	No
muted	Boolean	Determines if the audio of the streaming block should be muted.	No
volume	Number	Sets the volume level of the streaming block. Accepts values between 0-100.	No
apiDomain	String	The API domain name for development purposes, if needed. `DEV`	No
supportWebCodecs	Boolean	Enable WebCodecs-based decoding when supported by the browser. `DEV`	No

Events

Type	Description
play	Triggered when the streaming block starts playing.
stop	Triggered when the streaming block stops playing.
error	Triggered when an error occurs. The error detail is available on the event.
notify	General notifications from the player (e.g., timestamps or fisheye info).

Methods

Name	Parameters	Description
play	timestamp: Number (Optional, ms)	Starts live (no timestamp) or playback at a specific timestamp (UTC ms).
pause		Pauses the playback of the streaming content.
resume		Resumes the playback of the streaming content.
stop		Stops the current stream.
forward	seconds: Number	Seeks forward by N seconds. Intended for playback mode.
backward	seconds: Number	Seeks backward by N seconds. Intended for playback mode; allowed in live mode (transitions to playback).
setVolume	volume: Number (0-100)	Sets the volume immediately.
mute		Mutes audio.
unmute		Unmutes audio.
enableDigitalZoom	enable: Boolean	Enables or disables digital zoom feature.
setDewarpType	type: String	Sets the dewarp type. Possible values: `'1O'` (off), `'1P'`, `'2P'`, `'1R'`, `'2R'`, `'1R2'`, `'4R'`.
setVcaSettings	settings: Object	Configures VCA (Video Content Analysis) display settings. See VCA Settings section below.

VCA Settings

The setVcaSettings method accepts an object with the following supported properties:

Setting	Type	Description
showPeopleBox	Boolean	Show/hide bounding boxes for detected people.
showVehicleBox	Boolean	Show/hide bounding boxes for detected vehicles.
displayPeopleType	Boolean	Display people type labels (requires `showPeopleBox` to be true).
displayName	Boolean	Display name labels (requires `showPeopleBox` to be true).
displayVehicleType	Boolean	Display vehicle type labels (requires `showVehicleBox` to be true).

Note: Only the settings listed above are supported. Any other keys will be ignored.

Example

html

<head>
  <script defer src="https://portal.dev.vortexcloud.com/vortex-streaming.min.js"></script>
</head>
<body>
  <vortex-streaming
    api-token="${API_TOKEN}"
    device-id="${DEVICE_ID}"
    auto-play="${AUTO_PLAY}"
    volume="50"
    muted
    support-web-codecs="false"
  ></vortex-streaming>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const element = document.querySelector('vortex-streaming');
      // Add event listener
      element.addEventListener('play', () => {
        console.log('streaming started');
      });
      element.addEventListener('error', (e) => {
        console.error('streaming error', e.detail);
      });

      // Liveview will automatically start by default (auto-play is true by default)

      // Set auto-play to false before attaching component to DOM, specify a timestamp in ms, and call the play function to play the playback
      const timestamp = 1697506106288;
      element._instance.exposed.play(timestamp);

      // Playback controls (see Methods section for available playback controls)
      element._instance.exposed.pause();
      element._instance.exposed.resume();

      // Digital Zoom control
      element._instance.exposed.enableDigitalZoom(true);  // Enable
      element._instance.exposed.enableDigitalZoom(false); // Disable

      // Dewarp control
      element._instance.exposed.setDewarpType('1P'); // Enable dewarp with 1P mode
      element._instance.exposed.setDewarpType('1O'); // Disable dewarp

      // VCA control - Enable all VCA features
      element._instance.exposed.setVcaSettings({
        showPeopleBox: true,
        showVehicleBox: true,
        displayPeopleType: true,
        displayVehicleType: true,
      });

      // VCA control - Enable only specific features
      element._instance.exposed.setVcaSettings({
        showPeopleBox: true,
        displayPeopleType: true,
      });

      // VCA control - Disable all VCA features
      element._instance.exposed.setVcaSettings({
        showPeopleBox: false,
        showVehicleBox: false,
        displayPeopleType: false,
        displayVehicleType: false,
      });
    });
  </script>
</body>

VORTEX Streaming ​

Lastest SDK ​

Released ​

In Development ​

Usage ​

Reference in header ​

Props ​

Events ​

Methods ​

VCA Settings ​

Example ​