Live video via WebSDK

Web Streamer SDK.zip

WebRTC demo application

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:

  • Front- and backend example implementation
  • The Cameramanager Web Streamer
  • WebRTC streamer
  • Required libraries

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.

Front- and backend example implementation

A HTML/CSS/JavaScript frontend example application with a PHP backend application which takes care of the Cameramanager REST API function calls. It demonstrates the usage of the Web Streamer SDK.

It consists of the following files:

  • index.php - The PHP generated HTML frontend
  • config.example.php - Make a copy, rename that 'config.php' and edit it as described
  • js/demo-applicaton.js - Frontend logic
  • css/style.css - Styles which are used in the frontend application
  • fonts/* - Bootstrap glyphicons
  • img/loading.gif - Image to be used as background of the video elements
  • serverapp.php - The backend application containing logic with the Cameramanager REST API calls
  • lib/restclient.php - A PHP REST client library which is used by the backend

Partners are expected to create their own frond- and backend application and use this as an guide for the usage of the SDK.

Configuration

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.

Cameramanager Web Streamer

js/CMWebStreamer.js

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

WebRTC Streamer

js/WebRTCStreamer.js

This is the SDK part which is used by the Cameramanager Web Streamer to create WebRTC streams.

Required libraries

The following files are required for the demo app and/or the WebRTC browser SDK.

  • js/jquery-3.2.1.js - jQuery library
  • js/adapter.js - ORTC to WebRTC conversion library required for MS Edge support (not yet used)
  • js/DetectRTC.js - Library for detecting WebRTC support of the running client
  • js/bootstrap.min.js - HTML/CSS/JS framework
  • css/bootstrap.min.css - The CSS part of the Bootstrap framework
  • js/swfobject-v2.3a.js - JavaScript framework for embedding Flash streams
  • player.swf - The actual Flash player; no other players are supported

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.

Application flow

First we initialise the CMWebStreamer object.

CMWebStreamer.init()

This function has the following (all optional) parameters:

  • Protocol - default 'https'
  • Host - default 'rest.cameramanager.com'
  • Port - default 443
  • Use flash - default false
  • Flash fallback - default false

After that we do a check if we have previously logged into Cameramanger by checking the validity of the stored access token.

CMWebStreamer.checkLogin()

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.

Parameters:

  • On success (optional)
  • On fail (optional)

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.

CMWebStreamer.addStream()

This function takes care for adding a WebRTC stream or (fallback) a Adobe Flash stream within a video/object element.

Parameters:

  • Camera ID (required) - Identifying the camera to be streamed
  • Title (required) - A string to be used as title for the video element
  • Video container ID (required) - The container element where the new video element is added to
  • Background image (optional) - Image to be initial shown as the background of the video element while loading the stream
  • Classname for the video element (optional) - Can be used to style the video element from the frontend

It is important to disconnect all camera streams when the page is unloaded. For this use the next function.

CMWebStreamer.disconnectAll()

This is the code from our example frontend application where we bind the disconnect to the before unload event.

Event based functions

The nexts functions are bound to click events on buttons in the frontend application.

CMWebStreamer.login()

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.

Parameters:

  • Username (required)
  • Password (required)
  • On success (optional)
  • On fail (optional)

CMWebStreamer.logout()

Deletes the access token and by this logs the user out of Cameramanager.

Parameter:

  • URL (optional)

CMWebStreamer.fullscreen

Show the video streams fullscreen.

Parameter:

  • ID of the container element containing the video objects (required)

CMWebStreamer.toggleAllVideos()

Toggle the play status (play or pause) of the videos within the given container.

Parameter:

  • ID of the container element containing the video objects (required)

CMWebStreamer.getCameras()

Load the cameras for the logged in user.

Parameter:

  • Callback function to be called on succes (optional)