Live video via HLS


This guide describes how to build a web application using standard Cameramanager API and HTML5 web technology. The web application is able to play live video in the browser.

In this guide is explained how to build a web application with the following features:

  • Live video
  • Fullscreen

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


This guide assumes that the reader has a basic knowledge of the following technologies:

  • HTML5 browser technology and knowledge of the HTML5 video element
  • Basic CSS knowledge to change the styling of a page
  • Basic Javascript knowledge
  • The reader is familiar with getting data from a REST API

Supported browsers

Playing recordings using the MP4 API, we support the following browsers:

  • Microsoft Edge 78+
  • Mozilla Firefox 42+
  • Google Chrome 35+
  • Google Chrome for Android 34+
  • Apple Safari for Mac 8+

The camera footage settings should be set to h.264 encoding, cameras recording to MJPEG and MPEG4 are not supported. The audio is not supported in the browser.

Retrieving cameras streams

1. Login using the REST API<username>&password=<password>
Accept application/json
Authorization <TOKEN>
    "access_token": "aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa:10003",
    "token_type": "bearer",
    "refresh_token": "aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa:10003",
    "expires_in": 43199,
    "scope": "write"

2.Get cameras
Authorization Bearer aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa:10003
Content-Type application/json
        "cameraId": 529111,
        "name": "demo cam",
        "deviceTypeId": 446,
        "zoneId": 91346,
        "accountId": 92578
        "cameraId": 531111,
        "name": "Panasonic WV-SPW312L (ONVIF)",
        "deviceTypeId": 176,
        "zoneId": 91346,
        "accountId": 92578

3. Get camera streams
Authorization Bearer aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa:10003
Content-Type application/json
        "streamId": {
            "value": 0
        "urls": {
            "rtsp": "rtsp://",
            "rtspHttp": "",
            "rtspHttps": "",
            "hlsHttp": "",
            "hlsHttps": "",
            "multipartHttp": "",
            "multipartHttps": "",
            "multipartaudioHttp": "",
            "multipartaudioHttps": "",
            "mjpegHttp": "",
            "mjpegHttps": ""

Playing live HLS streams

Select an HLS javascript player, such as HLS.js. Incorporate the player into your webpage and load the hlsHttps URL using the hls.loadSource() method. This will load the Eagle Eye CameraManager stream into your HLS player. A third party example player is available on

Example HLS.js player

<!DOCTYPE html>
        <script src=""></script>
        <video id="video" muted="muted"></video>
          if(Hls.isSupported()) {
            var video = document.getElementById('video');
            var hls = new Hls();
            hls.on(Hls.Events.MANIFEST_PARSED,function() {

In the browser, you will see the standard HTML5 video player. Due to the "controls" property in the element, it contains a play/pause button, time information, a slider to move forward/backward and the user can make the video fullscreen.

The HTML5 video element can be further tuned via the following attributes:

Property name Description
autoplay With the autoplay attribute, the video will start playing automatically
controls Defines whether the standard video controls are visible
width Defines the width of the video
height Defines the height of the video