PlatformGuides
Guides
Start typing to search…

Scene Transitions Module

Required Permissions: slobs.scene-transitions

This module can be used to create scene transitions. It's useful for apps to provide both editable and uneditable transitions for the streamer.

StingerTransitionOptions object

Property

Type

Description

type

'stinger'

Transition type.

name

string

The name of the transition.

url

string

A URL to a video asset. If no protocol is provided in the URL, then it is assumed to be relative, and refers to a location within your application bundle. If a protocol is provided, then the asset is assumed to be outside your app, and the domain must be included in the mediaDomains list in your application manifest.

audioFadeStyle

string?

How the audio should fade: 'fadeOut' or 'crossFade'. Defaults to 'fadeOut'.

shouldLock

boolean?

If set to true, the scene transition won't be editable by end-users after being created. Defaults to false.

shouldMonitorAudio

boolean?

Whether to monitor audio. Defaults to false.

transitionPoint

number?

A transition point in milliseconds.

transitionPointType

'time' | 'frame'

Type of transition point.

Transition object

Property

Type

Description

id

string

A unique ID for the transition.

name

string

Name of the transition.

type

string

Transition type. For now, app developers should expect this to be stinger.

duration

number

Transition duration. Not supported for stinger transitions. You should ignore this value.

TransitionConnection object

Property

Type

Description

id

string

Unique ID for the connection.

transitionId

string

Unique ID of the transition that gets applied.

fromSceneId

string

Unique ID for the originating scene.

toSceneId

string

Unique ID for the target scene.

createTransition method

createTransition: () => Promise<Transition>

Creates a scene transition. Currently, only stinger transitions are supported, as these are the most useful for customization.

Arguments

  1. options: A description of transition options. See TransitionOptions and StingerTransitionOptions.

Returns

Promise<Transition>

Example

streamlabsOBS.v1.SceneTransitions.createTransition({
  type: 'stinger',
  name: 'My Cool Stinger',
  url: 'cool-stinger.mp4',
  shouldLock: true,
});

getTransitions method

getTransitions: () => Promise<Array<Transition>>

Get a list of scene transitions.
This includes all transitions the user has set up in SLOBS. To only retrieve transitions managed by this App use getAppTransitions.

Arguments

None

Returns

Promise<Transition[]>

Example

streamlabsOBS.v1.SceneTransitions.getTransitions()
  .then(transitions => transitions.map(t => t.id));

getAppTransitions method

getAppTransitions: () => Promise<Array<Transition>>

Get a list of scene transitions belonging to this App.

Arguments

None

Returns

Promise<Transition[]> - A list of Transition objects belonging to the current App.

Example

streamlabsOBS.v1.SceneTransitions.getAppTransitions()
  .then(transitions => transitions.map(t => t.id));

deleteTransition method

deleteTransition: (transitionId: string) => Promise<boolean>

Delete a specific transition by ID.

Arguments

  1. transitionId: ID of the transition to be deleted.

Returns

true if the transition was successfully deleted.

Example

const transitionId = ...;

streamlabsOBS.v1.SceneTransitions.deleteTransition(transitionId)
  .then(() => /* handle success */)
  .catch(e => /* handle error */)

setDefaultTransition method

setDefaultTransition: (transitionId: string) => Promise<boolean>

Set a transition as the default scene transition.

Arguments

  1. transitionId: ID of the transition to be set as default

Returns

true if setting the transition as default succeeded.

Example

const transitionId = ...;

streamlabsOBS.v1.SceneTransitions.setDefaultTransition(transitionId)
  .then(() => /* handle success */)
  .catch(e => /* handle error */)

createConnection method

createConnection: (transitionId: string, fromSceneId: string, toSceneId: string) => Promise<TransitionConnection>

Create a scene transition connection between scenes.
See getScenes on the Scene module for information on how to retrieve scene IDs.

Arguments

  1. transitionId: ID of the transition to connect
  2. fromSceneId: Originating scene ID
  3. toSceneId: Target scene ID

Returns

A TransitionConnection object.

Examples

Basic

const fromSceneId = ...;
const toSceneId = ...;
const transitionId = ...;

streamlabsOBS.v1.SceneTransitions.createConnection(
  transitionId,
  fromSceneId,
  toSceneId
)
.then(conn => /* handle success */)
.catch(e => /* handle error */)

Connect the first and second scenes with a transition

// Connect the first and second scenes with a transition (no error handling)
const transitionId = ...;
streamlabsOBS.v1.SceneTransitions.getScenes()
  .then(scenes => [scenes[0].id, scenes[1].id])
  .then(([fromSceneId, toSceneId]) => {
    return streamlabsOBS.v1.SceneTransitions.createConnection(
      transitionId,
      fromSceneId,
      toSceneId,
    )
  })

getConnections method

getConnections: () => Promise<Array<TransitionConnection>

Get a list of scene connections.

Arguments

None.

Returns

A list of all connections between scenes.

Examples

streamlabsOBS.v1.SceneTransitions.getConnections().then(connections => {
  // Do something with connections.
})

deleteConnection method

deleteConnection: (transitionId: string) => Promise<boolean>

Delete a scene transition connection.

Arguments

  1. connectionId: ID of the connection to be deleted

Returns

true if the connection was successfully deleted.

Examples

const connectionId = ...;

streamlabsOBS.v1.SceneTransitions.deleteConnection(connectionId)
  .then(() => /* handle success */)
  .catch(e => /* handle error */);

Updated 23 days ago