OfflineSmelter

import { OfflineSmelter } from "@swmansion/smelter-web-client"

OfflineSmelter class is a primary way of interacting with the Smelter server for offline processing e.g. if you need to combine few mp4 files together. It has simplified API compared to the Smelter class, optimized for rendering just one output file as a result.

Usage

To use Smelter follow this life cycle:

• Create instance new Smelter().
• Call await smelter.init().
• (optional) Register inputs, outputs or other resources.
• Call await smelter.render().

Example

import { OfflineSmelter } from "@swmansion/smelter-web-client"

async function run() {
  const smelter = new OfflineSmelter({ url: "http://127.0.0.1:8081" });
  await smelter.init()
  // register inputs
  await smelter.render(<View />, {
    type: "mp4",
    serverPath: "./output.mp4",
    video: {
      encoder: { type: "ffmpeg_h264" },
      resolution: { width: 1920, height: 1080 },
    },
    audio: {
      channels: "stereo",
      encoder: { type: "aac" },
    }
  });
}
void run();

new OfflineSmelter()

Creates a new offline smelter instance. You have to call init() first before this object can be used.

new OfflineSmelter(manager?: SmelterManager);

Type definitions

type SmelterOptions = {
  url: string
}

init()

smelter.init(): Promise<void>

Initialize the Smelter instance. It will establish a connection to the Smelter server and reset its state.

After init() you can start connecting inputs/outputs or register other elements. However, no output stream will be produced until start() method is called.

render()

import React from "react";

smelter.render(
  root: React.ReactElement,
  output: RegisterOutput,
): Promise<object>

Type definitions

import {
  RegisterRtpOutput,
  RegisterMp4Output,
  RegisterHlsOutput,
  RegisterWhipClientOutput,
  RegisterWhepServerOutput,
  RegisterRtmpClientOutput,
} from "@swmasnion/smelter"

type RegisterOutput =
  | ({ type: 'rtp_stream' } & RegisterRtpOutput)
  | ({ type: 'mp4' } & RegisterMp4Output)
  | ({ type: 'hls' } & RegisterHlsOutput)
  | ({ type: 'whip_client' } & RegisterWhipClientOutput)
  | ({ type: 'whep_server' } & RegisterWhepServerOutput)
  | ({ type: 'rtmp_client' } & RegisterRtmpClientOutput);

Register external destination that can be used as a smelter output. Visit output documentation to learn more:

• MP4
• HLS

Note

WHIP, WHEP, RTMP and RTP are also supported. However, the Smelter produces frames as fast as possible in this mode, so these real-time protocols, might not make sense.

registerInput()

import { Inputs } from "@swmasnion/smelter"

Smelter.registerInput(
  inputId: string,
  input: Inputs.RegisterInput,
): Promise<object>

Type definitions

import {
  RegisterRtpInput,
  RegisterMp4Input,
  RegisterHlsInput,
  RegisterWhipServerInput,
  RegisterWhepClientInput,
  RegisterRtmpServerInput,
} from "@swmasnion/smelter"

type RegisterInput =
  | ({ type: 'rtp_stream' } & RegisterRtpInput)
  | ({ type: 'mp4' } & RegisterMp4Input)
  | ({ type: 'hls' } & RegisterHlsInput)
  | ({ type: 'whip_server' } & RegisterWhipServerInput)
  | ({ type: 'whep_client' } & RegisterWhepClientInput)
  | ({ type: 'rtmp_server' } & RegisterRtmpServerInput);

Register external source that can be used as a smelter input. Visit input documentation to learn more:

• MP4
• HLS

Note

WHIP, WHEP, RTMP and RTP are also supported. However, the Smelter produces frames as fast as possible in this mode, so these real-time protocols, might not make sense.

registerImage()

import { Renderers } from "@swmansion/smelter"

Smelter.registerImage(
  imageId: string,
  image: Renderers.RegisterImage,
): Promise<void>

Register an image asset. See RegisterImage to learn more.

registerShader()

import { Renderers } from "@swmnasion/smelter"

Smelter.registerShader(
  shaderId: string,
  shader: Renderers.RegisterShader,
): Promise<void>

Register a shader. See RegisterShader to learn more.

registerFont()

smelter.registerFont(source: string | ArrayBuffer): Promise<void>

Register a new font, that can be used when rendering <Text> component.