Quick Start on Ziggeo

Here is how to get started: once you've signed up for Ziggeo, make note of your application token (it identifies your application uniquely).

Open your favorite editor, add the following code and save it as index.html. (Note that Ziggeo does not depend on jQuery, we just use for the sake of this quick start.)

<!DOCTYPE html>
<html>
    <head>
       <script src="//code.jquery.com/jquery-1.12.3.min.js"></script>
    </head>
    <body>
        Foobar
    </body>
</html>

We'll need to serve up this html page via a web server - any will do. A quick way of spinning one up temporarily via the command line:

php -S localhost:8080

Please open the url http://localhost:8080 in your favorite browser - it should show Foobar as expected.

Next, navigate here and copy the header code at the bottom:

<link rel="stylesheet" href="https://assets.ziggeo.com/v2-stable/ziggeo.css" />
<script src="https://assets.ziggeo.com/v2-stable/ziggeo.js"></script>
<script>
var ziggeoApp = new ZiggeoApi.V2.Application({
	token:"APPLICATION_TOKEN",
	webrtc_streaming_if_necessary: true,
	webrtc_on_mobile: true
});
</script>

Paste it into the <head> section of your index.html. Also, make sure to replace APPLICATION_TOKEN with *your* application token. This will load the Ziggeo library into your web site.

Next, we want to include a video recorder. Go ahead, and copy & paste the following code into the <body> section of your index.html, replacing Foobar:

<ziggeorecorder ziggeo-theme="modern"
                ziggeo-width=400
                ziggeo-height=300>
</ziggeorecorder>

For more customization of the recorder, please see here.

Now go back to your page in the browser, refresh, and record a video of yourself. Great! Head back to the Ziggeo dashboard, select the Videos tab under your application, and see your video pop up.

You'll notice that your video has a unique token. We'll use it to embed a player into your website now for that particular video. Add the following code after the recorder to your index.html:

<ziggeoplayer ziggeo-theme="modern"
              ziggeo-width=400
              ziggeo-height=300
              ziggeo-video="token">
</ziggeoplayer>

Please make sure to replace token with the actual video token from your dashboard.

Now you know how to include a recorder and a player for an existing video!

Next, we'd like to automatically insert a player into our page via JavaScript when a video has been recorded. In order to do so, we'll need to find our recorder instances and handle the verified event. It'll tell us once a video has been pushed to our servers - it'll also allow us to read the new token of the recorded video. We'll use jQuery to add a player to the page:

<script>
ziggeoApp.on("ready", function () {
        var recorder = ZiggeoApi.V2.Recorder.findByElement($("ziggeorecorder"));
        recorder.on("verified", function () {
            $("body").append('<ziggeoplayer ziggeo-video="' + recorder.get("video") +
 '" ziggeo-theme="modern" ziggeo-width="400" ziggeo-height="300"></ziggeoplayer>');
        });
    });
</script>

To give it a try, please refresh the page and record a video - it should now automatically appear as a player on your page after recording.

PREV NEXT