Replay Integration Guide

Project Goal

Create an interactive gameshow experience that allows movie fans to answer trivia questions.

Roles

  • Reactive provides the backend office functions to power the event.
  • N Plus Labs creates the consumer-facing experience using Reactive's APIs.

Background On Reactive

Reactive is a SAAS company that powers live events and interactive shoppable videos on e-commerce websites. Here's an overview of how Reactive works and the interactive features you can integrate into the N Plus Labs client experience.

Project Execution Overview

As seen in the above video, you'll use Reactive's Streamer App to manage the stream and its interactive events. Your task will be to integrate Reactive's APIs into a mobile experience to display these interactive events for the fans of the movie. Because N Plus Labs will use pre-recorded video, you'll integrate with Reactive's Replay architecture to create a corresponding interactive pre-recorded experience.

The pre-recorded experience will allow you to skip these integration steps:

  • Integrate with our streams endpoint to get the video feed for the live event.
  • Integrate with our chat service to allow users to communicate during the stream.
  • Integrate with our view-counts service to allow the app to display the number of fans watching.
  • Integrate our quiz results event to show the number of winners and the individual prize amount.

High-level Overview Of Integration Steps

  • Integrate with our authentication service.
  • Play the stream in a low-latency video player on the client.
  • Integrate our events-stream service to display what's happening in the live event.
  • Integrate with our polls service to allow fans to answer trivia questions.

Integration Details

Authorizing clients

To access Reactive's backend services, you must include a JWT token in each request. Follow the instructions in our autentication documentation to learn how to get and include this token for each client. We suggest you use the viewer's email address or user ID as the unique_user_identifier so we can easily communicate the winners to your team.

Play the stream in your app

To play the event's live video feed in the app, you should implement a video player that plays low-latency HLS or DASH live streams. See our guide detailing different video players you can use. Ensure you tune the player to have as low latency as possible without causing buffering. After the N Plus Labs Team provides Reactive with the pre-recorded video, Reactive will give you the HLS and DASH manifest urls for you to add to your implemented player to display the stream in the app.

Integrate with events-stream service

The events-stream service is the core engine of the Reactive experience that allows the client to display what's happening in the event. Follow our event-stream API documentation to understand how to retrieve what occurred in a particular slice of time. Data for the event begins at the 0 interval. Your implementation should start fetching data at the 0 interval and then fetch new data every 250 milliseconds until the event ends.

Integrate with Polls service

Integrate with our polls service to allow fans to answer trivia questions.

Here's how the implementation will work:

  • The events-stream service will publish a trivia question to clients.
  • The client will record the viewer's answer by POSTing to the polls service.
  • The client will store the viewer's answer until the question results are returned.
  • After the question has been open for 10 seconds, the trivia question's results and answer will be published through the event stream service.
  • The client will compare the correct answer in the published results to the viewer's response.
    • If they answered correctly, let them continue playing the game.
    • If they did not, move them to the post-playing experience.