Build a Live Translated Transcriptions Service in Your Video Call Web App

Introduction

Screenshot of the project we will be developing in this tutorial
Screenshot of the project we will be developing in this tutorial

Prerequisites

  • Basic knowledge of how to work with JavaScript, JQuery, Bootstrap, and Font Awesome
  • Agora Developer Account — Sign up here
  • Know how to use the Agora Web SDK and the Agora RTM SDK
  • Google Cloud account
  • Understand how to make requests and receive responses from REST APIs

Project Setup

Screenshot of the Agora Transcription Service UI
Screenshot of the Agora Transcription Service UI

Adding Real-Time Translation to Our Application

Screenshot of how our application looks after adding the new row
Screenshot of how our application looks after adding the new row

Create a Google Cloud Translation API Key

  1. In the Cloud Console, go to the Create service account page.
  2. Select a project.
  3. In the Service account name field, enter a name. The Cloud Console completes the Service account ID field based on this name.
  4. In the Service account description field, enter a description. For example, Agora Live Translated Transcription.
  5. Click on Create and Continue.
Screenshot of the page where you can create a service account
Screenshot of the role set screen for service accounts
Screenshot of the role set screen for service accounts
Enable the Translation API on GCP
Enable the Translation API on GCP
The generated API key has to be copied from this page
The generated API key has to be copied from this page

Core Functionality (JS)

Screenshot of the project we will be developing in this tutorial
Screenshot of the demo from the user’s perspective.

Conclusion

You did it!

Other Resources

--

--

--

Web Developer with keen interest in SEO & Digital Marketing.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Tailwind CSS + Astro + Live Rebuild

An approach to supporting multiple locales in an Angular 8 Universal using cookies and the Express…

7 Powerful JavaScript Shorthands That You Should Know

JavaScript shorthands.

Npower Registration Portal 2022 — https://npower.fmhds.gov.ng/signup

How I Created My All-Star React Stack — Supercharge.dev

How to Use Custom (Google) Fonts in React Native (React Native CLI)

Continue Working with Grommet

5 Node.js/Express Tutorials to Go From Beginner to Expert

Code

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Akshat Gupta

Akshat Gupta

Web Developer with keen interest in SEO & Digital Marketing.

More from Medium

The Madness behind the App: WhatsApp and a change of the times

How to fetch an API and make it a repeating group list in Bubble.io

How to Add a Floating Image to Your Chaturbate Profile

Create SMART Home App using Roku new IDK