Authentication

The Geotab Video Platform uses a JWT-based authentication system. Use your MyG credentials to make a POST request to https://api.smarterai.com/v5/auth/tenant-access-myg with the following request body to obtain the JWT:

{
  "database": "string",  //MyG DB name
  "myGUrl": "string",    //MyG DB URL
  "sessionId": "string", //MyG Session ID
  "username": "string"   //MyG Username
}

In response, you will receive a JWT token

{
  "accessToken": "eyJhbGciOiJSUzI1NiJ9.eyJ0b...lc0yyFmrjYxFPdhd7oQ",
  "tenantId": "f670d71d-9356-4c59-9809-7bb35d641c79"
}

Pass accessToken as the token attribute and tenantId as the tenant-id attribute to the Video Player.

# Video Player Integration

Add library in your project

For JS based projects, import the library CSS and JS as follows.

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

For JSP based projects, import React, React DOM, and Babel along with the library CSS and JS as follows. See Sample Code Section for a complete JSP based example.

<!-- Load React and ReactDOM from a CDN -->
<script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>
<!-- Babel for JSX transformation -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<!-- Imports for Dashcam Player -->
<link href="https://storage.googleapis.com/sai-web-libs/dashcam-player/2025.08.02/dashcam-player.min.css" rel="stylesheet" />
<script defer="defer" src="https://storage.googleapis.com/sai-web-libs/dashcam-player/2025.08.02/dashcam-player.min.js"></script>

Example codes for Event playback, Live-Streaming and Recording playback

Use token field instead of refresh-token or access-token if you authenticate using MyG User Session.

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

<dashcam-player
  tenant-id="<TENANT ID>"
  token="<ACCESS TOKEN>"
  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>"
  token="<ACCESS TOKEN>"
  endpoint-id="<THE ENDPOINT ID OF THE CAMERA>"
  time="<THE START TIMESTAMP (UNIX)>"
  hide-header
  style="width: 100vw; height: 100vh"
/>

Video Player Attributes

Properties	Description
tenant-id	The Tenant ID from the tenant-access-myg API.
token	The access token from the tenant-access-myg API.
event-id	The ID of the Event for Event playback.
endpoint-id	The Endpoint ID of the Camera for Live or Recording playback.
time	A UNIX timestamp to start the Recording playback.
hide-widgets	To hide the Player Widgets.
hide-map	To hide the Player Map.
hide-header	To hide the information bar containing the Camera name, Trigger name, etc.
hide-controls	To hide the player controls.
hide-time-browser	To hide the day-hour-based timeline browser.
hide-bounding-boxes	To hide the bounding boxes
disable-auto-wake	To disable automatic waking up from the parking mode
hide-speed-widget	To hide the speed widget from the video
show-event-list	To display a list of related events beside the player
stacked-view	To configure the video player to display imagers in stack view mode.
force-thumbnail-view	To configure the video player to display imagers in thumbnail view mode.
force-split-view	To configure the video player to display imagers in split view mode.
language	To configure the application language (e.g., `language="de"`).
is-metric	To configure the application to use metric units (e.g., `is-metric=true`).
timezone	To configure the application timezone (e.g.,`timezone="Asia/Dubai"`).

Attributes for different types of playback

Action	tenant-id	token	eventId	endpoint-id	time
Live Streaming	Required	Required	Required	Exclude	Exclude
Event Playback	Required	Required	Exclude	Required	Exclude
Recording Playback	Required	Required	Required	Exclude	Required

Video 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

Name	Description
`pause()`	To pause the playback
`play()`	To start the playback after pausing it.
`rewind()`	To jump to the start for the event playback.
`jumpForward()`	To advance play time by one unit time: `frameRate * playbackSpeed`
`jumpBackward()`	To seek backward by one unit time: `frameRate * playbackSpeed`
`reload()`	To unmount and mount the player from scratch

Available Getters

Name	Type	Description
tenantId	`string`	The Tenant ID from the tenant-access-myg API..
token	`string`	The token from the tenant-access-myg API.
eventId	`string`	The Event ID.
endpointId	`number`	The Endpoint ID.
time	`number`	A timestamp in UNIX for Recording playback.
hideWidgets	`boolean`	To hide the Player widgets.
hideMap	`boolean`	To hide the Player map.
hideHeader	`boolean`	To hide the header information with the Camera name.
hideControls	`boolean`	To hide the player controls.
hideTimeBrowser	`boolean`	To hide the day-hour-based timeline browser.
hideBoundingBox	`boolean`	To hide the bounding boxes.
playbackSpeed	`number`	To get the current playback speed.
disableWakeUp	`number`	To disable automatic waking up from the parking mode
hideSpeedWidget	`boolean`	To hide the speed widget from the video
showEventList	`boolean`	To display a list of related events beside the player
currentTime	`number`	To get the current player timestamp in UNIX
forceStackedView	`boolean`	To retrieve the current status of the player's stack view mode.
forceThumbnailView	`boolean`	To retrieve the current status of the player's thumbnail view mode.
forceSplitView	`boolean`	To retrieve the current status of the player's split view mode.
isPlaying	`boolean`	To retrieve the current playing status of the player.

