Introduction

The Motionbox client SDK (Software Development Kit) exists to give developers the tools to programatically render videos outside of the Motionbox user interface.

It has been designed to point to a source template created within the Motionbox user interface. Once you specify the ID of your template the SDK provides the tools to dynamically update objects and tracks the rendering progress via sockets.

The SDK is an abstraction to make interacting with our rendering engine easier. In order to start rendering videos with the API you will need to get your API key to authenticate

const TOKEN = ""

Including Motionbox.js

The first step is to use yarn or npm to install the @motionbox/motionbox-js module.

We encourgae the usage of modules that you can import, if you need to load the script in via a script tag, you can also use unpkg <script src="https://unpkg.com/@motionbox/motionbox-js@latest/dist/motionbox.js"></script>

yarn add @motionbox/motionbox-js

Initializing Motionbox.js

We need to call motionbox.init() because the protocol relies on websockets. By initializing we are making a connection with the server ahead of time.

If you are using React for example a good place to put this initializer would be inside componentDidMount or inside useEffect(() => { motionbox.init(); }, [])

import { motionbox } from "@motionbox/motionbox-js";

// init sockets
await motionbox.init();

Rendering Motionbox.js

The render method gives you the ability to specify a templateId and a paramater called data to insert dynamic data into the source video.

You must have a valid token to make requests, learn more about authentication here

import { motionbox } from "@motionbox/motionbox-js";

// render
await motionbox.render({
  token: TOKEN,
  templateId: TEMPLATE_ID,
  data: DYNAMIC_DATA,
  progress: ({ total, currentFrame }: any) => {
    setProgress((currentFrame / total) * 100);
  }
});

Example

https://codesandbox.io/s/thirsty-bardeen-vhmlo?file=/src/App.tsx