This add-on is operated by Ziggeo, Inc.

API for Video Recording and Playback

Last updated July 28, 2023

Ziggeo is an add-on for providing video recording and playback in your website.

Adding Ziggeo to an application provides a highly customizable and secure embeddable video recorder and player. You can limit the recording time and style it any way you like using CSS. It records and plays on any browser, platform and device, both desktop and mobile.

Ziggeo is accessible via an API and has supported server-side libraries for Ruby, Python, Node.js, and PHP. The client-side embeddings are based on JavaScript, HTML and CSS.

Provisioning the add-on

Ziggeo can be attached to a Heroku application via the CLI:

$ heroku addons:add ziggeo
-----> Adding ziggeo to sharp-mountain-4005... done, v18 (free)

Once Ziggeo has been added a ZIGGEO_URL setting will be available in the app configuration and will contain the canonical URL used to access the newly provisioned Ziggeo service instance. This can be confirmed using the heroku config:get command.

$ heroku config:get ZIGGEO_URL
https://application_token:private_key@srvapi.ziggeo.com?encryption_key=encryption_key

After installing Ziggeo the application should be configured to fully integrate with the add-on.

Local setup

Environment setup

After provisioning the add-on it is necessary to locally replicate the config vars so your development environment can operate against the service.

Use Foreman to configure, run and manage process types specified in your app’s Procfile. Foreman reads configuration variables from an .env file. Use the following command to add the ZIGGEO values retrieved from heroku config to .env.

$ heroku config -s | grep ZIGGEO >> .env
$ more .env

Integration of the client-side library

Add the following code to your website’s header:

<link rel="stylesheet" href="//assets-cdn.ziggeo.com/v2-stable/ziggeo.css" />
<script src="//assets-cdn.ziggeo.com/v2-stable/ziggeo.js"></script>
<script>var app = new ZiggeoApi.V2.Application({
    token:"your-api-token"
});

Make sure to replace the api token with your application that can be obtained from the ZIGGEO_URL environment variable.

A recorder can then be integrated as follows:

<ziggeorecorder ziggeo-theme="modern" ziggeo-themecolor="red" id="my-recorder"></ziggeorecorder>

Once a video has been recorded, you can get the associated video token in a JavaScript callback:

var embedded_recorder = ZiggeoApi.V2.Recorder.findByElement(document.getElementById('my-recorder'));
embedded_recorder.on("verified", function () {
    alert("Submitted a new video with token '" + embedded_recorder.get('video') + "'!");
});

You can then store that token. For example, in your database.

To fire up a player using that token, write:

<ziggeoplayer ziggeo-theme="modern" ziggeo-themecolor="red" ziggeo-video="video-token"></ziggeoplayer>

Using with Rails 3.x

Ruby on Rails applications will need to add the following entry into their Gemfile specifying the Ziggeo client library.

gem "ziggeo", :git => "https://github.com/Ziggeo/ZiggeoRubySdk.git"

Update application dependencies with bundler.

$ bundle install

You can then access our API as follows, e.g. indexing all recorded videos:

ziggeo = Ziggeo.new
ziggeo.videos().index().each do |video|
  ...
end

Using with Python/Django

First, you’ll need to install our Python library:

pip install ziggeo

You can then access our API as follows, e.g. indexing all recorded videos:

ziggeo = Ziggeo("your-api-token", "your-private-key", "your-encryption-key")
for video in ziggeo.videos().index():
  ...

Using with Node

First, you’ll need to install our Node.js library:

npm install ziggeo

You can then access our API as follows, e.g. indexing all recorded videos:

ZiggeoSdk = require('./ziggeo/ziggeo-sdk.min.js');
ZiggeoSdk.init('your-api-token', 'your-private-key', 'your-encryption-key');
ZiggeoSdk.Videos.index({}, {
    success: function (index) {
        for (var i = 0; i < index.length; ++i) {
            var video = index[i];
            ...
        }
    }
});

Using with PHP

First, you’ll need to install our PHP library via composer:

"ziggeo/ziggeophpsdk"

You can then access our API as follows, e.g. indexing all recorded videos:

require_once('./ziggeo/Ziggeo.php');
$ziggeo = new Ziggeo('your-api-token', 'your-private-key', 'your-encryption-key');
foreach ($ziggeo->videos()->index() as $video) {
    ...
}

Troubleshooting

If the embedding is not showing up, chances are that you are running your website directly from your local computer’s file system. Please try to run it in a server environment.

If there is no camera access in your browser, one of the following reasons could be the source of the issue: - The browser runs in the incognito / anonymous / private mode. Browsers usually forbid access to the camera in that case. - The access to the camera has been disabled in general. In Chrome, you can change these settings as follows: Go to Preferences, Settings, Show advanced settings, Privacy, Content settings, Media, and enable “Ask when a site requires access to your camera and microphone”.

Removing the add-on

Ziggeo can be removed via the CLI.

$ heroku addons:remove ziggeo
-----> Removing ziggeo from sharp-mountain-4005... done, v20 (free)

Support

All Ziggeo support and runtime issues should be submitted via one of the Heroku Support channels. Any non-support related issues or product feedback is welcome at support@ziggeo.com.