Developers

Appearance

VORTEX Streaming ​

vortex-streaming is a Web Component that embeds a VORTEX live/playback video stream into any web page.

Required props: deviceId, apiToken

Demo ​

Quick Start ​

1. Include the SDK script

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

2. Add the component

html
<vortex-streaming
  api-token="${API_TOKEN}"
  device-id="${DEVICE_ID}"
  auto-play="true"
></vortex-streaming>

About Web Components

Web Components are a set of web platform APIs that allow you to create reusable custom elements in web pages and applications. See the MDN Web Components documentation for details.

SDK URLs ​

Production (Released) ​

Development ​

DEV — Under active development. APIs may change.

Assets ​

To render the loading spinner and other icons, download the sprite.svg file provided below and place it in the root directory of your project.

API Reference ​

Props ​

PropTypeDescriptionRequired
deviceIdStringThe ID of the device.Yes
apiTokenStringThe API token used for authentication.Yes
deviceTypeStringDevice type. Possible values: camera (default), nvrchannel for NVR camera.No
autoPlayBooleanWhether the stream should start playing automatically. For manual playback control, set this to false before attaching the component to the DOM.No
mutedBooleanWhether audio is muted.No
volumeNumberVolume level, 0–100.No
apiDomainStringAPI domain override (for development). DEVNo
supportWebCodecsBooleanEnable WebCodecs-based decoding when supported by the browser. DEVNo

Events ​

TypeDescription
playTriggered when the streaming block starts playing.
stopTriggered when the streaming block stops playing.
errorTriggered when an error occurs. The error detail is available on the event.
notifyGeneral notifications from the player (e.g., timestamps or fisheye info).

Methods ​

Playback ​

NameParametersDescription
playtimestamp?: Number (ms)Starts live (no timestamp) or playback at a specific UTC timestamp.
pause—Pauses playback.
resume—Resumes playback.
stop—Stops the current stream.
forwardseconds: NumberSeeks forward by N seconds. Playback mode only.
backwardseconds: NumberSeeks backward by N seconds. Allowed in live mode (transitions to playback).

Audio ​

NameParametersDescription
setVolumevolume: Number (0–100)Sets the volume immediately.
mute—Mutes audio.
unmute—Unmutes audio.

Visual ​

NameParametersDescription
enableDigitalZoomenable: BooleanEnables or disables digital zoom.
setDewarpTypetype: StringSets the dewarp type. Possible values: '1O' (off), '1R', '1P'.
setVcaSettingssettings: ObjectConfigures VCA (Video Content Analysis) display. See VCA Settings.

VCA Settings ​

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

SettingTypeDescription
showPeopleBoxBooleanShow/hide bounding boxes for detected people.
showVehicleBoxBooleanShow/hide bounding boxes for detected vehicles.
displayPeopleTypeBooleanDisplay people type labels (requires showPeopleBox to be true).
displayNameBooleanDisplay name labels (requires showPeopleBox to be true).
displayVehicleTypeBooleanDisplay vehicle type labels (requires showVehicleBox to be true).

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

Full 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>