Background

Please make sure you are familiar with the Architecture Overview before proceeding with this integration.

Prerequisites

System Requirements

• Node.js / JavaScript or TypeScript environment
• React application

Supported Platforms

This SDK supports TV applications on:

• LG WebOS
• Samsung Tizen
• Hisense VIDAA OS
• Xbox

Obtain an SDK API Key

You need an SDK API key to integrate StreamLayer into your application.

If you don't have one:

1. Provide your email to StreamLayer support.
2. We'll create an organization and set up your dashboard.
3. You'll receive an invitation email with admin panel credentials.
4. After accessing the admin panel, generate your API key from the Developer Settings section.

This API key authenticates your app and is required for all SDK interactions.

Installation

Install the @streamlayer/web-os dependency:

npm install @streamlayer/web-os

Adding Styles

• Import in your app:

  JSX

  import '@streamlayer/web-os/style.css'

Integration

Basic Terminology

• SDK Key: Organization-specific identifier that authenticates your app.
• Event ID: Unique identifier for the event you want to interact with.
• StreamLayerProvider: React component that initializes the SDK and provides context.
• StreamLayerSDKTv: Main interactive UI

Introduction

StreamLayerProvider is the main entry point. It initializes the SDK and configures it via its props.

Place and Configure StreamLayer

Wrap only the parts of your app that require StreamLayer features.

Important:

• Only one StreamLayerProvider is allowed in your app.
• Do not use CSS to hide or show StreamLayerProvider. Use conditional rendering based on state or props.
• The SDK core initializes once when StreamLayerProvider mounts and destroys on unmount.
• Initialization loads required resources. For a smooth experience, render StreamLayerProvider in advance.

Example:

import { StreamLayerProvider, StreamLayerSDKTv } from '@streamlayer/web-os'
import '@streamlayer/web-os/style.css'

export const Main = () => (
  <StreamLayerProvider sdkKey="your-sdk-key" event="your-event-id">
    <StreamLayerSDKTv>
      <video />
    </StreamLayerSDKTv>
  </StreamLayerProvider>
)

Platform-Specific Considerations

For platform-specific notes and testing tips, see:

• WebOS Getting Started
• TizenTV Getting Started
• VIDAA OS Getting Started
• Xbox Getting Started

Next Steps

• Exposed Pause Ad – Learn how to implement pause ad functionality
• Split Components – Use individual components for custom UI layouts