Remotion Text-to-Speech Template

using Google Cloud Platform + Firebase Storage

This template showcases the use of the new Visual Editing features, as highlighted in the Remotion v4 keynote.

Things to keep in mind:

As the text for TTS changes, you may also want to programmatically alter the durationInFrames for your <Composition/> using getAudioDurationInSeconds().
Special consideration must be made when using cloud development services (like GitHub Codespaces, StackBlitz, etc).
Since the Google Text-to-speech APIs cannot be called from the browser, a server is included in this example that will spawn up during development. This server is not compatible with Remotion Lambda. If you use SSR APIs, you must start the server as well.

Get Started

1. Create a Firebase Project

2. Register your app in Firebase

Go to ⚙️ → Project Settings → "General" tab.
Scroll down to "Your apps" section, and register a "Web App".

firebase-register.mp4

Copy the config credentials and paste them into .env.example.
Then rename the file to .env.

3. Enable storage, create a storage bucket with your preferred location

Press: Build → Storage → Get started → Start in production mode → Next → Done

firebase-storage-enable.mp4

4. Setup security rules

Edit rules to allow read, and write access for the remotion-gtts directory (or any other directory that you have specified for audioDirectoryInBucket in the constants.ts file).

Configure bucket rules, such as the following:

  rules_version = '2';
  service firebase.storage {
    match /b/{bucket}/o {
      match /remotion-gtts/{allPaths=**} {
        allow read, write: if true;
      }
    }
  }

For production use, it is recommended to implement more rigorous validation measures to enhance security, especially for write operations.

5. Enable Text-to-Speech API on Google Cloud Platform

Go to https://console.cloud.google.com/welcome and in the top dropdown, select your project under the All tab.

Navigate to https://console.cloud.google.com/apis/library/texttospeech.googleapis.com and enable the API.

You may be required to enable billing, by creating a billing account. (Be sure to also review the pricing tab)

gcp-enable-api.mp4

6. Create Credentials

After API is enabled, go to Credentials (in the sidebar)
Click Create Credentials and select Service Account.

Fill relevant fields, select the Basic role of Owner, and skip the other optional fields if not required.

gcp-create-serviceaccount.mp4

Select the newly created Service Account, and under "Keys" create a JSON key to download credentials as a .json file.

gcp-create-key.mp4

Place the downloaded JSON file in the root of your project, and rename it as serviceaccount.json.

IMPORTANT: This file must never be committed, and must be added to .gitignore, .dockerignore, etc. if you change its name to something different.

If you change the location of this file, make sure to also update GOOGLE_APPLICATION_CREDENTIALS in .env

Example

Here's a sample video rendered using this template. (Be sure to unmute the player)

video.mp4

Commands

Install Dependencies

npm i

Start Remotion Studio

npm start

Running on Cloud development environments:

To run Remotion Studio or Renders, the server also needs to be started. Refer to src/render.ts to learn how to do so.

GitHub Codespaces:

While using GitHub Codespaces, You need to set the server visibility to public using the CLI, every time the server starts. This is NOT recommended and must only be done in trusted scenarios.

gh codespace ports visibility 5050:public -c $CODESPACE_NAME

Replace 5050 with your own port, if you have changed it to something else. To avoid doing this every time, you can forward the port manually ahead of time.

Then reload the VS Code window by pressing Ctrl + Shift + P and selecting Developer: Reload Window

Render video

npm run build

See docs for server-side rendering here.

Upgrade Remotion

npm run upgrade

Docs

Get started with Remotion by reading the fundamentals page.

Issues

Found an issue with Remotion? File an issue here.

License

Note that for some entities a company license is needed. Read the terms here.

raymelon / remotion-gtts-template