Vim GirlDevRel @ Manifold

Whether you’re thinking of adding a video feature into your app or simply experimenting with video APIs, you’ll want to give Ziggeo a try. Ziggeo’s award-winning video APIs packed with server-side SDKs gives you the option to choose from a set of sleek and modern recorders, a transcoder which quickly and easily transcodes your video into any format set by you, an immediately-available video playback, and a simple dashboard that lets you manage and track the popularity of each video. Not only does Ziggeo offer these valuable features, it’s also super easy to integrate with. Alright, now that you’re probably hooked, let’s help get you started in trying Ziggeo out.

Time to Get Ziggeo-y

Below you’ll learn how to integrate Ziggeo’s video API (V2) with the browser and your server. Make sure you’ve already created a free Ziggeo account before you get started!

Part 1 — Browser Integration

Our goal in part one is to make sure the user can record a video and see the playback. Let’s make this happen.

Since it’s already provided, we’ll use the default app found in our dashboard to help us play around with Ziggeo’s API.

Alright, assuming you’ve already set up a simple server to run your just-as-simple app, first we’ll paste the following code into our html file. The first link grabs the css files needed to make our recorder and video player look nice, and the script tag right below it gives us access to the functionalities we’ll be using to play around with them. The last script tag ensures that our app has permission to use Ziggeo.

Embedded content: https://gist.github.com/seemcat/943b3c9fbbd9140f400ad1e889cd648b#file-index-html

Now that we have access to all of the Ziggeo tools, let’s set up our video recorder! I chose the Minimalist theme. You can choose a design that fits your page here.

Embedded content: https://gist.github.com/seemcat/f95d13d7f40c7830b3ec7341ac67deca#file-index-html

Awesome, with just 2 blocks of code, we should be able to record and see a playback video! Now let’s learn how to grab all of the videos we’ve stored into our Ziggeo account.

Part 2 — Server Integration

Integrating Ziggeo into our server is just as easy as doing it with the browser. First let’s install Ziggeo’s library to our server code.

npm install ziggeo

Now let’s import the library and configure it with the appropriate credentials:

Embedded content: https://gist.github.com/seemcat/305171c71e8d766de6d7e987e1e322d7#file-server-js

Cool, my server now has the same access to Ziggeo methods as the browser does. In order to render all of the videos, I’ll need to grab their video tokens from Ziggeo. We can do that by calling the .Videos.index method:

Embedded content: https://gist.github.com/seemcat/1e3c9dbbca01f44c783e07d960edfd27#file-server-js

Once we get the list of tokens, we’ll be sending them to the browser. So let’s make sure the browser receives them and places each one into a Ziggeo player attribute called ziggeo-video. This attribute needs a video token to allow us to embed a player for an existing video.

Embedded content: https://gist.github.com/seemcat/60819bca28ac3ad6c1af9eee44c37f88#file-index-html

Embedded content: https://gist.github.com/seemcat/239bd8f60009f655d3d5d0969db5eb27#file-index-html

Cool, we’re all done! There’s only one problem though, the list of videos won’t render the most recent recording because getVideos() only gets called once; right when the user enters the page. If only we can grab the latest list of videos as soon as the video recorder is done processing.

Lucky for us, Ziggeo provides a list of embedding events. One of them in particular is called processing, and it helps us achieve exactly what we want. To implement this event on our recorder embedding, all we would need to do is change our index.js file in the following way:

Embedded content: https://gist.github.com/seemcat/8bd607667c428464fcbf49de4d4a3403#file-gistfile1-js

As you can see, we wrapped our code in an init function to give the Ziggeo recorder a little bit of time to load so that we’d be able to grab the element ID our app needs to use any embedding events. Just don’t forget to call init in your body tag’s onload event like so:

<body onload=”init();”>

And there you have it! A perfectly working front-to-backend video recorder.

Congrats, you’re now part of the Ziggeo club.

Creative Use Cases

If you’ve never thought of adding some kind of video feature to your app, now’s probably the best time! Create a new social good platform where people can submit their stories about certain topics like mental health, or build a bot that checks for smiles in a video using Machine Learning. The fun ideas of video making/content sharing are endless, and Ziggeo’s video API makes it way easier for us to turn them into reality.

References

For those of you eager to dig deeper in how to use Ziggeo’s video API, here are some great resources for you:

Feel free to comment below if you run into any questions in getting started or while you’re digging deeper. Enjoy!

StratusUpdate

Keep your head in the cloud with Stratus Update

With our new weekly newsletter we’ll keep you up to date with a curated selection of the the latest cloud services, projects and best practices.
Click here to read the latest issue.