Build a Presentation Coaching Application with Recall

Recall provides a developer API to get real-time meeting data from a number of different platforms. It does this by sending Recall bots into meetings to observe what is happening and then provide data on-demand or in real-time. As well as transcripts, they provide metadata including a participant list and linked calendar invite.

In this tutorial, you will build a virtual presentation coaching application. The application will allow you to send a Recall bot into a Zoom call, remove them, and get insights once the call is over. One of the great things about Recall is their support of other platforms like Google Meet, Microsoft Teams, and WebEx with no additional code.

For this project, we'll complete the following steps:

1. Add a bot to a Zoom call

2. Get data about speakers in the call

3. Calculate speaker turn counts (to see if you took up more turns than others)

4. Create a speaker-separated transcript

5. Calculate talk-time per speaker

Before You Start

Make sure you have Node.js installed. You will need a Deepgram API Key and a Recall API Key.

Create a new directory for this project and open it in a code editor. Create a .env file and populate it with your keys:

Create a package.json file with npm init -y and then install our dependencies:

Create an index.js file and open it in your code editor.

Set Up Application

Import your dependencies:

Set up your express application:

Create a route handler to load the initial page. Firstly, create a views directory and an index.hbs file inside of it. .hbs files use Handlebars to add conditional and looping logic to HTML files. In the new view file, add:

Inside of index.js, render the view:

Start your server with node index.js, visit http://localhost:3000, and you should see Call Coacher.

Create a Recall.ai Helper Function

Recall's API Reference shows all of the available endpoints to manage bots - your application will use four of them. To make your code more readable, create a reusable recall() helper method at the very bottom of your index.js file:

Now, for example, endpoints can be accessed like so:

Use Recall.ai To Add a Bot to a Zoom Call

Add a new form to views/index.hbs:

Providing a bot name is optional, but your application will allow users to specify it. When submitted, this form will send a POST request to /join. Its payload will contain meeting_url and bot_name.

Add the following to index.js underneath the existing route handler for the homepage:

Being able to send dynamic data into templates is a feature available by including handlebars in our application. At the bottom of index.hbs show the message:

The message is empty (leaving an empty paragraph) when initially loading the page and will show the message after submitting the form.

Try it out! Restart your server, create a new Zoom call, get the meeting invite URL and submit it in the form. You should have a bot immediately join you with the bot name you specified.

Make a Recall.ai Bot Leave a Zoom Call

Currently, the only way to make the bot leave the call is to end it for everyone (or manually remove it in the Zoom interface). Recall also provide an endpoint to remove a bot. Add a new form below the previous one in index.hbs:

In index.js create a new route handler:

Restart your server and try to add and remove a bot. The bot should leave the call when the new form is submitted, and you should be redirected to a new page (causing an error because it does not yet exist.)

Show Data From Call

Create a new data.hbs file in the views directory:

In index.js add a new route handler:

Restart your server, start a new Zoom call (preferably with someone else), speak for a couple of minutes, remove the bot with the form, and you should be redirected to a page.

Get All Speaker Usernames

A full timeline for the call including who spoke and when is made available as part of the bot object. Extract just usernames and de-duplicate the list by adding the following:

Update the res.render() method to the following:

Finally, add a list of who spoke to the bottom of data.hbs:

Show Each Speaker's Turn Count

Below where usernames is defined, add the following:

Now each username in the usernames array also has a turns property, which is equal to the number of times they spoke in the call. Update the loop to show the new data:

Display Call Transcript with Usernames

Recall is a Deepgram customer and provides our accurate AI-powered transcription within their product. The transcript is already available in our application in the turns variable. Add the following below the for loop in index.js:

Add the transcript to the rendered data:

Finally, in data.hbs, add the following to the bottom:

Calculate Each Speaker's Speaking Time

Each word in the transcript is accompanied by a word's start and end time. Using this data, each speaker's 'talking time' can be calculated. Firstly, turns is added to usernames[i], add a new speakTime value:

Calculate the speakTime just after you add transcripts with transcripts.push(), and add it to the speaker's entry in the username array:

Finally, update data.hbs to contain this new data just below where each speaker's turns are shown:

The World Is Your Oyster

This application only scratches the surface of the analysis you can perform with data returned by Recall and Deepgram. You may choose to detect non-inclusive language, summarize what has been said, and more. Recall provides a developer-friendly way to avoid writing 'glue' into various conferencing platforms, so if you want to use Google Meet, Microsoft Teams, WebEx, or others, there is no more code to write. Fab!

If you have any questions, please don't hesitate to get in touch. We love to help!

If you have any feedback about this post, or anything else around Deepgram, we'd love to hear from you. Please let us know in our GitHub discussions .