Skip to content
This repository has been archived by the owner on Aug 3, 2022. It is now read-only.

Latest commit

 

History

History
68 lines (60 loc) · 8.4 KB

Live_stream_doc.md

File metadata and controls

68 lines (60 loc) · 8.4 KB
Raw

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 content to our application. ABR streaming protocols like Apple HTTP Live Streaming (HLS) and MPEG Dynamic Adaptive Streaming over HTTP (DASH) allow clients to access the live stream over any network connection and provide the best viewing experience to users.

To encode a stream into ABR you need a real-time video encoder. There are many open-source and commercial options for real-time encoding, but many of them would require you to manage the deployment, scaling, and failover - you're not interested in any of this - that's where AWS Elemental MediaLive comes in. MediaLive is a fully-managed AWS service that can process live media and create ABR protocols like HLS and DASH. MediaLive does not act as an origin to serve the streaming video, for that, we'll need another service.

For video files, S3 Static Hosting is a popular way to host video. In a live streaming scenario, however, it's not recommended to use S3 as a live streaming origin due to the way many ABR protocols work and the S3 Data Consistency Model. What other options do we have? AWS Elemental released two other services to help us with content origination - MediaPackage and MediaStore. The application is interactive, so we want to keep the latency from the studio to our end users under 10 seconds. You read a comprehensive blog post from AWS on streaming latency and decided that for our use case, MediaStore is the best fit.

Now you need to deploy MediaLive and MediaStore. 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 met a Solutions Architect at the AWS SFO Summit who shared with you a AWS Amplify plugin that does just this very thing. Let's get building!

  1. First, open a terminal and navigate to the AdminPanel directory inside the unzipped project files. Please make sure the left hand side says AdminPanel. If it does not please use cd AdminPanel. If it doesn't say AdminPanel please raise your hand!

  2. If you are running this event at AWS with Event Engine please follow these additional steps:

    Click here to expand
    1. Obtain your hash from the event lead and visit https://dashboard.eventengine.run/login
    2. Login in using your hash and click on the use console button
    3. A popover will appear with your AWS console access fedaration link and AWS CLI profile links
    4. Open up your AWS profile folder on your computer ( ~/.aws/ for Mac and Linux and C:\Users\USERNAME \.aws\ for windows)
    5. If you don't have a AWS profile folder you need to create it and add in two files. One file called credentials and config.
    6. Edit your credentials file by adding in a new profile like so (copying the values from the popover in event engine). Please note that the creditials file is all lowercase (in Event Engine it is uppercase). 
      [ee]
aws_access_key_id = XXXXXXXXXXXXXXXX
aws_secret_access_key = XXXXXXXXXXXXXXXXXXXXXXXXX
aws_session_token = XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
    7. Edit your config file by adding default values (changing your region to the assigned region of your event) 
      [ee]
region = us-west-2
output = json
    8. When running amplify init choose the newly created profile called ee (Note: please don't select default)

  3. Run amplify init. This command creates new AWS backend resources (in this case a single S3 bucket to host your cloudformation templates) and pull the AWS service configurations into the app!

  4. Follow the prompts as shown in the below Image. Remember, even if you are implementing the ios or android version of the application, you MUST choose javascript here since the admin panel is a web app that makes calls to the graphql backend and is seperate from the client.

    1. PLEASE NOTE: PLEASE DOUBLE CHECK THE PROFILE YOU ARE USING. ONCE YOU CHOOSE ONE YOU CAN'T GO BACK UNLESS YOU DELETE EVERYTHING IN THE CLOUD
    2. Note that because of the services leveraged, your AWS profile MUST USE us-west-2, us-east-1, eu-west-1, eu-central-1, ap-northeast-1, or ap-southeast-2. init

  5. Now, add the amplify video module to the project using amplify video add

  6. Again, follow the prompts as shown in the image below livestream

  7. Once the prompts complete, make sure the module was added by checking amplify status status

  8. Now it is time to create our resources! Now run amplify push to create the backend resources for the video component! It will take a few minutes to stage and create the resources in your AWS environment. While that runs, let's take a brief look at what was just created! The Amplify CLI plugin created a MediaLive Channel which will process and deliver video segments to a MediaStore container (also created by the plugin). We'll serve the stream from MediaStore, but note that it is recommended to use a Content Delivery Network (CDN) like Amazon CloudFront. To begin processing video, you now need to send a source to the MediaLive endpoint. Streaming Architecture

  9. In order to retrieve the MediaLive endpoint that you just created, run the command amplify video get-info.

  10. Note down the MediaStore HLS Output Url as you will need it later for your client. Streaming Architecture

  11. If you haven't already done so, please install OBS at this time by refering to the "Configuring your computer" section for the download link.

  12. 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 which is preconfigured.

  13. 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. OBS VideoCapture

  14. 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.

  15. Choose Video Capture Device. Click the "Create New" radio button and provide a unique name and select ok. OBS VideoCapture

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

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

  18. 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.

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

  20. Check that the stream is up by pasting the MediaStore HLS Output Url into Safari or any supported HLS player. You can use the JW Player Stream Tester if you don't have an HLS compatible player installed. Just paste your MediaStore output URL into the File URL Field on the page and click the red "Test Stream" Button. You should now see your channel playing in the Test Player. JW Player

Congratulations! You have now hosting a Live Stream on AWS! Now let's setup the Administrator Panel that we will use to send trivia questions and collect answers from users watching our live stream. Click Here! to continue to the next step!