Authentication

The Smarter AI uses a Tenant-based user authentication system. You need to get a tenant access token to access any Camera or Event for the Dashcam Player. There are two steps to obtain tenant access.

1. User Login

To obtain a token, make a POST request to https://api.anyconnect.com/v5/auth/login with the following request body:

{
  "authenticationType": "PASSWORD",
  "email": "<YOUR USERNAME HERE>",
  "password": "<YOUR PASSWORD HERE>"
}

You may receive a response like this:

{
    "accountId": "90d****f75",
    "email": "*****",
    "refreshToken": "eyJhbGciO****nYv4ZXNvg",
    "tenantAccessList": [
        {
            "tenantId": "****",
            "tenantName": "Smarter AI Development",
            "userRole": "END-USER"
        }
      //...
    ]
}

The field refreshToken is used for the next step during Tenant Login.

2. Tenant Login

In the login API response, you'll get refreshToken and a list of tenants at tenantAccessList.

• refreshToken – Token form login API response refreshToken
• tenantId – Pick one of the tenants from the tenantAccessList

You can now make a POST request to https://api.anyconnect.com/v5/auth/tenant-access with the following request body:

{
    "email": "<YOUR EMAIL HERE>",
    "tenantId": "<YOUR TENANT ID>",
    "token": "<REFRESH TOKEN FROM LOGIN API>"
}

You may receive a response like this:

{
    "accessToken": "eyJhbGciOiJSUzI1NiJ9*****g",
    "accessTokenExpiry": 16894*****9822,
    "refreshToken": "eyJhbGciOiJSUzI1NiJ9.******R4pg",
    "refreshTokenExpiry": 16*****769822,
    "userId": 3977*****33590,
    "sessionId": "efd65******a1e3befd6",
    "tenantId": "e218aacc-*****-e5966b1722dc"
}

The following information from this response is required:

• refreshToken – This will be our refresh-token for the dashcam-player component
• accessToken – This will be our access-token for the dashcam-player component

Dashcam Player Integration

Add the following imports for using the dashcam-player:

<!-- Imports for Dashcam Player -->
<link href="https://storage.googleapis.com/sai-web-libs/dashcam-player/2024.12.08/dashcam-player.min.css" rel="stylesheet" />
<script defer="defer" src="https://storage.googleapis.com/sai-web-libs/dashcam-player/2024.12.08/dashcam-player.min.js"></script>

Sample code for different types of playback:

<dashcam-player
    tenant-id="<TENANT ID>"
    refresh-token="<REFRESH TOKEN FROM TENANT ACCESS API>"
    access-token="<ACCESS TOKEN FROM TENANT ACCESS API>"
    event-id="<THE EVENT ID>"
    hide-header
    style="width: 100vw; height: 100vh"
/>

<dashcam-player
    tenant-id="<TENANT ID>"
    refresh-token="<REFRESH TOKEN FROM TENANT ACCESS API>"
    access-token="<ACCESS TOKEN FROM TENANT ACCESS API>"
    endpoint-id="<THE ENDPOINT ID OF THE CAMERA>"
    hide-header
		hide-widgets
    hide-map
    style="width: 100vw; height: 100vh"
/>

<dashcam-player
    tenant-id="<TENANT ID>"
    refresh-token="<REFRESH TOKEN FROM TENANT ACCESS API>"
    access-token="<ACCESS TOKEN FROM TENANT ACCESS API>"
    endpoint-id="<THE ENDPOINT ID OF THE CAMERA>"
		time="<THE START TIMESTAMP (UNIX)>"
    hide-header
    style="width: 100vw; height: 100vh"
/>

Dashcam Player Attributes

Attributes for different types of playback

Dashcam Player Interaction

You can interact with the component by calling methods or using getters and setters. An example:

const player = document.querySelector('dashcam-player');

player.addEventListener('load', () => {
  player.play(); // to start the playback
  player.pause(); // to pause the playback
  player.rewind(); // jump to start during event playback
  player.jumpForward(); // jump forward one unit
  player.jumpBackward(); // jump backward one unit

  console.log(player.currentTime); // get the current timestamp
  console.log(player.playbackSpeed); // get the playback speed
  player.playbackSpeed = 2.0; // set the playback speed  
});

Available Methods

Available Getters

Available Setters

Available Events

Sample Code

Download example from https://storage.googleapis.com/sai-web-libs/dashcam-player/example.zip
Extract the ZIP archive and open index.html

Live: https://storage.googleapis.com/sai-web-libs/dashcam-player/index.html

Open the index.html file or the above link in your browser. You will be directed to the Login and Tenant selection pages. After completing authentication you will find a page like this:

Select your playback mode, fill up the required input fields, and click Initialize Player to load the player.

Changelog

2024.50.02

• Bug Fixes: Hides imagers when no data is available.

2024.50.01

• Bug Fixes - Fixed streaming issue

v2024.49.02

• Bug Fixes - Bounding box font size bug

v2024.39.02

• Reports new property adjustment
• Bug Fixes

v2024.35.08

• Stream Duration and Paused Intervals are now part of the stream report.
• Bug Fixes

v2024.33.04

• Feature: Video downloads are restricted for the viewer role.

v2024.30.02

• Improvement: Video download reliability

v2024.26.11

• Improvement: When a video URL is not provided, the player will display "Video Unavailable."
• Bug fixes

v2024.12.08

• Improvement: Display when video decoding fails
• Bug fixes

v2024.08.03

• Improvement: Faster Event loading support (require to pass both refresh token and access token)
• Improvement: Updated Toast UI
• Improvement: Live-streaming stability
• Bug fixes

v2024.03.05

• Feature: Play events from SD-card
• Feature: New Bounding-box and Lane design
• Feature: Display 7 types of lanes
• Feature: Picture-in-picture map view over the video
• Feature: Audio recording playback
• Feature: Audio recording download
• Improvement: Select the main imager based on the trigger
• Improvement: Highlight the bounding box when the trigger was activated
• Improvement: Allow users to zoom in on the live-streaming map
• Bug fixes

v2023.43.03

• Feature: Exposed player stack view mode
• Bug Fix: No black screen for single imager

v2023.42.22

• Feature: Recent camera Events beside the player
• Feature: Movement and Speed widget on video
• Feature: Persistent user preference for player UI elements
• Improvement: Ability to open multiple player instances on the same page
• Bug fixes

v2023.40.14

• New getter: currentTime
• New feature: Save the current view as PDF.
• New feature: Imperial or SI unit based on the device region
• Bug fixes

v2023.39.12

• New feature: Live streaming and edge recording requests will wake up the camera to complete the request
• New feature: Display a larger preview of the main image on the bigger screen.
• Improvement: The map displays stop signs for the Stop Sign Violation Events.
• Improvement: We have enhanced the precision of the most recent camera's location.
• Bug fixes

v2023.36.03

• New feature: Options to hide subcomponents.
• New feature: Methods to control play, pause, seek, rewind, and playback speed.
• New feature: Introduces a Timeline browser.
• Improvement: Updates sensor widgets design standards and automatically display related labels in the Events.
• Improvement: Revamp the player map view.
• Improvement: Redesign the player information area.
• Improvement: Adaptable player sizing for all screen sizes.
• Bug fixes.

v2023.32.02

• New feature: AI Labels mapping for bounding boxes.
• Improvement: Display stacked imagers on the small screen.
• Bug fixes for Live streaming.

v2023.27.02

• Initial version with basic capabilities for playing live streaming, recording, and events.