Available Setters

Name	Type	Description
tenantId	`string`	The Tenant ID from the tenant-access-myg API.
token	`string`	The access token from the tenant-access-myg API.
eventId	`string`	The Event ID.
endpointId	`number`	The Endpoint ID.
time	`number`	A timestamp in UNIX for Recording playback.
hideWidgets	`boolean`	To hide the Player widgets.
hideMap	`boolean`	To hide the Player map.
hideHeader	`boolean`	To hide the header information with the Camera name.
hideControls	`boolean`	To hide the player controls.
hideTimeBrowser	`boolean`	To hide the day-hour-based timeline browser.
hideBoundingBox	`boolean`	To hide the bounding boxes.
playbackSpeed	`number`	To get the current playback speed.
disableWakeUp	`number`	To disable automatic waking up from the parking mode
hideSpeedWidget	`boolean`	To hide the speed widget from the video
showEventList	`boolean`	To display a list of related events beside the player
forceStackedView	`boolean`	To set the current status of the player's stack view mode.
forceThumbnailView	`boolean`	To set the current status of the player's thumbnail view mode.
forceSplitView	`boolean`	To set the current status of the player's split view mode.
isPlaying	`boolean`	To set the player playing state.

Available Events

Name	Description
`load`	It gets triggered after the data is loaded and ready to be played.
`event-click`	When an event is clicked on the event list sidebar. The `data` property has the Event ID.
`camera-click`	When Camera details page redirection is requested. The `data` property has the Endpoint ID.
`event-loaded`	When all the necessary API calls are completed, this will be triggered.
`driver-assign`	This is triggered when a driver is assigned to an event. The `data` property contains the Driver ID.

Sample Code

Download example from Example.ZIP Extract the ZIP archive and open index.html

Download JSP based example from Example-JSP.ZIP

Live: https://storage.googleapis.com/sai-web-libs/dashcam-player/v4/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

2026.20.06

Pro camera auxiliary imager split for live preview and recording.
New settings for language, units, and timezone exposed.
Bug Fixes

2026.15.10

Bug fix: Handled startup gaps in footage gracefully when initial chunks are missing.

2026.12.04

Bug fix: Stopped JWT renewal for MyG User login.

2026.07.00

Live streaming improvement.
Enhanced Live streaming reporting.
Partner events playback issue fixed.
Applied fix for downloads.

2025.51.00

Replaced SignalR with MQTT for live streaming and recording retrieval.
Modernized UI design.
Bug Fixes and Improvements.

2025.40.07

Bug Fix: Resolved live streaming player loading issue in stack view.
Improvement: Restricted live streaming by checking feature access.

2025.35.01

Fix: Driver assignment to trips for ongoing trips.
Bug Fixes.

2025.31.10

Feature: Added driver assignment to trips.
Exposed new events related to driver assignment.
Improvements: Optimized video playback and timeline performance.
Bug Fixes.

2025.28.03

Exposed new setter and getter for the player's playing status.
Improvements: Enhanced modal view handling for nested components.

2025.28.01

Improvements: Frame view toggle added
Improvements: Play button background UI applied and animation added to widget selection button.
Improvements: Updated video encoding logic and playback imporovement.
Improvements: Show current time on progress bar hover.

2025.22.05

Bug fix: Coaching Marking Issue

2025.20.02 (based on 2024.50.01)

Bug fix: Download modal displayed correctly.
Improvements: Support for using the player correctly within a modal.
Improvements: Incorporated automatic retry on codec loading error.

2025.18.03

Bug fix: Access older recording playbacks up to 30 days.
Improvements: Replaced deprecated APIs.

2025.18.01 (based on 2024.50.01)

Bug fix: Access older recording playbacks up to 30 days.
Improvements: Replaced deprecated APIs.

2025.14.03

Bug Fix: Configured live streaming connection timeout as perthe scheme
Bug Fix: The Multi Imager space issue was fixed while dynamically collapsing and expanding the thumbnail.
Thumbnail mode multi-imager support.

2025.08.02

Bug Fix: Fixed the issue where the event trigger name was undefined
Exposed new event event-loadedfor third-party use.

2025.08.02

Bug Fix: Handling video and sensor data download cancellation properly.

2025.07.11

Feature: Persistent viewing mode.
Feature: Meaningful naming for downloaded files and folders.
Improvement: Enhanced video and frame extraction for split-view mode.
Improvement: Optimized video decoding to reduce errors.
Improvement: Revamped event timeline UI
Improvement: Enhanced play/pause animation for smoother transitions.
Bug Fix: Fixed bounding box issue for single image in split-view mode.
Bug Fixes

2025.05.07

Feature: Resize video thumbnails, collapse or expand them.
Feature: New widget to visualize car movement.
Feature: Trip information in the Event playback.
Feature: Side-by-side split view.
Feature: New video seek bar for Event player. Drag and push up for frame-by-frame view.
Improvement: Grayscale map widget for better aesthetics.
Improvement: Play/Pause using the spacebar.

2024.50.02

Bug Fix: Hides imagers when no data is available.

2024.50.01

Bug Fix - Fixed streaming issue

v2024.49.02

Bug Fix - 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.