Embedding Video Media in Applications

Here are some common ways to embed video footage or thumbnails in your applications.

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/DEVICE_ID/DEVICE_MEDIA_REGION/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 DEVICE_ID and DEVICE_MEDIA_REGION for a camera, you can use the endpoint /api/camera/getMinimalCameraStateList to get a list of all cameras, and specifically in the response, you'll find the fields uuid and mediaRegion which correspond to DEVICE_ID and DEVICE_MEDIA_REGION, respectively.

To get a jpeg image at a specified time, you can use /api/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.

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

A simple React app example for embedding an iframe can be found here.

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.