Howen: How to display and play back historical streaming video

With Howen VSS, you can display real-time streaming of vehicles in GpsGate. Keep all your tracking in one place and get started with Howen: How to display live streaming video.

Once you've configured Howen in GpsGate, you're ready to view historical streams as well. Here, we'll describe how to embed the playback API of Howen VSS in a GpsGate custom panel. 

Overview

In this example, we are using Howen's video API to play back video stream using jQuery lib in the HTML. It will load the video stream for a specific date/time and play it back in an iframe. 

Download the full sample scripting package here. 

Setup

1. Download the sample HTML page and modify it with your Howen API URL. 
2. Host the HTML page on your On-site GpsGate server or any web server that your GpsGate system can reach.
3. Create a new custom field to save the Device ID from Howen VSS.  
4. Create the right-click script and send the stream URL as an HTML parameter in the iframe as it appears 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
)
}

Notes:

• When setting up the timer click script (contained in the HTML sample), ensure that the value of "YOUR_HOWEN_DEVICE_TAG" is the tag you have created in GGS that includes the User identified with the Howen hardware.
• Ensure the password is encrypted using an MD5 hash

CONGRATSSSS!! 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 video stream displays in the pop-up iframe.