Streamlayer

What you learn

You're instantiating DIVA Player in your web front-end and relying on third party video streaming source.
The goal of this article is to configure Streamlayer that displays advertisement banners around your video content when streamed through third-party sources.

Note Only available for DIVA Responsive Web.

Before starting

• Ensure the your video production you rely on is up and running.
• Set the <video id> and the related configuration.
• Get the EventId from StreamLayer

Defining StreamLayer plugin

The DivaWebComponent exposes a playerWrapper prop, which accepts a higher-order React component responsible for encapsulating the core DIVA player UI.
This mechanism allows for the seamless integration of additional UI layers or context providers, such as the StreamLayer plugin, by wrapping the player component tree.
Utilizing the StreamLayer component from the diva-web-streamlayer-plugin package as the wrapper enables advanced features (e.g., dynamic overlays, advertisement banners) to be injected into the player interface, while maintaining a clear separation of concerns and preserving the integrity of the core playback logic.

Instantiation

Write the Basic instantiation code.
Then implement the playerWrapper function to include the StreamLayer component as shown below.

Working sample code (.tsx)

Write the App() function to integrate the StreamLayer plugin with DIVA Player:

import React from "react";
// DIVA Player SDK
import { DivaWebComponent } from "@deltatre-vxp/diva-sdk/diva-web-sdk";
import type { DivaConfiguration, VideoMetadata, VideoMetadataClean } from "@deltatre-vxp/diva-sdk/diva-web-sdk";
import {
	StreamLayer,
	StreamLayerMode,
} from "@deltatre-vxp/diva-sdk/diva-web-streamlayer-plugin";
// Import SDK style
import "@deltatre-vxp/diva-sdk/diva-web-sdk/index.min.css";

const eventId= 'YOUR_EVENT_ID_HERE'; // Replace with your actual streamlayer event ID
const mode= StreamLayerMode.LBar; // forced mode for streamlayer

const libs = {
  mux: "https://cdnjs.cloudflare.com/ajax/libs/mux.js/6.2.0/mux.min.js",
  shaka: "https://cdnjs.cloudflare.com/ajax/libs/shaka-player/4.11.2/shaka-player.compiled.js",
  hlsJs: "https://cdn.jsdelivr.net/npm/hls.js@1.5.7",
  googleIMA: 'https://imasdk.googleapis.com/js/sdkloader/ima3.js',
  googleDAI: 'https://imasdk.googleapis.com/js/sdkloader/ima3_dai.js',
  googleCast: 'https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1',
  threeJs: 'https://cdnjs.cloudflare.com/ajax/libs/three.js/0.148.0/three.min.js',
};

const config: DivaConfiguration = {
  videoId: "<video id>",
  libs: libs,
  setting: {
    general: {
      culture: 'en-GB',
      timeToDisableAutoplay: 5400000,
    },
  }, 
  dictionary: {
    messages: {},
  },
  videoMetadataProvider: async (
    videoId: string,
    currentVideoMetadata?: VideoMetadataClean,
    playbackState?: {
      chromecast?: boolean | undefined;
    }): Promise<VideoMetadata> => {
    return {
      "title": "Video Title",
      "sources": [
        {
        "uri": "<stream URL>",
        "format": "HLS"
        }
      ],
      "videoId": "<video id>",
    }
  },
};

export const App = () => {
  const PlayerWrapperFunc = useMemo(() => { 
    if (isEmptyString(eventId)) { return undefined; } 
      return ({ children }: { children: React.ReactNode }) => { 
        const videoPlayerController = { 
          mute: () => { divaApi?.mute(true); }, 
          unmute: () => { divaApi?.mute(false); }, 
          isMuted: () => divaApi?.getVolume() === 0, 
        }; 
      return (<StreamLayer forcedMode={mode} eventId={eventId} videoPlayerController={videoPlayerController} onActiveChange={console.log}> { children } < /StreamLayer> ); 
    }; 
  }, []); 

  return <DivaWebComponent config={config} playerWrapper={playerWrapperFunc}/>;
};

StreamLayer Plugin Properties

• eventId (string, required): The unique identifier for the StreamLayer event, used to fetch and display relevant overlays and advertisements.
• forcedMode (StreamLayerMode, optional): Specifies the display mode for the StreamLayer overlays. Possible values include side-panel | l-bar | overlay | off. This property allows you to control where the overlays appear on the video player.
• videoPlayerController (object, optional): An object that provides methods to control the video player's state, such as muting and unmuting audio. This allows the StreamLayer component to interact with the video player for a seamless user experience.
• onActiveChange (function, optional): A callback function that is triggered when the active state of the StreamLayer changes. This can be used to monitor when overlays are shown or hidden.
• persistent (boolean, optional, default true): When set to true, StreamLayer will show the ad every time.
• skipTypeCheck (boolean, optional, default true): If you want to render all ads in the sidebar or overlay without type checking.
• externalAd (boolean, optional, default true): If true, it indicates that the ads are being served from an external source.