Live video via HLS

Goal

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

Assumptions

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

  • HTML5 browser technology and knowledge of the HTML5 video element
  • Basic CSS knowledge to change the the styling of a page
  • Basic Javascript knowledge
  • 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 12+
  • Mozilla Firefox 42+
  • Google Chrome 35+
  • Google Chrome for Android 34+
  • Apple Safari for Mac 8+
  • Opera 20+
  • Microsoft Internet Explorer 9+

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

Retrieving cameras streams

1) Login using the REST API

2) Get cameras

3) Get camera streams

Playing live HLS streams 

Select a 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 https://video-dev.github.io/hls.js/demo/

Example HLS.js player

In the browser your 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/backwards 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