Skip to main content

Multiview

What you learn​

You're instantiating DIVA Player in your web front-end and relying on DIVA Back Office as the video streaming source.

The goal of this article is to build the simplest front-end to stream a video from the DIVA Back Office with enabled multiview.

Before starting​

  • Ensure the DIVA Back Office instance you rely on is up and running.
  • Ask your video engineers team the <video id> and the related <settings URL>.

Instantiation​

Enrich the Basic instantiation code with

  • videoId It's a string array of up to 4 videoIds to display in multiview mode.
  • multiviewMode optionally added into the config parameter. multiviewMode's value is multiview by default, so even if not set, the videos are shown in side-by-side or in a grid layout, depending on the number of videoIds present in the videoId array. When 'videoIds` contains more than 4 elements, only the first 4 ones are processed. Instead if the multiviewMode's value is pip only two videos are shown in a Picture-in-Picture layout.

This is for starting Diva with more than one video in multiview mode.

The Multiview mode is available also if at least one of the videolist item inside videoMetadata has as behavior "multiview" or "multistreamMultiview". In that case, the multiview button will appear in the bottom right corner of the player, and the user can add/remove videos from the multiview list.

Working sample code (.tsx)​

import React from "react";
import { DivaWebBoAdapter } from "@deltatre-vxp/diva-sdk/diva-web-bo-adapter";
import "@deltatre-vxp/diva-sdk/diva-web-sdk/index.min.css";

const videoIds = "<videoId1>, <videoId2>, <videoId3>, <videoId4>";

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: false,
  googleDAI: false,
  googleCast: false,
  threeJs: false
};

const config = {
  videoId: videoIds,
  libs: libs,
  multiviewMode: "multiview"
};

const props = {
  settingsUrl: "<Settings URL>",
  languageCode: "en-US",
  languageDictionary: "en-US",
  onDivaBoAdapterError: console.error,
  config: config
}

function App() {
  return (
    <DivaWebBoAdapter
      {
      ...props
      }
    />
  );
}

export default App;