Advertising

Test Advertising:

The Test Advertising integration provides a quick way to explore StreamLayer’s advertising capabilities in a live or simulated environment. It allows a moderator to manually or automatically insert contextual ads tied to game action or triggered on a fixed schedule (e.g., every 5 minutes).

Ads can be delivered as notifications and overlays or in a squeeze-back L-bar format. Depending on the ad format, viewers can interact with them in various ways, such as:

  • Saving a promotion to their digital wallet
  • Scanning a QR code
  • Opening another application or web page

During testing, the standard StreamLayer launch menu and other feature sub-menus will be hidden to focus on the ad experience.

For this test setup:

  • A moderator will use StreamLayer Studio to create and activate ads.
  • The StreamLayer team will provide your team with Studio access so you can create, post, and moderate advertising content.

This test is an effective way to evaluate how interactive advertising can be deployed across different types of programming.


Uber Eats

L-Bar

1052

Overlay


Integration Steps

Install the StreamLayer SDK

The SDK is distributed via a Maven public repository. Add the following dependency to your module level build.gradle script. And choose one dependencie for internal player

dependencies {
   implementation "io.streamlayer:androidsdk:<insert latest version>"
   // choose on of dependencies
   implementation "io.streamlayer:android-exoplayer:<insert latest version>" // based on exoplayer
   implementation "io.streamlayer:android-media:<insert latest version>"
}

You can find the latest version here.

Also add the following dependency to your project level build.gradle script.

allprojects {
    repositories {
        ...
        mavenCentral() // add this line
        maven { url "https://jitpack.io" } // add this line
    }
}

Initialize the SDK**

Import the StreamLayer class into your Application class and initialize the SDK when the app is created using StreamLayer.initializedApp() function with the SDK key.

import io.streamlayer.sdk.StreamLayer
import io.streamlayer.sdk.exoplayer.StreamLayerExoPlayer
import io.streamlayer.sdk.media3.StreamLayerMedia3Player

override fun onCreate() {
    super.onCreate()
    // initialize sdk with your key
    StreamLayer.initializeApp(this, ”SL_SDK_KEY”)
    StreamLayer.setInvitesEnabled(false)
    
    // initialize a player
    StreamLayerMedia3Player.initSdk(this)
    // or
    StreamLayerExoPlayer.initSdk(this)
}

Note: You need to replace SL_SDK_KEY with the SDK Key that has been provided to you by the StreamLayer team.

Set up Gamification options
Turn off Gamification feature:

import io.streamlayer.sdk.StreamLayer

override fun onCreate() {
    super.onCreate()
    // set gamification options
    StreamLayer.setGamificationOptions(StreamLayer.GameOptions(
            isGlobalLeaderboardEnabled = false,
            isInvitesEnabled = false,
            isOnboardingEnabled = false,
            showGamificationNotificationOnboarding = false
        ))
}

Set up StreamLayerFragment in Activity

The SDK provides io.streamlayer.sdk.main.StreamLayerFragment - fragment which contains all supported features of SDKs. You can add it programmatically or add to the activity xml layout. Importantly, you need to use the same android:tag=StreamLayerFragment for any version of the SDK fragment. We suggest using the latest FragmentContainerView to insert the fragment. For example, in your activity layout add the following.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="<http://schemas.android.com/apk/res/android>"  
    xmlns:app="<http://schemas.android.com/apk/res-auto>"  
    xmlns:tools="<http://schemas.android.com/tools>"  
    android:id="@+id/container"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent">

    <com.google.android.exoplayer2.ui.StyledPlayerView
        android:id="@+id/playerView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:auto_show="false"
        app:hide_on_touch="false"
        app:keep_content_on_player_reset="true"
        app:layout_constraintDimensionRatio="H,16:9"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:resize_mode="zoom"
        app:surface_type="surface_view"
        app:use_controller="false"
        tools:background="@tools:sample/backgrounds/scenic" />

    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/streamLayerFragment"
        android:name="io.streamlayer.sdk.main.StreamLayerFragment"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:tag="StreamLayerFragment"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

