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 type	Live video	Recorded video
Full video - HQ h264	FLV HLS MultiPart RTSP RTSP over TLS	FLV HLS MP4 (Deprecated) 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 HLS 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

In order to use the API you need to login. For more information, see Logging in
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

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

Use /media to get a recorded video stream URL.

The following example shows how to get the HLS stream for a camera:

curl --request GET \
     --url 'https://api.cxxx.eagleeyenetworks.com/api/v3.0/media?deviceId=123456789&type=main&mediaType=video&startTimestamp__gte=2025-12-15T17%3A47%3A01.146%2B00%3A00&include=hlsUrl,rtspUrl' \
     --header 'accept: application/json'

const url = 'https://api.cxxx.eagleeyenetworks.com/api/v3.0/media?deviceId=123456789&type=main&mediaType=video&startTimestamp__gte=2025-12-15T17%3A47%3A01.146%2B00%3A00&include=hlsUrl,rtspUrl';
const options = {method: 'GET', headers: {accept: 'application/json'}};

fetch(url, options)
  .then(res => res.json())
  .then(json => console.log(json))
  .catch(err => console.error(err));

{
    "nextPageToken": "",
    "prevPageToken": "",
    "results": [
        {
            "type": "main",
            "deviceId": "123456789",
            "mediaType": "video",
            "startTimestamp": "2025-12-15T17:46:17.181+00:00",
            "endTimestamp": "2025-12-15T17:47:01.146+00:00",
            "rtspUrl": "rtsp://rtsp.c030.eagleeyenetworks.com:554/media/streams/main/rtsp?esn=123456789&from=2025-12-15T17:46:17.181%2B00:00&till=2025-12-15T17:47:01.146%2B00:00&stream_session=a5f23c20-c6a9-4def-89a1-c8e9188cc1a1",
            "hlsUrl": "https://media.c030.eagleeyenetworks.com:443/media/recordings/main/hls/playlist.m3u8?deviceId=123456789&from=2025-12-15T17:46:17.181%2B00:00&till=2025-12-15T17:47:01.146%2B00:00&stream_session=a5f23c20-c6a9-4def-89a1-c8e9188cc1a1"
        }
    ]
}

Playing recorded video

To play the recorded video do the following:
1. Use the hlsUrl from the previous step.
2. Include a valid access token in the auth header.

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

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>HLS Stream</title>
    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
  </head>
  <body>
    <video id="v" controls playsinline></video>

    <script>
      const url =
        "https://media.c030.eagleeyenetworks.com:443/media/recordings/main/hls/playlist.m3u8?deviceId=123456789&from=2025-12-15T17:46:17.181%2B00:00&till=2025-12-15T17:47:01.146%2B00:00&stream_session=a5f23c20-c6a9-4def-89a1-c8e9188cc1a1";

      const token = "Your Access Token"; // EEN OAuth access token
      const video = document.getElementById("v");

      if (video.canPlayType("application/vnd.apple.mpegurl")) {
        // Safari native HLS DOES NOT let you set custom headers on the <video> requests.
        // Use cookies, signed URLs, or a proxy if you must use headers on Safari.
        video.src = url;
      } else if (Hls.isSupported()) {
        const hls = new Hls({
          fetchSetup: (context, init) => {
            init.headers = {
              ...(init.headers || {}),
              Authorization: `Bearer ${token}`,
            };
            return new Request(context.url, init);
          },
        });

        hls.loadSource(url);
        hls.attachMedia(video);
      } else {
        alert("HLS not supported in this browser");
      }
    </script>
  </body>
</html>