Avatar
Tony
  • Updated

Custom panel example: real-time stream player

Now more and more devices are supporting real-time streaming with MDVR and Camera. You can view video, streams, and audio in GpsGate to keep your tracking all in one place. Multimedia telematics can be used to complement other fleet data.

GpsGate supports embedding custom panels in the workspace that show an HTML page playing video, stream, and audio. 

Since there are many different kinds of media services (and they output different media/stream formats), we'll change/modify the HTML page to adapt to different formats. 

Overview

In this example, we are using video js and Jquery lib in the HTML. It can auto-detect the stream format and decode them with different decoders. 

The HTML supports:

  • m3u8
  • mp4/m4p/m4v/mov
  • f4m
  • MPD
  • webm
  • youtube

Setup

  1. Host the HTML page on your on-site GpsGate server or any web server that your GpsGate system can reach. 
  2. Follow the steps of the guide to embed custom panels in the workspace to create the custom field and save the stream URL in the custom field. 
  3. Create the right-click script and send the stream URL as an HTML parameter in the iframe as below:
var url = user.getCustomFieldValue('VehicleCameraURL'); //Replace with your custom field name

url = 'http://YOUR_HTML_HOST_ADDRESS/video_player.html?stream=' + url ;

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

You're ready to start viewing!

In the application, right-click on the vehicle and choose the option you just created. The stream shows in the popup iframe. 

Screen_Recording_2021-11-23_at_12.03.42.gif

FAQ

Can I send a command to the device before starting the stream? The device should start the stream function when getting the command. 

Yes, you can add the command sending function in the click script before calling the iframe. 

Can I stop the stream by sending a command to the device when I close the iframe? 

Add a button on the HTML page and use jQuery or javascript to call GpsGate's REST API to send out the command to the device and stop the stream. Learn more about how to use REST API.

Can I use it to play back the history stream? 

If your media service supplied the playback with the parameter in the video URL, this is possible. Create your own HTML page and include the timestamp for the video recording. Create the click script logic to get the appropriate video file names and play it in the iframe. 

Related articles