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 JavaScript Video SDK. This code can be used as a basis for creating your own video editor applications using Creatomate's API.
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 Video Player Token under Programmatic Access:
- In your dashboard, go to My Templates, click New, go to the Storytelling 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, Video Player Token, and Template ID from the previous steps:
CREATOMATE_API_KEY=...
NEXT_PUBLIC_VIDEO_PLAYER_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
The JavaScript SDK consists of only a few source files located in the renderer folder. In order to integrate the SDK into your own web application, simply copy the files from that folder into your project.
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.