Custom panel example: play back stream with 3rd party API

You can view video, streams, and audio in GpsGate to keep your tracking all in one place (see the custom panel example: real-time stream player guide). Multimedia telematics can be used to complement other fleet data.

There are many video streaming suppliers who can supply the video playback API. With the API, the user can search and play the stream on the specific date and time. 

Here, we'll describe how to embed the playback API in a GpsGate custom panel. 

Overview

In this example, we are using a 3rd party video API to play back the stream using jQuery lib in the HTML. It can load the stream for the specific date/time and play it in the iframe. 

 

Setup

  1. Download the sample HTML page and modify with your video stream supplier's API URL. 
  2. Host the HTML page on your On-site GpsGate server or any web server that your GpsGate system can reach. 
  3. Follow the steps of the guide from embed custom panels in the workspace to create the custom field and save the stream URL in the custom field. 
  4. Create a new custom field to save the Device ID defined on the 3rd party video supplier. 
  5. Create the right-click script and send the stream URL as a Html parameter in the iframe as below:
var url = "YOUR_API_LOGIN_URL";
var body = '{"username":"YOUR_API_USERNAME", "password":"YOUR_API_PASSWORD"}';
var ctype = 'application/json';
var head = 'Accept: application/json';

http.POST(url,ctype,head,body);
var result = JSON.parse(http.response);
var device = user.getCustomFieldValue('DeviceID');

var url = 'http://Your_Host_Address/playback.html?device=' + device + '&apikey=' + result.data.token;

if (url != null) {
ui.iframe(
'ShowPlayBackWindow',
'PlayBack for ' + user.name,
url,40,30,1000,800
)
}

You're ready to start viewing!

In the application, right click on the vehicle and choose the option you just created.

Choose the date/time you would like to play back. The stream shows in the pop-up iframe. 

Screenshot_2022-04-13_at_11.39.12.png

FAQ

Do I need to get a token for requesting the API?

If your video supplier needs to have a token to query the history stream, you can add the jQuery script on the page and get the token first. 

How many days/hours I can play back? 

That depends on how your video supplier stores the video and how long they store them for. 

Can I play back the files that are stored on the file server?

You can use the custom panel example: real-time stream player guide to play back the video files as requested.