Guides
Getting startedVisit een.comMy Application/Login

Live video on web

Suggest Edits

Introduction

This guide describes how to build a web application to play live video in the browser using the standard Eagle Eye Networks API and HTML5 web technology.

Eagle Eye Networks Video API Platform support 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

Both streams are available for live and recorded video for every camera.

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

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

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

📘

Note

You can request a list of available video feeds via the API call shown below. All supported cameras can provide both the main and preview video feeds. The main video is the full h.264 high quality video stream and the preview video is a JPEG-based lower quality video steam. There are multiple URLs available to stream the actual live video for each of the feeds:

  • hlsUrl - A streaming URL to play video using the HTTP Live Streaming (HLS) video protocol.
  • multipartUrl - A streaming URL to transfer video using multi-part data parts as defined in RFC1341.
  1. Use the following code to get cameras from the API:
Headers HTTP GET: https://<baseUrl>/api/v3.0/feeds?deviceId=123456789&include=hlsUrl,multipartUrl
Accept application/json
Authorization: Bearer <access_token>
 
Response:
{
    "nextPageToken": "",
    "prevPageToken": "",
    "results": [
        {
            "id": "123456789-main",
            "type": "main",
            "deviceId": "123456789",
            "mediaType": "video",
            "hlsUrl": "https://media.fra1p1.eagleeyenetworks.com/media/streams/main/hls/getPlaylist?esn=123456789&stream_session=11111",
            "multipartUrl": "https://media.fra1p1.eagleeyenetworks.com/media/streams/main/multipart?esn=123456789&stream_session=11111"
        },
        {
            "id": "123456789-preview",
            "type": "preview",
            "deviceId": "123456789",
            "mediaType": "video",
            "multipartUrl": "https://media.fra1p1.eagleeyenetworks.com/media/streams/preview/multipart?esn=123456789&stream_session=11111"
        }
    ]
}

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 the live preview video

  1. To play live video, copy the multipartUrl for the preview video stream.

🚧

Important

Make sure to set the media cookies, otherwise the video stream will not be authenticated.

The preview video URL can be displayed in the browser via the <img> HTML tag:

<!DOCTYPE html>
<html>
    <head>
        <title>Live preview video</title> 
    </head> 
    <body>
        <img src="https://media.fra1p1.eagleeyenetworks.com/media/streams/preview/multipart?esn=123456789&stream_session=11111" />
    </body>
</html>

Playing the live main video

To play the live main video, choose from the following options:

  • Use the multipartUrl.

There is an SDK for NPM projects that can be used for multiPart live viewing. For more information, see Live Video Web SDK.

  • Use the hlsUrl.

📘

Note

This guide uses HLS (HTTP Live Streaming) for live streaming. HLS can be used on the majority of browsers without plugins (such as Adobe Flash). The only downside is that HLS live video streams have a standard delay of 6 - 8 seconds. Depending on the network, this delay can increase.

  1. Select an HLS javascript player, such as HLS.js.
  2. Incorporate the player into your webpage, and load the hlsUrl URL using the hls.loadSource() method.

Result: This loads the Eagle Eye Video API Platform HLS stream into your HLS player.

A third-party example player is available on https://video-dev.github.io/hls.js/demo/.

<!DOCTYPE html>
<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/hls.js@1"></script>
    </head> 
    <body>
        <video id="video" muted="muted"></video>
                
        <script>
          var video = document.getElementById('video');
          var videoSrc = 'https://media.fra1p1.eagleeyenetworks.com/media/streams/main/hls/getPlaylist?esn=123456789&stream_session=11111';
          if (Hls.isSupported()) {
          	var hls = new Hls({
              xhrSetup: xhr => {
                xhr.setRequestHeader('Authorization', 'Bearer <YOUR ACCESS_TOKEN>');
              }
            });
            hls.loadSource(videoSrc);
            hls.attachMedia(video);
          }
          else if (video.canPlayType('application/vnd.apple.mpegurl')) {
            video.src = videoSrc;
          }
        </script>        
    </body>
</html>

Updated over 1 year ago