Remotion Yard

Create videos with captions using Remotion, AWS Transcribe and upload it to Vidyard immediately!
Explore the docs »

2 Minute Demo · Report Bug · Pull Request

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Usage
4. Rendering and Uploading
5. Contributing
6. License
7. Contact
8. Acknowledgements

About The Project

With this repo, you can quickly build video compositions using React Components and have them accurately captioned as well. Once you are satisfied, you can render and upload it to Vidyard as well!

Built With

• NodeJS
• ReactJS
• Remotion

Getting Started

To start building your auto-captioned comp, follow these simple steps.

Prerequisites

• NodeJS

Install a stable version on Node JS

• FFMPEG

The only dependency that Remotion depends on is NodeJS and FFMPEG. You can view the installation for FFMPEG here

• AWS Account

The captions can only be generated with Amazon Transcribe. You can get 60 minutes free every month with the free tier. You must upload the .mp4 file to S3 and then create a Transcribe Job.

Installation

1. Clone the repo

   git clone https://github.com/dsomel21/remotion-yard.git && cd remotion-yard

2. Install the packages

   yarn install

3. Run the preview in the browser

   yarn start

Usage

Once your project is up and running, we can go ahead and start building a composition.

Think of compositions as components... for videos.

Once you have a MP4 video that you want to auto-caption, download the asrOutput.json from the AWS Transcribe tool (you can rename it if you like).

import React from 'react';
import { Video, useVideoConfig } from 'remotion';
import Captions from '../Captions';

// Import your assets files
import remotionVid from '../../assets/remotionYard.mp4';
import remotionText from '../../assets/remotionTranscribed.json';

// Optional styles
const styles = { fontFamily: 'Graphik Bold', color: '#FB3640' };

const RemotionTrailer: React.FC = () => {
  const { fps } = useVideoConfig(); // This will be set in src/Video.tsx

  return (
    <>
      <Video src={remotionVid} />
      <Captions transcribedObj={remotionText} fps={fps} customStyles={styles} />
    </>
  );
};

export default RemotionTrailer;

And then don't forget to add this composition to the main Video component.

    <Composition
      id="RemotionTrailer_Final" 
      component={RemotionTrailer}
      fps={30} // 30 frames per second
      durationInFrames={30 * 153} // 1 second * 153 
      width={1920}
      height={1080}
    />

Then preview it in the browser:

For more information on remotion features, please refer to their Documentation

Rendering and Uploading

Render:

yarn run render --comp=RemotionTrailer_Final

Upload directly to Vidyard:

yarn run upload

Note: This assumes you have a Vidyard account and have setup the .env with VIDYARD_EMAIL and VIDYARD_PASSWORD

Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated. 😇

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Twitter - @dilrajio

Project Link: https://github.com/dsomel21/remotion-yard

Acknowledgements

• JonnyBurger (Creator of Remotion) as well as the Discord commmunity.
• FelippeChemello for their brilliant code
• TinyNova (Refactored/mixed their code for parsing the AWS output JSON)