In the above example, the StreamLayer overlay will take up the entire space of screen, but when expanded, the overlay should reach the bottom of the PlayerView. In this case you need to set the overlayHeightSpace parameter for SDK - you can do it programmatically in your Activity:

private val layoutListener = View.OnLayoutChangeListener { view, _, _, _, _, _, _, _, _ ->
        view?.let {
            if (view.height > 0 && isScreenPortrait()) {
                withStreamLayerUI { overlayHeightSpace = view.height }
            }
        }
    }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityGamificationBinding.inflate(layoutInflater)
        setContentView(binding.root)
        binding.playerView.addOnLayoutChangeListener(layoutListener)
    }

The StreamLayerFragment was added to your activity layout - now you need to configure the Gamification ui feature only. StreamLayer SDK contains a rich set of features and ui views. Depending on your application and your use of the StreamLayer SDK you can configure it on your demand. Please use this code in your activity:

override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        // disable sdk ui views
        withStreamLayerUI {
            isLaunchButtonEnabled = false // disable launch button
            isWhoIsWatchingViewEnabled = false // disable who’s watching button
            isWatchPartyReturnButtonEnabled = false // disable return to watch party button
            isTooltipsEnabled = false // disable show tooltips
            isMenuProfileEnabled = false // disable menu profile
            inAppNotificationsMode = SLRAppHost.NotificationMode.List(
                     listOf(
                              SLRAppHost.NotificationMode.Feature.GAMES
                    )
            ) // enable only Games
        }
    }

If L-bar squeeze back formats are desired, enable L-bar in the app.**

To always enable L-bars so that all content is presented in this format, set the config value: 'SLRAppHost.OverlayLandscapeMode.LBAR'

If you have 'overlayLandscapeMode = OverlayLandscapeMode.START' instead, StreamLayer's gamification feature and promotions will be in overlays unless promotions are selected as L-bar in StreamLayer Studio.

lbarMode

The lbarMode property of SLRAppHost.OverlayLandscapeMode.LBAR allows you to configure how the L-bar (lower banner area) behaves in relation to available space. Here are the available options:

  • SLRAppHost.LBarMode.FULL:
    Use this mode when you want the L-bar to always occupy the lower space, regardless of whether there is a banner present. This ensures that the reserved space for the L-bar remains constant, even if no banner is displayed.

  • SLRAppHost.LBarMode.SIDE_BAR:
    Use this mode when you want the L-bar to only occupy space when a banner exists. If no banner is present, the lower space will not be shown, allowing the content to fully utilize the space.

    withStreamLayerUI { lbarMode = SLRAppHost.LBarMode.FULL }

Set up SDK AudioDucking**

To ensure the best user experience, Games overlay may require a decrease in the main video's audio level. The SDK will request the host app lower the volume of the current stream when users start to play video in Games or Insight/Tweet overlays. The StreamLayer class provides an interface with a callback function to notify when audio ducking is required. This will require you to implement SLRAppHost.Delegate. Don’t forget to add and remove your listener when it’s needed. Check this code as example:

class GamificationActivity : AppCompatActivity() {

    // exo player helper
    private val exoHelper: ExoPlayerHelper by lazy {
        ExoPlayerHelper(this, getString(R.string.app_name))
    }

    // app host delegate
    private val appHostDelegate = object : SLRAppHost.Delegate {

        override fun requestAudioDucking(level: Float) {
            exoHelper.notifyDuckingChanged(true, level)
        }

        override fun disableAudioDucking() {
            exoHelper.notifyDuckingChanged(false)
        }

        override fun setAudioVolume(value: Float) {
            exoHelper.player.volume = value
        }

        override fun getAudioVolumeListener(): Flow<Float> = exoHelper.getAudioVolumeListener()
    }
    

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
         // set host app player
        withStreamLayerUI { delegate = appHostDelegate }
    }


   override fun onDestroy() {
        withStreamLayerUI { delegate = null }
        super.onDestroy()
        // release player
        exoHelper.release()
   }

}