Custom panel example: send commands from iframe to the asset to start & stop stream

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 for more. Multimedia telematics can be used to complement other fleet data. Want to call a 3rd party API to play back the stream? Check out the custom panel example: play back stream with 3rd party API guide. 

To save the data usage, sometimes the stream function is off on the tracker and it must be started when needed. Could the user use the iframe to send the command to the tracker to start & stop the stream? Yes, you can make it happen with a GpsGate custom panel. 

Read on to learn how to embed the command API in a GpsGate custom panel. 

Overview

In this example, we will call the GpsGate command API to send the command to the tracker.  We are using the latest protocol of Queclink as an example to show how the command gets sent on iframe. 

 

Setup

  1. Download the sample HTML page and modify it with your host address. Read which URL to use for sending a command with API
  2. Host the HTML page on your GpsGate On-site server or any web server where your GpsGate system can reach. 
  3. Follow the steps of the embed custom panels in the workspace guide to create the custom field and save the stream URL in the custom field. 
  4. Add a new custom field "DeviceID" to save the ID of the tracker on this asset. The DeviceID is the ID of the tracker. Read how to obtain the deviceID from a Tag of users.
  5. You can generate the token and put it on the click script. Alternatively, you can add jQuery in the html page to generate the token when running the script. Read how to obtain the token
  6. Add the command template for starting and stopping the stream as the protocol. Read how to create a command template.
  7. Create the right-click script and send the stream URL as a Html parameter in the iframe as below:

var user_id = user.id;

var deviceid = user.getCustomFieldValue("DeviceID");

var token = "YOUR_TOKEN"; //Your account token or you can skip it and generate on the html page

var url = user.getCustomFieldValue('VehicleCameraURL'); //Replace with your custom field name

url = 'http://YOUR_HOST_ADDRESS/video_command.html?userid=' + user_id +'&token=' + token + '&deviceid=' + deviceid + '&stream=' + url ;

if (url != null) {
ui.iframe(
'ShowCameraWindow',
'Camera for ' + user.name,
url,20,30,800,400
)
}

You're ready to start viewing!

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

Send the command to the asset with the buttons. The stream shows/stops in the pop-up iframe. 

Screenshot_2022-04-13_at_12.16.32.png

FAQ

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

Yes, you can generate the token in the click script and send it to the video player HTML with parameter. Or you can generate the token in the HTML page with an ajax script. 

How I can check if the commands have been sent out? 

You can use the device manager to check if the commands have been sent to the asset. For more details, please check here