Reactive's Integration Guide For N Plus Labs

Project Goal

Create a live 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.

High-level Integration Steps

  • Integrate with our authentication service.
  • Integrate with our streams endpoint to get the video feed for the live event.
  • 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 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 with our polls service to allow fans to answer trivia questions.
  • Integrate our quiz results event to show the number of winners and the individual prize amount.

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.

Displaying the live stream

You'll start and end streams through the Reactive Streamer App. The client should fetch what streams are live through our streams list endpoint. Streams are ordered by the newest first, so select the first one in the returned list. Store the ID of the returned stream so you can use it in later requests to our other interaction services.

Need help getting setup to stream on the Reactive Streamer-app? Follow our guide.

Play the live 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. Provide the DASH or HLS URL you received when fetching the active stream in the previous step to your implemented player to display the live 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 live event. Follow our event-stream API documentation to understand how to retrieve what occurred in a particular slice of time. Use the returned events to decide what interactions to display to the viewer. The stream's producer will control displaying these interactions through the Streamer App. The events-stream service will report the producer's actions to the client.

Integrate with the chats service

Communicate viewer chats to the stream's participants through our chats service. The events-stream service relays recent chat messages every 250 milliseconds. You can also indicate whether the customer sent a crowd noise reaction if you'd like to have a similar experience to the Reactive Live Shopping app.

Integrate with our view-counts service

Integrate with our view-counts service to allow the app to display the number of fans watching. This integration will require time-sensitive scheduling, just like the integration with the events-stream service. Reported view counts will show up every second through the events stream service.

Integrate with Polls service

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

Here's how the implementation will work:

  • The stream's producer will trigger the event's trivia questions from the Streamer App.
  • The events-stream service will notify clients of the new trivia question.
  • 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.

Implement Quiz Results event

When the stream's producer has finished asking trivia questions, they will trigger the quiz-results interaction. It will signal the end of the game and allow you to show the number of winners and individual payout amounts to the viewer.

Here's how the implementation will work:

  • The event-stream service will publish a request-quiz-winners event when the producer triggers the quiz results interaction.
  • When clients get the request-quiz-winners event:
    • If they have not answered a question wrong, they should post to the quiz-results endpoint.
    • If they have answered a question incorrectly. They should do nothing.
  • After a second has passed, the events-stream service will respond with the count of winners through the quiz-winners event.
  • When the client receives this event:
    • If the viewer won, display a winning screen and divide the prize money by the reported number of winners to get the viewer's payout.
    • If the viewer loses, show a winners get X payout screen by dividing the prize money by the number of winners.
  • After the event, Reactive will provide N Plus Labs with a list of winners to make payouts to who have passed our fraud analysis.