Embedding Video Media

Getting camera thumbnails or jpegs

All of our cameras upload a thumbnail that is a (mostly) current snapshot of what the camera sees. These thumbnails can be retrieved for a given camera using a GET request to the following url:

https://media.rhombussystems.com/media/{{cameraUuid}}/{{mediaRegion}}/snapshot.jpeg

As a note, all of our media.rhombusssytems.com endpoints use the same authentication as our main API, so be sure to include the authentication headers! To get the cameraUuid and mediaRegion for a camera, you can use the endpoint /camera/getMinimalCameraState to get a list of all cameras, and specifically in the response, you'll find the fields uuid and mediaRegion.

To get a jpeg image at a specified time, you can use /video/getExactFrameUri to generate a frame URI. Executing a GET request to the returned frame URI with the same authentication headers will get the requested frame directly from the camera. You can also request a cropped image if necessary.

Embedding shared streams as iframes

The most common and recommended way is to use iframes to embed our video player directly in the site. This comes with the added benefit that our camera events and analytics are pulled automatically into the player.

You will need to create shared streams for each camera that you want to embed. This can be done in the console, or from the API using the endpoint: /api/camera/createSharedLiveVideoStream. The response includes a url that you can add to an iframe like the following and embed in your application.

✍️

A React app example for embedding an iframe found here!

<iframe allow="fullscreen" frameborder="0" height="100%" width="100%" src="SHARED STREAM URL GOES HERE"></iframe>

📘

URL Parameters have been created for added control

We have enabled the use of parameters that can be in either the shared stream URL or the embedded iframe inline code.

All can either be true/false depending on your intended implementation.

disableautoplay - Enable or disable the video to autoplay upon loading

hideevents - Enable or disable the timeline and related events to show

realtime - Enable or disable real time streaming of video by default

showheader - Enable or disable the zoom & streaming buttons at the top of the video

showfooter - Enable or disable the camera name and timestamp at the bottom of the video

lowRes - Force low resolution on the video stream

performanceMode - Force performance mode allowing the player to use the device GPU

You will follow the structure of https://{{url}}/?{{variable}}=true&{{variable}}=false&{{variable}}=true

Example:

https://console.rhombussystems.com/share/live/ehrF58ABSj2VT8QzXh7GVA?disableautoplay=true&hideevents=true&realtime=true

Accessing the raw MPEG-DASH stream and using your own player

With API authentication, you can also access the raw MPEG-DASH stream which can be used to playback video in any standard player. In order to keep the API token outside a client browser, we recommend using a server middleman that acts as a proxy.

This also resolves any CORS issues that would arise from trying to access Rhombus media from non-Rhombus javascript. An example for how to stream video using dash.js is available here using a python flask server as a middleman.

Downloading VOD clips as .mp4's

An example of how to download VOD footage directly from a camera can be found here. This method allows you to specify the start time and duration to access footage.

Downloading an alert clip

An example of how to download a clip corresponding to an alert can be found here. This example uses our webhook mechanism to be triggered whenever an alert is created in our system. The webhook payload includes all of the information required to download the corresponding clip. If you are using our API to get alert details, e.g. /api/event/getPolicyAlertsV2, there are similarly named fields as the webhook payload that can be used to construct the media request.