Skip to content

Latest commit

 

History

History
183 lines (107 loc) · 6.69 KB

README.md

File metadata and controls

183 lines (107 loc) · 6.69 KB
Raw

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.

Animated Remotion Logo

Things to keep in mind:

  1. As the text for TTS changes, you may also want to programmatically alter the durationInFrames for your <Composition/> using getAudioDurationInSeconds().

  2. Special consideration must be made when using cloud development services (like GitHub Codespaces, StackBlitz, etc).

  3. 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

Create 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.

Security rules

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)

Enable API

gcp-enable-api.mp4

6. Create Credentials

  • After API is enabled, go to Credentials (in the sidebar)

    Manage API

  • Click Create Credentials and select Service Account.

    Create credentials
  • 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.

    Credentials location

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 run dev

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

npx remotion render

See docs for server-side rendering here.

Upgrade Remotion

npx remotion 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.