Introduction

This guide describes how to play recorded MP4 video on a web <<glossary:application>> using the standard Eagle Eye Networks /media API and HTML5 web technology. The web <<glossary:application>> is able to play recorded video in the browser.

The Eagle Eye Networks Video API Platform supports the following video stream types:

<<glossary:main>> video - a high quality video stream using the H.264 video format
<<glossary:preview>> video - a lower quality video stream using the MJPEG video format

Live video and recorded video are both available for every <<glossary:camera>>.

Overview of protocols

The following table shows an overview of the supported media protocols for each stream and for live and recorded video.

Video type	Live video	Recorded video
Full video - HQ h264	FLV HLS MultiPart RTSP RTSP over TLS	FLV MP4 RTSP RTSP over TLS
Preview video - LQ JPEG	MultiPart RTSP RTSP over TLS	JPEG files RTSP RTSP over TLS

Prerequisites

A basic knowledge of the following is necessary to follow along with this guide:

HTML5 browser technology
HTML5 video element
CSS
JavaScript
Obtaining data from a REST API

🚧
Important
To play API V3 MP4 video the <<glossary:bridge>> must have a minimum firmware version of 3.9. You can check the <<glossary:bridge>> firmware version under Bridge Settings on the web application.
Please reach out to [email protected] to upgrade the firmware in case the mp4 video does not work.

Procedure

Logging in and getting the base URL

In order to use the API you need to login. For more information, see Logging in
Use the <<glossary:client settings>> API to retrieve your <<glossary:Base URL>> that will be used for the APIs. For more information, see API URLs.

Getting /cameras

Use the <<glossary:camera>>'s API to find the <<glossary:camera>> ID for which you want to watch recorded video.

Headers HTTP GET: https://<baseUrl>/api/v3.0/cameras
Accept application/json
Authorization: Bearer <access_token>

Response:
{
    "nextPageToken": "",
    "prevPageToken": "",
    "totalSize": 2,
    "results": [
        {
            "id": "123456789",
            "accountId": "111111111",
            "name": "Entrace Camera",
            "bridgeId": "444444"
        },
        {
            "id": "123456799",
            "accountId": "111111111",
            "name": "Warehouse cameras",
            "bridgeId": "444444"
        }
      ]
}

Getting the recorded video stream URL

Use /media to get a recorded video stream URL.

The following example shows how to get the MP4 stream for a <<glossary:camera>>:

Headers HTTP GET: https://<baseUrl>/api/v3.0/media?deviceId=123456789&type=main&mediaType=video&startTimestamp__gte=2022-08-08T07%3A59%3A22.946%2B00%3A00&include=rtspHttpsUrl,rtspUrl,mp4Url HTTP/1.1
Accept: application/json
Authorization: Bearer <access_token>

Response
{
    "nextPageToken": "MToxMDA6MTY1OTk1ODk5MDY1Mzot",
    "prevPageToken": "",
    "results": [
        {
            "type": "main",
            "deviceId": "123456789",
            "mediaType": "video",
            "startTimestamp": "2022-08-08T07:57:37.987+00:00",
            "endTimestamp": "2022-08-08T08:01:25.931+00:00",
            "mp4Url": "https://media.c013.eagleeyenetworks.com:443/media/recordings/123456789/recording.mp4?from=2022-08-08T07%3A57%3A37.987%2B00%3A00&till=2022-08-08T08%3A01%3A25.931%2B00%3A00"
        },
        {
            "type": "main",
            "deviceId": "123456789",
            "mediaType": "video",
            "startTimestamp": "2022-08-08T08:01:53.929+00:00",
            "endTimestamp": "2022-08-08T08:02:21.922+00:00",
            "mp4Url": "https://media.c013.eagleeyenetworks.com:443/media/recordings/123456789/recording.mp4?from=2022-08-08T08%3A01%3A53.929%2B00%3A00&till=2022-08-08T08%3A02%3A21.922%2B00%3A00"
        }
      ]
}

Setting the media cookie

Embed MP4 video clips from the API using the HTML5 Video element without any additional effort.

📘
Note
All the benefits of the built-in video player are available, including progressive download and the ability to customize the GUI.

Example:

<script>
    var requestOptions = {
      method: 'GET',
      headers: {
        "Authorization" : "Bearer <YOUR ACCESS_TOKEN>"
      },
      credentials: 'include'
    };

    fetch("<YOUR BASE URL>/api/v3.0/media/session", requestOptions)
      .then(response => response.json() )
      .then( body => fetch(body.url, requestOptions) )
      .then( response => console.log("response status", response.status ) )
      .catch(error => console.log('error', error));
</script>

Playing recorded video

To play the recorded video do the following:
1. Use the mp4Url from the previous step.
2. Pass along a valid <<glossary:access token>>.

The following example is a simple code for playing recorded video on the browser:

<!DOCTYPE html>
<html>
    <head>
    </head> 
    <body>
        <video src="https://media.c013.eagleeyenetworks.com:443/media/recordings/123456789/recording.mp4?from=2022-08-08T07%3A57%3A37.987%2B00%3A00&till=2022-08-08T08%3A01%3A25.931%2B00%3A00" controls type="video/mp4"></video>
    </body>
</html>

Learn more

Click for a recipe for a Recorded video on web (standard UI):

📽️

Recorded video on web (standard UI)

Open Recipe