Playing recordings

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 recordings in the browser.

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

  • Playing recordings 
    • Play/pause
    • Rewind
    • Fast forward (speedplay X times faster)
    • Time scrolling (seeking in video timeline)
  • Recordings Multi view

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 30+
  • Google Chrome 40+
  • Apple Safari 7+
  • Opera 40+
  • 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 recordings

1) Login using the REST API

2) Get cameras

3) Get recordings

Playing recordings 

1) Embed MP4 file in browser

Copy the mp4Https URL and paste it in the SRC tag. To retrieve the MP4 recording one must supply an access token with the mandatory parameter 'access_token'. Besides the token one can optionally add a 'from' and 'till' parameter to limit the size (in time) of the recording. The 'from' and 'till' parameters need to be supplied in ISO 8601 format. Both 'from' and 'till' parameters need to be within the start- and endtime of the recording otherwise an error will be returned.

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

2) Use custom buttons

The standard buttons are limited in terms of styling. The HTML5 video element allows you to create custom elements using Javascript and CSS. You can use standard HTML buttons for player control and style them the way you want.

Add the HTML5 buttons to the document. You can style them with CSS and if required replace them with DIV's.

Video controls

Add the following javascript to make the HTML5 buttons work: 

Javascript code for the video controls

You can remove the standard HTML5 video controls by removing the "controls" attribute of the video element. Now when showing the page in the browser you will see the following: 

Recordings multi view

You can create a multi view option by copying and loading the video tag multiple times. A player will appear for every video tag in the document.