Playback in Browser (Chrome)


In this step, you will learn how to use web player SDK to playback your live stream. Live Streaming Step 3, playback in browser

  1. Playback a live stream in Chrome browser
  2. Module Summary


Playback a live stream in Chrome browser

In your channel info page, you will find the Playback URL for your channel. In order to take advantage of the ultra-low latency feature of your stream, you must use the web player SDK. In the following example, we will use a sample player in Chrome browser to play your channel.

  1. Open a new tab https://codepen.io/amazon-ivs/pen/43773681607df81d127d24f7a3250337 in Chrome.

Please use Chrome, other browsers such as Safari, Edge, or IE are not supported in this sample SDK for ulta low latency playback.

  1. On the top right corner of the UI, click Change View, and select Editor View. The HTML, CSS and JS sub-panels show up in the UI.
  2. Click Change View again, in Editor Layout, select first left-to-right layout.
  3. Find JS sub panel (You can double click the title bar to expand), scroll down the JavaScript code block and find const playbackUrl=. Replace the quoted URL with your channel’s Playback URL found in channel info.
  4. Click Run button on the top and your channel should start play. The end-to-end latency is typically 3-5s (in the screenshot below, notice the time difference shown in the clocktab Browser windows).

Module Summary

In this module, you learnt how to use web player SDK to play live video in Chrome browser. You also learnt about how to measure end to end latency of your stream. In the next module, you will learn how to add timed metadata into your video application. Click for Timed Metadata Module.