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

JavaScript

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

JavaScript

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

JavaScript

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

JavaScript

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

JavaScript

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

JavaScript

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

JavaScript

// 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

JavaScript

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

JavaScript

const connectionId = ...;

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