TypeScript SDK

TypeScript SDK is a library that provides a set of React components, hooks, and utility functions you can use to control how Smelter manipulates videos. In this section, we’ll briefly describe its interface so you can get the general impression of how to process multimedia using Smelter TypeScript SDK.

Smelter

The primary element required to start using the Smelter TypeScript SDK is the Smelter class. This class is crucial for initializing and managing the Smelter server instance. You can import Smelter class from:

@swmansion/smelter-node
@swmansion/smelter-web-wasm

Visit Smelter class documentation for more details.

Components

Smelter TypeScript SDK draws heavy inspiration from React Native in terms of the syntax. It’s important to note that standard DOM components, such as <div/>, are not supported. Instead, you should use Smelter-specific components, such as:

Styling

Smelter components can be customized in a way similar to React inline styling. Most of the components accept style prop - an object defining custom visual aspects. However, some of the animation-related customizations, such as transition are handled by specific dedicated props.

Hooks

Our hooks are primarily designed for managing stream configurations and accessing information about them. Smelter currently offers following hooks:

You’re free to use any standard React hooks such as useState, useEffect, and more.

Inputs

You can handle most of the stream composing by using React components. However, delivering multimedia to the smelter requires registering the input beforehand. You can register an input by using Smelter.registerInput, which accepts inputId and object representing input configurations. Supported inputs depend on the runtime.

Node.js:

Browser (WASM):

After registering the stream, you can use it in composition by using InputStream component.

<InputStream inputId="example_input" />

Outputs

Similar to inputs, outputs require registering them before they can be utilized. You can register an output by using Smelter.registerOutput.

Node.js:

Browser (WASM)

Resources

Other than inputs and outputs the smelter supports few other types of entity types that need to be registered.