Live Streaming Service

We’ll start by building a live streaming service that can receive a source signal from a studio, transcode the source into Adaptive BitRate (ABR), and serve the stream to our application. ABR streaming protocols like Apple HTTP Live Streaming (HLS) allow clients to access the live stream over HTTP and provide the best viewing experience to users based on their last-mile network conditions. You’ll use Amazon Interactive Video Service (IVS) to host the live stream. IVS is a simple live streaming service that takes care of the ingest, processing, delivery of interactive live streams.

Sure, you could use the AWS Console or even AWS CloudFormation, but you’re an app developer in a hurry and not interested in writing YAML or JSON. You plan to use AWS Amplify CLI/SDK for the mobile app, maybe there’s a way to manage your live streaming infrastructure with the same tools? Luckily, you heard of an AWS Amplify plugin called “Amplify Video” that does just this very thing. Let’s get building!

  1. First, we need to change directories to the root folder of our project.

    $ cd UnicornLive
    
  2. Next we are going to begin development of our Amplify project by using the initialization command. This command creates new AWS backend resources (in this case a single S3 bucket to host your CloudFormation templates) and pulls the AWS service configurations into the app!

    $ amplify init
    
  3. Follow the prompts shown below.

     $ amplify init
    
     Note: It is recommended to run this command from the root of your app directory
     ? Enter a name for the project: unicornlive
     ? Enter a name for the environment dev
     ? Choose your default editor: Visual Studio Code
     ? Choose the type of app that you're building: javascript
     Please tell us about your project
     ? What javascript framework are you using: react
     ? Source Directory Path:  src
     ? Distribution Directory Path: build
     ? Build Command:  npm run-script build
     ? Start Command: npm run-script start
     Using default provider  awscloudformation
    
     For more information on AWS Profiles, see:
     https://docs.aws.amazon.com/cli/latest/userguide/cli-multiple-profiles.html
    
     ? Do you want to use an AWS profile? Yes
     ? Please choose the profile you want to use default
    
     
  4. Now, we are going to add the amplify video module to the project.

    $ amplify video add
    
  5. Follow the prompts as shown below.

     $ amplify add video
     ? Please select from one of the below mentioned services: Interactive Livestream (Beta)
     ? Provide a friendly name for your resource to be used as a label for this category in the project: mylivestream
     ? Choose the quality of stream: HD Stream
     ? Choose the latency type: Ultra-low latency - Near real-time
     

    Above we provided a channel name that is used to generate a CloudFormation template that stands up the stream and stream key that you can use.

  6. Once the prompt completes you can verify you have a new resource created by running:

     $ amplify status
     Current Environment: dev
    
     | Category | Resource name      | Operation | Provider plugin   |
     | -------- | ------------------ | --------- | ----------------- |
     | Video    | mylivestream       | Create    | awscloudformation |
    
     
  7. Now it is time to create our resources. To do so we can simply run.

     $ amplify push
     ✔ All resources copied.
     ✔ Successfully pulled backend environment dev from the cloud.
    
     Current Environment: dev
    
     | Category | Resource name  | Operation | Provider plugin   |
     | -------- | -------------- | --------- | ----------------- |
     | Video    | mylivestream   | Create    | awscloudformation |
     ? Are you sure you want to continue? Y
     
  8. Grab coffee or browse your favorite tech blog. It will take a few minutes to stage and create the resources in your AWS environment.

  9. When the push ends you should be see an output with some information about your stream, looking something like this:

     Interactive Video Service:
    
     Input url:
     rtmps://url
    
     Stream Keys:
     sk_region_id
    
     Output url:
     https://example.playback.live-video.net/api/video/v1/example.m3u8
    
     Channel ARN:
     arn:aws:ivs:REGION:ACCOUNT_ID:channel/ID
     
  10. If you haven’t already done so, please install OBS at this time at obsproject.com

  11. To setup OBS to start streaming to your newly created endpoint you can run the command amplify video setup-obs. This command will setup a OBS profile configured to publish to your Amazon Interactive Video Service channel.

     $ amplify video setup-obs
     ? Choose what project you want to get info for? mylivestream
     Configuration complete.
     Open OBS and select mylivestream profile to use the generated profile for OBS
     
  12. Now Launch OBS and navigate to the profile menu and select your Project Name. This will switch your settings to a preconfigured profile ready to stream to the livestream. If you don’t see your profile listed, try closing the OBS application and re-opening it and check the profile tab again.

  13. The last step is adding an audio and video source. Under Sources on the bottom left hand side, select the + icon to add a source.

  14. Choose Video Capture Device. Click the “Create New” radio button and provide a unique name and select ok.

  15. In the next screen choose your video capturing device(most likely your laptop’s built in web cam). Again, select ok.

  16. Finally we need to add an audio source. Again choose the + icon in the sources pane. This time choose “Audio Input Capture”.

  17. Again, make sure the “Create New” radio button is selected and supply a name for the source and select ok. Under device, choose “Built in Microphone” and hit ok.

  18. We are now ready to start the stream! Hit the “Start Streaming” button under the “Controls” panel in the bottom right hand side.

  19. Now, check out your stream using the Amplify Video test player. Copy paste the Output URL into the Video URL field and click submit. Notice that the latency is quite high, this is because we’re not using the IVS Player SDK to handle the low-latency HLS streaming and the service is falling back to a standard HLS delivery mode.

Congratulations! You have now hosting a Live Stream on AWS! Now let’s setup the client that will show our stream. Click Here or on the yellow arrow to continue on to the next step!