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:
This guide assumes that the reader has a basic knowledge of the following technologies:
Playing recordings using the MP4 API, we support the following browsers:
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 Firefox.
1) Login using the REST API
2) Get cameras
3) Get recordings
1) Embed MP4 file in browser
Copy the mp4Https URL and paste it into 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.
Also add a canvas as shown on the code below, to allow you to create and save snapshots of the video footage. The styling used is to prevent the canvas from being unnecessarily displayed.
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:
|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
Add the HTML5 buttons to the document. You can style them with CSS and if required replace them with DIV's.
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:
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.