You can find a complete StreamLayer Roku SDK sample project in our repository:

https://github.com/StreamLayer/roku-sdk-sample

This sample demonstrates:

• Initializing the StreamLayer SDK
• Loading the SDK package dynamically via sdkUri
• Attaching a Roku video player (Video) to the SDK
• Wiring event sessions using setEvent()
• Observing StreamLayer events such as promoVisible
• Handling focus transfer between the host UI and StreamLayer UI
• Rendering interactive overlays inside a SceneGraph layout

The repository includes a reusable SLSDK module containing:

• SLView — public-facing component used by the Roku application
• SLManager — internal controller responsible for the SDK lifecycle
• StreamLayerSDK.pkg — the StreamLayer UI bundle

The SLSDK folder is fully self-contained and can be copied directly into any Roku channel to enable StreamLayer integration.

Adding the StreamLayer SDK to Your Roku Project

The StreamLayer UI bundle is distributed as a .pkg component library. Add it to your Roku project under:

shared/
└── StreamLayerSDK.pkg

Reference it in your SceneGraph XML:

<Library
    id="SLSDKLibrary"
    uri="pkg:/shared/StreamLayerSDK.pkg" />

SDK Initialization

Before StreamLayer can render overlays, you must initialize the SDK.

Call the initialize function on your SLView component:

m.slView.callFunc("initSdk", {
    apiKey: "YOUR_API_KEY",
    apiUrl: "STAGING | PROD",
    playerRef: m.videoPlayer,
    sdkUri: "YOUR_COMPANY_SDK_URI",
    isLoggingEnabled: true,
    isAnalyticsEnabled: true,
    isVastModeEnabled: false ' true = VAST-only, false = full mode
})

The initialization process performs the following steps:

• Loads the StreamLayer SDK library from the provided sdkUri
• Creates the internal StreamLayer root node
• Attaches the provided video player reference
• Initializes and starts the StreamLayer rendering engine
• Initializes and starts the StreamLayer rendering engine
• Optionally enables logging, analytics, and ad-specific behavior based on configuration flags

Attaching the Video Player

StreamLayer requires a reference to your Roku video node so that overlays synchronize correctly with playback.

Supported video nodes include:

• Video

Attach the player:

slView.attachPlayer(m.videoPlayer)

StreamLayer uses this reference to:

• coordinate overlay timing
• manage UI focus
• adjust layout around your video player

Managing Event Sessions

Whenever the user switches a game, event, or stream, notify StreamLayer using setEvent():

slView.setEvent("event_id_here")

This updates all event-specific content, including:

• interactive overlays
• ads configured for that event

You can call this multiple times during playback.

Promo Visibility Events

StreamLayer notifies your application when promotional overlays become visible.

Observe the field:

m.slView.observeField("promoVisible", "onPromoVisibleChanged")

Example handler:

sub onPromoVisibleChanged()
    visible = m.slView.promoVisible
    ?"Promo is now visible: " + visible.toStr()
end sub

Cleaning Up the SDK

If you want to clean up the SDK and remove the StreamLayer view from your scene, you can dispose it:

slView.disposeSdk()

This will:

• remove the StreamLayer node from your UI
• clear all overlay components
• unregister all internal SDK listeners

⚠️ Important: After disposing the SDK, it becomes fully inactive.
If your application returns to a StreamLayer-enabled playback screen, you must call initialize() again.

Focus Handling

StreamLayer uses standard Roku focus rules for interactive elements like ads, trivia, and predictions.

To give StreamLayer focus:

slView.focus = true

To return focus to your application:

slView.focus = false