This package is an example on how to implement a web browser application with live video streams. It uses WebRTC if available and Adobe Flash otherwise.
The code consists of the following parts:
The Cameramanager Web Streamer and WebRTC streamer form the web browser live streaming SDK.
This application is tested on the latest browser versions for Chrome, Firefox and Opera. It also works on Android platforms with the latest Chrome and Opera browsers. Flash is tested on Internet Explorer 11 and Safari.
Microsoft Edge has a different implementation called ORTC. This has recently been released, but does not yet work and therefore we use Flash for now. We expect WebRTC to work later this year.
Apple is also working on a WebRTC implementation for Safari, but this is not yet released. Also for Safari we therefore only support Flash. End users need to enable Flash in Safari manually.
More information on the status of WebRTC implementations can be found on this following website: https://webrtc.org/.
Below each part of this package is described in more detail.
It consists of the following files:
Partners are expected to create their own frond- and backend application and use this as an guide for the usage of the SDK.
Running the applications requires configuration. You need to configure the by Cameramanager supplied Client ID and Client Secret for OAuth authentication.
Besides this the application needs the configuration of the server parameters (protocol, host and port). In the example configuration the production values are shown. In normal cases these should be used.
This is the main part of the SDK with functionality for creating a web browser element for playing live video. It tries to create a HTML5 video element and playing a WebRTC stream. It automatically does a Flash fallback and contains functions for playing, pausing the stream, multiviews and showing the stream(s) fullscreen.
Multiscreen is implemented in the frontend application through the Bootstrap framework with it's grid system. More informatino can be found here: https://getbootstrap.com/examples/grid/. In our example we show 2 columns, but this can easily adapted to other values.
The Cameramanager Web Streamer uses the WebRTC Steamer for creating WebRTC video elements and the swfobject library for Flash (SWF) object elements. The Flash live video is then streamed by the Flash player (player.swf).
This is the SDK part which is used by the Cameramanager Web Streamer to create WebRTC streams.
The following files are required for the demo app and/or the WebRTC browser SDK.
Note: Within the demo application we made an effort to support Microsoft Edge, but since this browser does not implement WebRTC, but ORTC, it does not yet work. We therefore use Flash in Microsoft Edge browsers for now.
First we initialise the CMWebStreamer object.
This function has the following (all optional) parameters:
After that we do a check if we have previously logged into Cameramanger by checking the validity of the stored access token.
Check if we are logged in by retrieving the stored access token. When the access token is expired it will use the refresh token to get a new access token.
When logged in we retrieve our cameras and show buttons for adding/removing cameras to the grid. The main function here is to add a camera to the grid.
This function takes care for adding a WebRTC stream or (fallback) a Adobe Flash stream within a video/object element.
It is important to disconnect all camera streams when the page is unloaded. For this use the next function.
This is the code from our example frontend application where we bind the disconnect to the before unload event.
The nexts functions are bound to click events on buttons in the frontend application.
Log into your Cameramanager account and get an access token (with a time when it expires) and refresh token. This is then stored in the browser sessionStorage object.
Deletes the access token and by this logs the user out of Cameramanager.
Show the video streams fullscreen.
Toggle the play status (play or pause) of the videos within the given container.
Load the cameras for the logged in user.