A Quick Guide to LiveLike: How to Enhance Live Stream Interactivity

Viewing content beyond the set-top box is the norm for modern consumers, and brands are capitalizing on live streaming to deliver entertainment, educate, advance e-commerce, connect colleagues, and more. These streaming experiences, however, are only getting more dynamic, with interactive elements that bring creators and audiences closer together. Technology provider LiveLike powers the creation of digital experiences that enable deeper audience engagement and retention, as well as new monetization opportunities. As part of the AWS Partner Network (APN), LiveLike solutions can now be easily layered with Amazon Interactive Video Service (Amazon IVS), providing customers with more options to build and interact with audiences via live video.

Fully customizable, the LikeLike platform offers a suite of prebuilt tools, such as chat features, polls, or a rewards engine, via embed code, SDK, and REST API to accommodate a range of development needs. The company also provides creative ideas and technical services as needed. Initially used in sports and media for brands like NASCAR and FOX, the technology is now employed for a range of verticals, including e-commerce, fintech, and education.

“Our strength is audience engagement, and Amazon IVS builds on that by managing the video component, and also gives us the ability to scale so that we can ultimately create a better solution for customers,” said Chelsey Rushworth, Senior VP of Sales at LiveLike. “LiveLike is built on AWS, so there’s nice synergy there, and collaborating with the Amazon IVS team has been beneficial all around. It’s enabled us to align with best-in-class services and we look forward to seeing the next generation of experiences customers create with the new capabilities.”

LiveLike paired with Amazon IVS can help brands host more dynamic live streamed video events and enhance user engagement, acquisition, and retention through interactivity within their own ecosystem. Post-stream, collected analytics, such as viewership and poll participation, can be used to inform engagement strategies for future efforts.

Below, we will look at an example of integrating LiveLike SDK with Amazon IVS as part of an interactive application.

Requirements:

1. LiveLike account
2. LikeLike application that can be created thru the [LiveLike Producer Suite]
3. A LiveLike Client ID.
4. An AWS Account to use AWS IVS.
5. A stream URL to load video

Getting Started:

To set up LiveLike, first import the SDK by including the script tag.

<script 
src="https://unpkg.com/@livelike/[email protected]/livelike.umd.dev.js"></script>

Next, initialize the LiveLike SDK using the LiveLike Client ID:

<script>
 LiveLike.init({ clientId: "<CLIENT ID>" }).then((profile) => {
   // This will generate a new profile
   console.log("LiveLike is connected!");
 });
</script>

More Information about setting up the LiveLike SDK, and installing LiveLike with NPM can be found here: https://docs.livelike.com/docs/getting-started-with-the-web-sdk

To set up the Amazon IVS player, the script tag is added:

<script src="https://player.live-video.net/1.8.0/amazon-ivs-player.min.js"></script>

The stream playback URL is used to initialize the Amazon IVS Player with a video element:

<video id="video-player" playsinline></video>
<script>
 const player = IVSPlayer.create();
 const videoPlayer = document.querySelector("#video-player");
 player.attachHTMLVideoElement(videoPlayer);
 player.load(PLAYBACK_URL);
 player.play();
</script>

More information about setting up Amazon IVS can be found here:https://docs.aws.amazon.com/ivs/latest/userguide/player-web.html

Video Metadata Widgets

In this sample, a video stream containing metadata plays. The metadata must be included in the stream at the time of video encoding. Then the metadata “cue” is fired at predetermined intervals while the stream plays. This “cue” can be listened to with an event listener.

The “cue” event can contain a “text” property, which is a string and can be stringified JSON. This can be utilized to add any arbitrary data to be encoded in the video stream. This stringified JSON can then be parsed when the “cue” is fired, allowing us to make changes in our application, such as showing some UI.

The sample uses mock metadata to show the functionality but includes an example stream with working metadata cues. You can include your own stream containing metadata to further test and make changes to this sample.

Steps:

