Guides
Getting startedVisit een.comMy Application/Login

Recorded video on web

Suggest Edits

Introduction

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

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

  • main video - a high quality video stream using the H.264 video format
  • preview video - a lower quality video stream using the MJPEG video format

Live video and recorded video are both available for every 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 typeLive videoRecorded video
Full video - HQ h264 FLV
HLS
MultiPart
RTSP
RTSP over TLS		FLV
MP4
RTSP
RTSP over TLS
Preview video - LQ JPEGMultiPart
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 bridge must have a minimum firmware version of 3.9. You can check the 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

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

Getting /cameras

  1. Use the camera's API to find the 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

  1. Use /media to get a recorded video stream URL.

The following example shows how to get the MP4 stream for a 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

  1. 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

  1. To play the recorded video do the following:
    1. Use the mp4Url from the previous step.
    2. Pass along a valid 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 in WebApp
Open Recipe

Updated 8 months ago