Viewer Page

Now we need to make a player page for all of our viewers to use. First we need to add Authentication again, this time to the main app. We will be doing the same thing we did for the Admin Panel. First we will need to import the withAuthenticator function and then wrap our component in it.

  1. Navigate to src/components/App/index.jsx and put this import into Location 6

    import { withAuthenticator } from 'aws-amplify-react';
    
  2. We will then need to wrap our exports of the App component in withAuthenticator again. Go to Location 7 and replace this code:

    export default App;
    

    with this line:

    export default withAuthenticator(App);
    
  3. Now we have Authentication enabled for our default app, you can now move forward with setting up the video stream in the app. Navigate to the main game code: src/components/Game/index.jsx.

  4. We are going to now import our auto-generated file into our game. This file contains all the info about our live stream. To do this we will add a new imports file at Location 8

    import awsvideoconfig from '../../aws-video-exports';
    
  5. In the same file now we are going to add a valid source to our video to start our playback. We are going to get this url/source from our aws-video-exports file. Find Location 9 and replace the code found below.

    const url = '';
    

    with this line:

    const url = awsvideoconfig.awsOutputIVS;
    
  6. Now if you have stopped your stream you can now start it up again. You should now see your live stream on your local webserver localhost:3000! Now you can start your show and captivating your audience. Next, you’ll start showing the questions and allowing them to answer the questions. To do this we are going to be a combo of AWS AppSync’s subscriptions to receive the questions and IVS’s Time Metadata API to sync the questions.