First, the steps for getting started with the LiveLike SDK above must be followed. Next, we will place a “livelike-widgets” element on our page. This must contain the “programid” property, which can be found by following: https://docs.livelike.com/docs/retrieving-important-keys#retrieving-program-id

<livelike-widgets programid="<Program ID>"></livelike-widgets>

Next, we are going to create two functions. The first function, displayWidgetFromId will display a LiveLike widget that has been published. We will be displaying a Text Quiz widget. A widget can be published either through the LiveLike Producer Suite, or it can be published through the LiveLike API.

Once a widget has been published, the widget's id property will be available, either through the Producer Suite or through the API response that is received after publishing the widget. This widget id will be used to display the widget. The displayWidgetFromId will call the createWidgetElement method that is present on the livelike-widgets element. By passing a widget's id and kind, the widget UI will be displayed on the page:

function displayWidgetFromId(parsedMetaData) {
   const livelikeWidgets = document.querySelector("livelike-widgets");
   livelikeWidgets.createWidgetElement({
     id: parsedMetaData.widgetId,
   kind: parsedMetaData.widgetKind,
   });
 }

The second function is “displayWidgetFromData”. Our mock metadata contains “question” and “choices” properties, which will be used to instantiate the widget UI. First, since we want to display a “Text Quiz” widget, we will create the HTML element “livelike-text-quiz”. The widgetPayload object with the correct “kind” property is added to the widget HTML element, along with the “question” and “choices” properties.

Then we attach the widget to the “livelike-widgets” element using the “attach” method, and further define the behavior of the widget. In the below example the widget will be expected to:

1. Be interactive for 10 seconds, and allow answers.
2. Lock the widget for 3 seconds and display the results of the answers.
3. Remove the widget from the page.
   

function displayWidgetFromData(parsedMetaData) {
   const livelikeWidgets = document.querySelector("livelike-widgets");
   const quiz = document.createElement("livelike-text-quiz");
   quiz.widgetPayload = { kind: "quiz" };
   quiz.question = parsedMetaData.question;
   quiz.choices = parsedMetaData.choices;
   livelikeWidgets
     .attach(quiz)
     .then(() => quiz.interactive({ timeout: 10000 }))
     .then(() => quiz.results({ timeout: 3000 }))
     .then(quiz.detach);
 }

Next, we will set up the IVSPlayer to trigger the above functions based on stream metadata. The steps for getting started with the IVSPlayer above must be followed.

Once the player has been created, an event listener is added to our “player”, listening to the “PlayerEventType.TEXT_METADATA_CUE” event. The callback will provide the “cue”. To get the data from the cue, the “text” property from our “cue” event can be parsed. For sample purposes, we will use mock data for instantiating the widgets.

In the first example, the metadata contains a widget “id” and “kind” of a widget that we have already published. This is passed to the “displayWidgetFromId ” function, which will then display the widget after loading the widget data.

In the second example, we are displaying a widget from the data that we are defining. No widget needs to be published to display the widget UI using this method. The “question” and “choices” properties from the mock metadata are passed to the “displayWidgetFromData” function, which directly creates and displays our widget HTML Element.

player.addEventListener(PlayerEventType.TEXT_METADATA_CUE, function (cue) {
   //
   const parsedMetaData = JSON.parse(cue.text);
   // Mock data to display a widget from parsed data containing an existing widget id and kind.
   const mockParsedMetaData = {
     widgetId: "3e17e5df-dfbd-4d59-9f1e-80c7cff4d200",
     widgetKind: "text-quiz",
   };
   displayWidgetFromId(mockParsedMetaData.widgetId);
   // Mock data to display a widget created from data
   const mockParsedMetaData = {
     question: "Example Quiz Question",
     choices: [
       { description: "Choice 1", is_correct: true },
       { description: "Choice 1", is_correct: false },
     ],
   };
   displayWidgetFromData(mockParsedMetaData);
 });

To learn more about building with interactive live video, visit:https://aws.amazon.com/ivs/