This documentation shows an example of creating a single video using Shakr Editor SDK. To see each steps at a glance, take a look at Editor SDK flow.
You can create a video by creating a RenderSession object. Each RenderSession represents single video, and after you create an empty RenderSession, you get RenderSession ID that can be used to load up the Shakr Editor.
Let's make a RenderSession based on TemplateStyleVersion ID that we have obtained from previous steps.
When a RenderSession is successfully created, RenderSession ID and Edit Token are returned.
- RenderSession ID: Unique ID of the created RenderSession. As Shakr API does not create and manage users, you can save this ID to your database and tie it to your users.
- Edit Token: Edit Token is a scoped access token that can only access this RenderSession. This token is used to call Editor SDK.
While it is possible to use server access token to access Editor SDK, it should be avoided as it can allow accessing other user's videos or abnormally increase API usage and cost. Use edit_token on Editor SDK whenever possible as it only has limited access to the current RenderSession. Please refer to Authentication documentation to learn more.
You can install and use SDK in various ways. While in this sample we're directly injecting
<script> tag for a quick test, you can also use it by installing the npm package, which supports ES module syntax and TypeScript type annotations. For more information, please refer to Installation documentation.
To add Shakr SDK to your page, insert
<script> tag of the SDK above the
<script> tag that includes your application's code.
For security, Editor SDK requires HTTPS connections via Content Security Policy (CSP) headers. If you load Editor SDK under HTTP connection, browser will prevent SDK from loading. You can use HTTPS server with self-signed SSL certificate on your local testing environment.
The sample code below shows how to create a ShakrEditor instance. Replace ACCESS_TOKEN with
edit_token, and RENDER_SESSION_ID with an empty RenderSession ID that you have created.
ShakrEditor instance emits many events, and you need to handle few events that are necessary for Editor SDK usage. More information around events can be found on Handling Events documentation.
For example, if you want to handle an event named EVENT_NAME, you can use this code to add event listener to handle events.
You can launch an editor by using
.launch() function on ShakrEditor instance. After loading the Editor, load event will be called.
While the editor closes automatically when the video editing is finished, you can close the editor manually with
.close() function, confirm_close event will be emitted when there are unsaved changes. After confirming with the user, you can use
.close(true) function to close the Editor.
There are two ways to know when video is ready. You can select the method based on your use case.
- No additional server-side code needed.
- Render progress is displayed inside the editor.
- User does not have to keep the browser open until the render finishes.
- Use when you want to limit downloads, as the video URL is not exposed to the client.
In this guide, we'll use wait_rendering method as it doesn't require additional server-side code. Please refer to Get notified with webhooks to learn more about using webhooks.
wait_rendering: true option when creating a ShakrEditor instance. When finish event is emitted, it will contain a URL for video download.
Using all the essential features above, you can write the code like below to integrate Editor SDK.
Congratulations, you have successfully integrated Editor SDK to your web application! 🎉
There are more features and options you can use to customize Editor SDK experience. Use these extra features to show custom media library to users,make it on-brand, and more.
Refer to Handling Errors documentation to learn more about errors you may encounter.