Add video rendering to your web apps! Seamlessly integrate our video renderer into your software and provide your users with video editing functionality – right in the browser.
This is a demo application showing how a dynamic video can be previewed in the browser using the Preview SDK. The code can be used as a basis for creating your own video editor applications using Creatomate's API.
Try it out live: https://video-preview-demo.vercel.app
The Create Video button is disabled in the live demo as this requires an API key. To run the example with your own API key, follow the instructions below.
This demo uses a video template from your account. The example code demonstrates a few features that require a specific template, so be sure to follow the instructions carefully:
- Create a free account here.
- Go to your project settings, and copy your API Key and Public Token under Programmatic Access:
- In your dashboard, go to Templates, click New, go to the Featured category, and choose the "Image Slideshow w/ Intro and Outro" template, then click Create Template:
- From the address bar, copy the ID of the newly created template:
- Create a new file called
.env.localin the root of the project, providing the API Key, Public Token, and Template ID from the previous steps:
CREATOMATE_API_KEY=...
NEXT_PUBLIC_CREATOMATE_PUBLIC_TOKEN=...
NEXT_PUBLIC_TEMPLATE_ID=...
- Install all NPM dependencies using the following command:
npm install- The demo can then be run using:
npm run dev- Now visit the URL that is displayed in your console, which is by default:
http://localhost:3000
Install the Preview SDK using the following command:
npm install @creatomate/previewPlease refer to App.tsx to see an example of how to initialize the SDK.
Feel free to contact us if you encounter any issues with this demo or Creatomate API at support@creatomate.com.
This demo is licensed under the MIT license. Please refer to the LICENSE for more information.