--- title: Add live captions to a video call app with daily-js description: Use the daily-js transcription API to get subtitles with every video call published: true tags: javascript, webdev, transcription, video cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0zcxc0k02xv49uvw1lqw.png canonical_url: https://www.daily.co/blog/add-live-captions-to-your-daily-prebuilt-calls/ --- ## Introduction At Daily, we love seeing what developers build in whatever way works best for them. We offer [Daily Prebuilt](https://docs.daily.co/guides/products/prebuilt) – our embeddable video call UI – to get started with just a couple lines of code or you can build a totally custom experiences with Daily’s [call object](https://docs.daily.co/guides/products/call-object). Our goal is to support everyone’s use case and skill level by making browser-based video calls easy to integrate and customize. As part of making the call experience better for everyone, we have introduced the ability to add live captions to Daily domains with our [`startTranscription()`](https://docs.daily.co/reference/daily-js/instance-methods/start-transcription) instance method in partnership with [Deepgram](https://deepgram.com/). This highly requested feature has many uses. They include being able to: * Introduce wider accessibility options within calls * Provide an “instant replay” (e.g. What did they just say?) * Produce a great way to generate meeting notes ![video call participant's audio being transcribed in the demo app](https://www.daily.co/blog/content/images/2022/04/transcription.gif) This tutorial focuses on pairing transcription with Daily Prebuilt. We already have a thorough tutorial on [adding transcription to a custom Daily call](https://www.daily.co/blog/add-live-transcription-to-a-daily-call-with-our-newest-api/), which you should definitely check out! Today’s tutorial includes a demo that walks through how to add transcription alongside a Daily Prebuilt call. If you are like spoilers and want to see what we’re building today, you can jump straight into the [prebuilt-transcription](https://github.com/daily-demos/prebuilt-transcription) code and also try a [live demo](https://prebuilt-transcription.vercel.app/) **Note:** You will have to connect your Daily and Deepgram accounts, as outlined in the demo’s README and in this tutorial, to fully experience the live demo. ## What’s the plan? In this tutorial, we will cover: * Getting set up with Daily and Deepgram * Embedding Daily Prebuilt in a Next.js app * Creating a transcription component * Adding buttons to start and stop transcription methods * Loading the live captions * Optimizing the app for large amounts of text * Downloading the transcript ## Prerequisites Because transcription is a shared service between Daily and Deepgram, there is a bit of set-up involved to get both services running with each other. But the good news is that you can set it and forget it, because it’s just a one-time step! _Note: Daily does not charge for transcription services and Deepgram offers a free $150 credit upon [sign-up](https://console.deepgram.com/signup), so there is no cost associated with this tutorial._ To walk through this tutorial, you will first need to [create a Daily account](https://dashboard.daily.co/signup) and a [Deepgram account](https://console.deepgram.com/signup). Once you have an account and are logged into the [Daily Dashboard](https://dashboard.daily.co), you can [create a new Daily room](https://dashboard.daily.co/rooms/create) or use our [REST API](https://docs.daily.co/reference/rest-api/rooms). To set up transcription, you will have to [`enable_transcription` on your Daily domain](https://docs.daily.co/reference/rest-api/your-domain/config#enable_transcription). Essentially, you'll need your Daily API key, available in the [Daily dashboard](https://dashboard.daily.co/developers), and your [Deepgram API key](https://console.deepgram.com/) to update your domain settings, like so: ```bash curl --request POST \ --url https://api.daily.co/v1/ \ --header 'Accept: application/json' \ --header 'Authorization: Bearer YOUR_DAILY_API_KEY' \ --header 'Content-Type: application/json' \ --data '{"properties": { "enable_transcription": "deepgram:YOUR_DEEPGRAM_API_KEY" }}' ``` ## Setting up the demo Head on over to the [prebuilt-transcription](https://github.com/daily-demos/prebuilt-transcription) GitHub repository and fork the repo to follow along with the rest of this post. After forking and navigating to the `prebuilt-transcription` folder, install the dependencies: ```bash npm i ``` And run the dev server: ```bash npm run dev ``` Locally, open [http://localhost:3000](http://localhost:3000) in your browser. This demo is based on the [Next.js](https://nextjs.org/) React framework, starting with the [`create-next-app`](https://nextjs.org/learn/basics/create-nextjs-app/setup) template builder. This tutorial also uses TypeScript. If you are new to TypeScript, no worries! Because it’s built on top of JavaScript, it looks very similar with a few additional features and syntax. ## Staging the `[room]` The most interesting part of our codebase lives in `pages/[domain]/[room].tsx`, so let’s start there. And yes, those brackets are part of the file names – this allows us to create URLs dynamically in Next.js. When we load the page, we want to build and start the call right away with the parameters we retrieve from the page URL. To do this, we create a `useCallback` function: ```javascript /* Set up the Daily call and event listeners on page load */ const startCall = useCallback(() => { const iframe = document.getElementById("callFrame"); const newCallFrame = DailyIframe.wrap(iframe as HTMLIFrameElement, { showLeaveButton: true, }); setCallFrame(newCallFrame); newCallFrame.join({ url: url, }); newCallFrame.on("joined-meeting", (ev) => { let ownerCheck = ev?.participants.local.owner as boolean; setIsOwner(ownerCheck); }); // snip snip - some more event listeners here // we’ll come back to this section later! }, [url]); ``` The above `startCall` function loads when the page loads, via a React `useEffect`: ```javascript useEffect(() => { startCall(); }, [startCall]); ``` This creates and joins a call built from the URL parameters. ## Incorporating the Daily Prebuilt iframe Now that the app framework is up and running, let’s add Daily Prebuilt. Since Daily Prebuilt is an embeddable video call UI, Daily has already done most of the video-related work for you. That means this part will be short. From the aforementioned `[room].tsx` page, we load the `` component. The full component looks like this: ```javascript import styles from "../styles/CallFrame.module.css"; const CallFrame = () => (

); export default CallFrame; ``` The few lines of styling imported from `../styles/CallFrame.module.css` allow the Daily Prebuilt iframe to take up most of the screen: ```css .callFrameContainer { width: 100%; height: 80%; } .callFrame { width: 100%; height: 100%; min-height: 80vh; border: 0; } ``` Without this styling for the `

ablwr

Add live captions to a video call app with daily-js

Join Our Newsletter. No Spam, Only the good stuff.