/real-time-translator-demo

Real-time translator bot demo app

Primary LanguageTypeScript

Real-time Translator Bot

Check out a demo here

This is a sample app demonstrating how to leverage Recall.ai to create a real-time notetaker/translator for video conferences.

While this example specifically uses the real-time transcription WebSocket API, you can also use the Output Media feature to receive and output low-latency audio.

Prerequisites

Setup Guide

  1. Clone the Repository
git clone https://github.com/recallai/real-time-translator-demo.git
cd real-time-translator-demo
  1. Install Dependencies
npm install
  1. Set Up Environment Variables

Clone .env.example:

cp .env.example .env

Then fill out the following environment variables in your new .env:

VITE_GOOGLE_TRANSLATE_API_KEY=your_google_translate_api_key

(Optional) You can set a default language by setting the VITE_DEFAULT_TARGET_LANGUAGE_CODE to a LanguageCode value.

If this is not set, you can tell the bot what language you want to translate to in the call.

  1. Run the App

Start your ngrok tunnel:

ngrok http --domain {YOUR_NGROK_STATIC_DOMAIN} 3000

Start the react app in another terminal:

npm run dev

This will start the Vite development server and expose your app publicly at your ngrok static domain for the bot to connect to.

  1. Start a meeting

For simplicity, we'll use Google Meet, but this also works for other meeting platforms.

Open a new tab and type meet.new to start a new Google Meet call. Copy the link for the next step.

  1. Spin up a bot

The last step is to spin up a bot and have it interact with your now-running translator app.

To do this, you can use the following curl command (along with any other desired parameters):

curl --request POST \
     --url https://{RECALLAI_REGION}.recall.ai/api/v1/bot/ \
     --header 'Authorization: {RECALLAI_API_KEY}' \
     --header 'accept: application/json' \
     --header 'content-type: application/json' \
     --data-raw '
{
  "meeting_url": {MEETING_URL},
  "bot_name": "Translator",
  "output_media": {
    "screenshare": {
      "kind": "webpage",
      "config": {
        "url": {NGROK_TUNNEL_URL}
      }
    }
  },
  "transcription_options": {
    "provider": "meeting_captions"
  }
}'

Where:

  • {RECALLAI_REGION} is your Recall.ai API Region.
  • {RECALLAI_API_KEY} is your Recall.ai API key.
  • {MEETING_URL} is the Meeting URL created in step 5.
  • {NGROK_TUNNEL_URL} is your publicly exposed ngrok tunnel URL

The bot will then join your meeting and render the app in the call, transcribing and translating speech in real-time, with appropriate speaker labels.

Happy building!