simple example demonstrating the basics: https://vidmix.app/sdk/example1.html
A fairly minimal example on how to embed the editor would look like the following:
<div id="vidmixFrame" style="height: 450px; width: 1100px;"></div>
<script src="https://vidmix.app/sdk.js"></script>
<script type='text/javascript'>
window.vidmix = VidMixSDK.init(document.getElementById("vidmixFrame"),{layout:"canvasWithTimeline"});
</script>
The second argument of VidMixSDK.init() has the following optional configuration parameters:
| parameter name | value |
|---|---|
| layout | The UI layout to use. Possible values: "full" : the entire editor UI "canvasWithTimeline" : only the editor canvas and the timeline "canvasWithSeekBar" only the canvas with a seek bar “canvasOnly”: only the editor canvas "canvasWithSeekBarAndPanels" canvas with seek bar and the panels on the right to configure the selected layer |
| canvasWidth | width of the project canvas (default: 1920) |
| canvasHeight | height of the project canvas (default: 1080) |
| name | reference passed to callback function with “embedid” key, if you are embedding multiple instances (default: “vidmix”) |
| eventhandler | function for callback of events. Event data is passed as a first and only argument, with keys “name” and “embedid” |
| exportTarget | Either an url where the exported result is going to be uploaded with a PUT call, or “memory” in which case the eventHandler receives the created file |
The return value of VidMixSDK.init() is a context object on which the following (async) functions can be called:
| function name | behaviour |
|---|---|
| play() | Starts playing from the current timestamp of the playhead |
| stop() | Stops playing |
| seek(timestamp) | Moves the playhead to timestamp. |
| getTimestamp() | Gets the current timestamp of the playhead |
| showFilePicker() | Opens the browser Open File dialog for the user to pick a media file to include in the project |
| openMediaFile(fileBuffer, fileName) | Creates a new layer from the provided media file |
| getLayer(layerID) | Returns a dictionary with information about the layer with layerID |
| getAllLayers() | Returns an array of dictionaries, each item describing one layer in the workspace |
| updateLayer(layerInfo) | Updates a layer in the workspace. Argument is the layer object |
| addLayer(layerInfo) | Adds a layer to the workspace. Argument is a plain object describing the layer |
| deleteLayer(layerID) | Deletes the layer with layerID |
| duplicateLayer(layerID) | Duplicates the layer with layerID |
| selectLayer(layerID) | Changes layer selection. Pass null to unselect. |
| addAsset(buffer) | Adds an asset that can be later referenced by its hash. |
| getEditingMode() | get the current editing mode |
| setEditingMode(mode) | set the current editing mode. One of “rearrange”, “alphaBrushErase”, “alphaBrushAdd”, “textEdit”, “paintingBrush”, “eraserBrush”, “smudgeBrush”, “lasso”, “shapeEditing” |
| export() | starts exporting the project, same as if the user pressed the “export” button |
Common attributes of all layer types:
| key | type | value |
|---|---|---|
| id | string | unique ID of the layer. Must include this when passing a layer object to updateLayer() |
| type | string | Type of the layer |
| timeOffset | Time | Time offset of the layer |
| trimFrom | Time | At what time the layer starts. (with timeOffset applied) |
| trimTo | Time | At what time the layer ends. (with timeOffset applied) |
| position | Animated value | A 4 or 8 element vector, the positioning of the layer on the canvas. First 4 elements are: Some layer types can have 4 additional values for cropping, in top, left, bottom right order, each as 0.0-1.0 number. |
| opacity | Animated value | Opacity of the layer |
| trackIndex | integer | Which track the layer is on (in the timeline editor), also determines the order of rendering; layers with a lower trackIndex being below the ones with higher a trackIndex. |
| transitionIn | object | Transition at the beginning of the track, keys are: |
| transitionOut | object | Transition at the end of the track, similar to transitionIn |
| animationModifiers | array | Animation modifiers, each one as a Layer Animation Modifier object. |
Work in progress, at the moment not everything is wired up to the API, with getLayer() you can check what properties are exposed
One of the followings:
| type | example | description |
|---|---|---|
| number | 5, 2.3 | value in seconds |
| dictionary | {n:600, d:1200} | an object with keys “d” and “n” interpreted as a fraction with the value of “d” as denominator, and “n” as numerator |
| string | “4/30” | fractional value as string |
Using fractions is recommended to avoid rounding problems.
Object with keys “r”, “g”, “b”, “a”, representing the red, green, blue and alpha channels with a 0.0-1.0 numerical value.
sha-256 hash of a previously provided asset or url to download the asset from
One of the followings:
| type | example | description |
|---|---|---|
| number | 2.5 |
Constant, non-animated value. |
| array of numbers | [2, 3, 5.7] |
A vector with constant elements. |
| array of objects | [{time: 1.0, value: [0 ,0 ,1 ,0]}, {time: 2.0 , value: [100 ,0 ,1 ,0]}] |
Animated value, as an array of keyframes. The keys in the keyframe object: “time”: Time object “value”: Either a number or an array of numbers (for vectors): the value at the time of the keyframe. “easingbefore” : (optional) Type of easing applied. Default is no easing.(linear interpolation between keyframes) |
Dictionary with keys:
| key | type | value |
|---|---|---|
| “type” | string | “spin” | “pulse” | “shake” | “oscillate” | “wobble” | “track” |
| “params” | Animated value | Arguments of the animation, depending on the type |