How to Integrate Ziggeo’s Video API with a Simple Web AppAdd video recording and playback into your application exactly how you want it.

chevron_leftAll Articles
Vim GirlDevRel @ Manifold

Ziggeo is an API that helps you very quickly give the users on your app the ability to record videos. Ziggeo takes care of the video recording, video storage, and video playback. With their flexible API, you can add video recording and playback into your application exactly how you want it.

In this tutorial, I will show you how to build a simple web app that lets you record a video, email it to your friends, as well as see the videos your friends have sent to you. The flow diagram below will show you how the user experience will be for our app. You can also check out a demo of the app here.

VidMail MapVidMail Map

Before we get started, it might be a good idea to learn a little bit about Ziggeo’s product. I recommend trying out their great getting started tutorial and skimming through their JavaScript SDK (that’s where I found most of the code I needed for this app).

Step 1. Client Side Setup

Now that you’re familiar with Ziggeo, let’s start by building the functionality to record videos. First, we need to include Ziggeo’s JavaScript and CSS files:

// index.html

<link rel="stylesheet" href="//assets-cdn.ziggeo.com/v2-stable/ziggeo.css" />

<script src="//assets-cdn.ziggeo.com/v2-stable/ziggeo.js"></script>

<script> 
const ziggeoApp = new ZiggeoApi.V2.Application({
  token: "APPLICATION_TOKEN"
}); 
</script>

Next, we want the video recorder to show up. To do that, we include the following code:

<ziggeorecorder id="recorder-embedding" ziggeo-width=640 ziggeo-height=480 ziggeo-theme="minimalist" ziggeo-themecolor="red"></ziggeorecorder>

With just these two steps, you should now be able to record videos!

Step 2. Add Video Recorder Tags

Ziggeo gives us the option of adding a tag to the videos we record, so I decided to tag each of the videos recorded on VidMail with their recipient’s email address. To make this happen, the user first needs to input the email of the recipient (#1 of VidMail Map):

// index.html

<div id="elementToDisplay" class="container">
 <div class="item">
  <div class="title">Who do you want to send a video message to?</div>
  <div class="form-group">
  **<input type="email" id="mailTo" class="form-control vim-input" aria-describedby="emailHelp" placeholder="Please enter their email">**
  </div>
  <button id="addTag" type="button" class="btn vm-btn">**Next**</button>
 </div>
</div>

Once they click on the next button, I replace the DOM with Ziggeo’s video recorder and pass in the email address as the ziggeo-tags attribute (#2 of VidMail Map):

// index.js

let elementToDisplay = document.getElementById('elementToDisplay');
let tag;

document.getElementById('addTag').onclick = () => {

   **tag** = document.getElementById("mailTo").value;

   elementToDisplay.innerHTML = `<div id="item"><ziggeorecorder id="recorder-embedding" ziggeo-tags='${**tag**}' ziggeo-width=640 ziggeo-height=480 ziggeo-theme="minimalist" ziggeo-themecolor="red"></ziggeorecorder><div id="nextAction"></div></div>`;
};

Cool, now the Ziggeo recorder will be uniquely tagged by the video recipient’s email address.

Step 3. Knowing When to Send the Video

Now that we’re able to record videos, we’ll need to send them as soon as the video’s done processing. The processed event, one of Ziggeo’s recorder events, lets us know when the video has been processed (which means it’s been changed to the specs in our video profile and was saved in our Ziggeo account).

To listen to one of Ziggeo’s recorder events, I’ll first need to access my recorder embedding with these two lines of code:

// index.js

const element = document.getElementById('recorder-embedding');

const embedding = ZiggeoApi.V2.Recorder.findByElement(element);

Then I’ll need to use on, a method provided by the embedding, which takes in two parameters; the event I’d like to use and the function I want to call once that event has been triggered:

embedding.on(**'processed'**,() => fetch(‘/sendMail…’));

For our app, once the video has been processed, our callback will then send a request to our server. Our server will use MailGun’s API to send an email notification. If you use Manifold, you can very quickly do this:

// server.js

// NodeMailer setup

app.post(‘/sendMail’, (req, res) => {
   nodemailerMailgun.sendMail({
     from: 'hello@vimgirl.com',
     to: mailTo,
     subject: `You've got VidMail!`,
     text: `To view your VidMail, go to    **https://hello.vimgirl.com/videos/?email=${req.body.mailTo}**!`
    }, (err, info) => {
      if (err) {
      console.log(`Error: ${err}`);
      } else {
      console.log(`Response: ${info}`);
      }
   });
});

As you can see, the email we sent to the user includes a link to their videos. We passed their email address in as a query parameter to make the next step easier to tackle.

Step 4. Retrieving Specific Videos

Now that users are able to successfully record videos and send emails to notify recipients of their videos, we need to set up our server to retrieve these videos! First you’ll need to install Ziggeo’s library to your server code:

npm install ziggeo

If you use Manifold’s CLI tool, your credentials will be provided through the ‘ZIGGEO_URL’ environment variable. We will parse it and pass it into the Ziggeo instance to create our Ziggeo server object:

// server.js

Ziggeo = require('ziggeo');
const myURL = new url.URL(process.env.ZIGGEO_URL);
const ZiggeoSdk = new Ziggeo(myURL.username, myURL.password, myURL.searchParams.get('encryption_key'));

With an authorized Ziggeo object, we can get our videos by:

ZiggeoSdk.Videos.**index**(args, cb);

If you don’t specify any of the arguments, you’ll receive information of all the videos being stored in your Ziggeo account. To filter those video info’s out, we’ll need to specify a tag in the arguments. In our case the tag will be the recipient’s email address:

ZiggeoSdk.Videos.index({**tags**: **req.query.email**}, cb);

Since the email we sent earlier prompted the user to visit a url where their email is already being passed in, we were able to grab that value in our server file by calling req.query.email.

The data we’ll be getting back in the callback function is an array of video info’s. We can grab each of the video tokens and put them into the simple embedded player HTML code Ziggeo provides. The final step would be to send the list of embedded players back to the page so that the user can see all of the videos that have been sent to them!

ZiggeoSdk.Videos.index({tags: req.query.email}, (vidInfos) => {
 const **videos** = vidInfos.reduce((acc, vidInfo) => {
  acc += `<div class="vid-singles">**<ziggeoplayer ziggeo-video="${vidInfo.token}" ziggeo-width=320 ziggeo-height=240 ziggeo-theme="modern" ziggeo-themecolor="red"></ziggeo>**</div>`;
  return acc;
 }, '');

res.send(`**...** <div class="vid-center">${**videos**}</div> **...**`);
});

Time to Celebrate

Congratulations, you’ve learned how to build VidMail using Ziggeo’s video API! Here’s a link to a GitHub Repository I created for VidMail if you’d like to play around with my code, or if you want to see exactly how I integrated MailGun with Ziggeo using Manifold’s CLI. I hope you learned something new. Until next time!

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.