In our last post, we looked at how to with Amazon Interactive Video Service (Amazon IVS). It would be a good idea to read that post before continuing here if you're not yet familiar with creating a live-streaming channel with Amazon IVS. Unless you already know how to create a channel. Either way, let's dig into how to get started with creating a live-stream playback experience. get started with live streaming in the cloud In this post, we’re going to focus on web playback for Amazon IVS. If you’re creating a mobile app, there are also SDKs available for both and , but we’ll stick to the web in this post. If you get stuck, bookmark the “official” [docs for web playback], but we’ll walk through the entire process here in this post. Ready? Then let’s get at it! Android iOS Before We Begin We're going to need the for our Amazon IVS Channel. There are a few ways to get this if you don't have it handy already. The first method is to log in to the and navigate to the channel that you want to create a playback experience. On the channel details page, scroll down to the panel and copy the . Playback URL Amazon IVS Management Console Playback configuration Playback URL For this post, I’m going to use one of our since that will let me demo live playback right here in the blog post. When you create your own playback experience, use the for the channel that you create. The URL that I’ll use for playback in this post is: test streams Playback URL https://3d26876b73d7.us-west-2.playback.live-video.net/api/video/v1/us-west-2.913157848533.channel.rkCBS9iD1eyd.m3u8 If we paste that URL (or your own playback URL) into our browser and navigate to it, our browser will probably download a file to our desktop. We should probably take a quick detour to explain what this file is all about! ELI5: HLS If we open the file in a text editor, it will look something like this (truncated for brevity): .m3u8 #EXTM3U #EXT-X-SESSION-DATA:DATA-ID="NODE",VALUE="video-edge-82bfe8.ord02" #EXT-X-SESSION-DATA:DATA-ID="MANIFEST-NODE-TYPE",VALUE="weaver_cluster" #EXT-X-SESSION-DATA:DATA-ID="MANIFEST-NODE",VALUE="video-weaver.ord02" #EXT-X-SESSION-DATA:DATA-ID="SUPPRESS",VALUE="true" #EXT-X-SESSION-DATA:DATA-ID="SERVER-TIME",VALUE="1659448883.23" #EXT-X-SESSION-DATA:DATA-ID="TRANSCODESTACK",VALUE="2017TranscodeQS_V2" #EXT-X-SESSION-DATA:DATA-ID="USER-IP",VALUE="[redcated]" #EXT-X-SESSION-DATA:DATA-ID="SERVING-ID",VALUE="21f1214cd2604a4cb3b47701256d515a" #EXT-X-SESSION-DATA:DATA-ID="CLUSTER",VALUE="ord02" #EXT-X-SESSION-DATA:DATA-ID="ABS",VALUE="false" #EXT-X-SESSION-DATA:DATA-ID="VIDEO-SESSION-ID",VALUE="5506365207855764860" #EXT-X-SESSION-DATA:DATA-ID="BROADCAST-ID",VALUE="46909101677" #EXT-X-SESSION-DATA:DATA-ID="STREAM-TIME",VALUE="81635.231166" #EXT-X-SESSION-DATA:DATA-ID="FUTURE",VALUE="true" #EXT-X-SESSION-DATA:DATA-ID="MANIFEST-CLUSTER",VALUE="ord02" #EXT-X-SESSION-DATA:DATA-ID="ORIGIN",VALUE="cmh01" ... Enter fullscreen mode Exit fullscreen mode Seems kinda weird, right? The reason for this is that the the file is actually a (or “ ”) file. Amazon IVS uses the (HLS) protocol to deliver your live streams, and this file contains all the information that the player needs to locate and play your stream. With a Amazon IVS channel, the HLS manifest will contain the location of 5 different versions of the stream: .m3u8 playlist manifest HTTP Live Streaming Standard 1080p 720p 480p 360p 160p This allows the player to choose the best stream based on the viewer’s current network status (or, depending on the player, allows the viewer to choose a different resolution to save on bandwidth). Since we’ve got the manifest downloaded, let’s try opening it with a video player on our desktop. I’ve opened this manifest with VLC, and the first thing I’m presented with is a playlist that VLC identified via the manifest. If we select the first item in the playlist, VLC will begin playback on the live stream. If we view the codec details in VLC (via CTRL+i or CMD+i), we'll see that the stream that we chose has a resolution of , so this is the 1080p stream for this channel. 1920x1080 We can check the resolution via the same process for all the other items in the playlist. Note that the video file location that is contained in the HLS manifest only represents a short portion of the live stream. In reality, the player will download and regularly update the manifest with the latest files in the stream. It's a pretty cool system for delivering live video! Using the Amazon IVS Player So now that we understand what HLS is and how it works, let's create a web player and playback a stream! We'll use the "official" Amazon IVS player in this example, but it's useful to know that there are additional options for web playback (such as integrations for and ). Video.js JW Player The Amazon IVS Player Script The first step here is to include the web player script. The recommended way to include this script is to use the Amazon IVS CDN. We’ll use the latest version of the player as of the published date for this blog post (version ). 1.11.0 <script src="https://player.live-video.net/1.11.0/amazon-ivs-player.min.js"> Enter fullscreen mode Exit fullscreen mode You don't to use the CDN. There are options to import the SDK from NPM, but since the player uses WebAssembly, there are some . have considerations that you should know The HTML Markup The Amazon IVS player works directly with the native HTML tag, so we'll need to include one. We can use any of the standard attributes for the tag as shown below. <video> <video id="video-player" controls autoplay playsinline /> Enter fullscreen mode Exit fullscreen mode Styling with CSS Since we're using the native tag, we can style it via CSS. Let's have our demo player fill the entire body via the following CSS: <video> video { height: 100%; width: 100%; left: 0; top: 0; position: fixed; } Enter fullscreen mode Exit fullscreen mode Initialize the Player and Start the Stream The only thing left is to create an instance of the player, attach it to our HTML element, load the stream, and play it. We'll handle all of those tasks in an function, triggered when the event is fired. <video> init() DOMContentLoaded const init = () => { if(!IVSPlayer.isPlayerSupported) { alert('Your browser does not support the IVS video player. Please try a different browser.') } const videoEl = document.getElementById('video-player'); const streamUrl = 'https://3d26876b73d7.us-west-2.playback.live-video.net/api/video/v1/us-west-2.913157848533.channel.rkCBS9iD1eyd.m3u8'; const ivsPlayer = IVSPlayer.create(); ivsPlayer.attachHTMLVideoElement(videoEl); ivsPlayer.load(streamUrl); ivsPlayer.play(); } document.addEventListener('DOMContentLoaded', init); Enter fullscreen mode Exit fullscreen mode Live Playback! Our stream is ready for playback! here If your player isn't working, check out the code in the CodePen Summary In this post, we learned about the HTTP Live Streaming (HLS) protocol and created our first instance of the Amazon IVS player for playback of our Amazon IVS live stream. In our next post, we'll look at some of the various methods and events that the Amazon IVS player exposes and how we can use those to enhance the user experience.
