Simple WebRTC Calling and Recording with Clarify

Originally published on the Clarify.io blog. View archived copy.

As WebRTC continues to build momentum as one of the most important communication protocols of the future, it seems like a natural fit to extend the voice and video calling functionality native to WebRTC with Clarify’s media indexing services.

Whether you’re running a call center or simply use one of the next generation business communication tools such as UberConference or Switch, chances are you’re probably already using WebRTC every single day, perhaps without even knowing it.

We wanted to put together a quick demonstration to show how you would integrate Clarify’s API into a very simple WebRTC voice service application.  This demonstration is audio only, but there’s no reason it could not be easily extended to index video from the call as well.

WebRTC Calling and Recording with Clarify

In the following video, you’ll see a demonstration of a very simple integration of WebRTC browser calling and recording with Clarify. The goal of the demo project was to show:

• Making a simple peer to peer WebRTC call
• Automatically recording the audio from the call on two separate tracks
• Indexing the recorded audio upon call completion using Clarify
• Processing the Clarify callbacks
• Searching the contents using our interface

If this were a part of an existing application such as UberConference or Switch, the user might request that the call be recorded as it starts rather than recording every call.

This short video shows the app in action.

How It Works

Create two new user accounts to test with, or you can use the default admin user that gets created with the app. Login to separate web browsers with each of the new users.  Once you’re logged in to the browser sessions, start a call from one user to the other. If you’re testing on one machine, you’ll either need two separate browsers (Chrome and Firefox) or you’ll need to run one instance in regular Chrome / Firefox and one instance in Incognito / Private.

Once the call is up, we use the WebRTC MediaRecorder API to record the audio and chunk the media off to a file. We also create a record in our Mongo DB to store the details of the call and give us a way to tie Clarify’s search results to the specific call.

When the call is completed, we send off the file to Clarify to get indexed.

Once indexing is completed, our application gets a callback notification from Clarify, and we update the DB with cost and duration information. The user is then able to search the contents of the call and play back audio from either track.

Technology Stack

• WebRTC
• Node 0.12
• MongoDB
• Express JS
• Angular JS
• Grunt, Bower

Running It For Yourself

To run the demo, download the source code from my clarify-webrtc Github repository. Inside the project source, check out the detailed README for all of the steps to get the application running on your machine. Don’t forget that that your app will need to be accessible from the outside world in order to receive the Clarify callbacks.

If you have any problems getting things running, you can reach out to me on Twitter. I’ll be happy to help.

I hope you find this demo useful, and that it jumpstarts your development on both Clarify and WebRTC.

About the Author

Scott Barstow is a veteran software developer and builder of next-generation business applications based in Raleigh-Durham, NC. When not building Clarify mashups, he stays busy helping startups in RDU and around the US build great technology. You can find him online at ScottBarstow.com or @scottbarstow on most all of the big social platforms.