alexdechaves / recall-transcription-next-demo

This is a Next.js project to be used as a starter application for using the Recall API + Deepgram (transcription) + Zoom.

Configuration

In this example, we'll be using Zoom with the Recall API

Step 1. Create Recall API Token

Create an API Key in the Recall dashboard. This will be used for API authentication.

Step 2. Create SDK Zoom credentials

Head to https://recallai.readme.io/reference/how-to-create-zoom-sdk-credentials to see how to create the needed Zoom SDK Token and Secret

Step 3. Create a Deepgram API token

Deepgram is used in this demo to transcribe meeting audio so we'll need to create an API token and input it here in the Recall Dashboard. Instructions for creating a Deepgram API key are here.

Step 4. Set up environment variables

Copy the .env.local.example file in this directory to .env.local (which will be ignored by Git):

cp .env.local.example .env.local

Then, input your Recall API token:

• RECALL_API_TOKEN should be your new token

Getting Started

After cloning the repo locally, install the dependencies:

npm install
# or
yarn install

Then spin up your dev server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser.

Using the Demo

Create a new bot

1. Start a zoom meeting
2. On the Recall Demo Home page, select "New bot".
3. Input the Zoom meeting URL (ex. https://us05web.zoom.us/j/*********)
4. Name your bot
5. Hit submit
6. You'll now be able to admit the bot into the meeting

Seeing the data

1. Talk a little bit to get the transcription running, then end the Zoom meeting
2. Once ended, head to /sessions/ on the demo
3. Select the meeting you just ended
4. Here you can view the meeting recording as well as the transcription synced with the playhead timeline

Notes

There's a lot of room here to customize and extend off of this example application. Feel free to change anything necessary after cloning/forking.

• You can change the transcription partner or fine tune the Deepgram transcription process.
• You can add features such as displaying metadata, offloading the video recording, etc.
• While this is written in Javascript, it can easily be converted to Typescript

Learn More

Recall.ai

To learn more about Recall.ai, please head to Recall.ai and their Documentation.

Deepgram

Check out Deepgram here.

Next.js

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.