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 synthax. It’s important to note that standard DOM components, such as <div/>, are not supported. Instead, you should use Smelter-specific components, such as:

• Image
• InputStream
• Rescaler
• Shader
• Text
• Tiles
• View
• WebView

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.

Caution

Despite some of the component names overlapping with React Native, the supported styles differ. Visit a specific component section to see supported styles.

Hooks

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

• useInputStreams
• useInputAudio

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 inputType. Right now, we support two input types:

• MP4
• RTP

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. Currently, we support the same output types as input types:

• MP4
• RTP

Renderers

Describe renerers Right now we support three renderers:

• Shader
• Image
• WebRenderer