WebM Live Streaming with VP9

In this video we touch on how to create a workflow to stream using VPN9 WebM.


We cover:
·         What is Mpeg-DASH, WebM, H.264, and VP9
·         Step-by-step instructions to set up a live stream workflow using WebM


Ryan: Hi, and welcome to today's stream talk between JW Player and Wowza. And in today's we're going to touch on MPEG-DASH for both H264 and we're going to do a workflow for VPN9 WebM as well, and show both of those workflows with Wowza and with JW working together. And joining me for this series is Erik Boyd who is a product manager at JW. Erik thanks again for joining us.


Erik: Thanks for having me Ryan. Happy to be here.


Ryan: And what we're going to do today is actually focus on this article that we put out last year which is 'How to Transcode Live Streams Using WebM'. WebM is the wrapper that has, you can put VP8 or VP9, and then OPUS audio codec inside of it. So, VPX codex and then the OPUS audio codec and use that to deliver over MPEG-DASH. And then what you can do as well with MPEG-DASH is, you know both Wowza and JW Player have been doing a lot with MPEG-DASH with H264 historically, but now you can also do VPX if you're interested in doing that workflow as well. So Erik, before we kind of get into the demo itself maybe talk to us a little bit about the MPEG-DASH support that you currently have in JW Player and how it enables ADAT bitrate streaming for that particular protocol.


Erik Boyd: Sure, so where like all other streaming video formats, not every one of them is supported natively in every browser so JW Player will detect which streaming format it is and will on the fly pull down the necessary technology to play it depending on the browser that you're rendering in. So, we actually use Google's Shaka dash player and it has very high performance. It's very lightweight and it has a very decent adaptive bitrate switching algorithm built into it. So, in any browser that actually doesn't support DASH natively will use that to render the DASH stream. So, actually I think it's Internet Explorer Edge that supports it natively. There, you do not need to use it.


Ryan: Perfect, yeah, and then on the Wowza side as well, like we mentioned, we're supporting the transcoding. Of course, we do H264 and we can do VP9, but in addition to that we can actually repackage to the DASH protocol and we're going to walk through exactly how to do that today. So, with that let's go ahead and get started. So, I've got a version of Wowza running up in the Cloud and if I go here to my home you can see here's the information. This is running up on a Cloud instance of Wowza streaming engine.


And what I've done for this particular demo is I've set up a new application for WebM and I've followed everything that's in our article here on how to get WebM setup. Like I mentioned, you don't have to necessarily do DASH with WebM or VP9. You can do it with H264 as well, but for this particular demo we wanted to show how JW and Wowza are kind of pushing the envelope a little bit with supporting newer brands of codecs and protocols as well. So enabling this, I've pulled in the profile in my transcoder to actually be able to transcode to WebM, and you can see that's down here.


And to add this profile, you can follow our support article on how to that and how to pull in the XML file with those settings. So, if I look in here I've just got two presets for this demo. You could setup additional ones for different resolutions if you want. If I pull up my 720p here, you'll see that the video codec is actually set to VP9. I got the video bitrate here and you can see here's some information on the transcoding.


You can see that the audio codec is set to OPUS. So, we're able to deliver VP9 video codec, the OPUS audio codec, wrap that in WebM and then send that over the DASH protocol to JW Player and then JW Player can take care to actually serve that to the client. And like Erik mentioned, you need to make sure you have a client who can actually decode that as well. So, that's really where some of the issues are. Currently people are using DASH, but mostly they're using DASH with H264 since that's by far the more popular codec. But there's a lot of Android devices now that have embraced of course VP9 and WebM and DASH, and people who want to do that can now do that with both of our technologies together.


So, if I come in to Wirecast real quick, what I'll show you is that I've pushed a livestream that is going into this Wowza streaming engine Instance, and if I pull up my Instance again and come into my incoming streams, you'll see I'm actually pulling it up and I'm pulling in this RTMP stream from Telestream Wirecast. And I've got two different transcodings that are happening. One that's the H264 transcodings, and one that's the WebM transcodings. So, here is this source stream that's coming through at 1080p and then as I showed in the transcoder profile, I've also enabled this for two other resolutions. So, if I pull this up I can now see that I've got my VP9 WebM video and audio transcoding at 1.5 mega bits per second, like I set it up in that profile. I can even pull this up in my task players and inside of this MPEG-DASH we actually do have the Google Shaka player here as a test.


I can click on start and now I can actually preview this and because I'm in Google Chrome, I can actually see that here inside of my browser. Now, what I want to show, what I can do really quickly is actually grab the URL that's right here inside of my test players and I can actually come over to my JW Player account now and use this in my dashboard. So, Erik, maybe you can kind of walk us through like we did previously of how to kind of get this to work with a JW Player dashboard.


Erik: Cool, well, first things first, you want to make sure that you have a player that you're ready to use and publish with. If you have that player already set up it's super easy to just paste right there the URL and go, but quickly go to your player section, pop into this and make sure it has all the settings that you need, it has all of your branding, coloring, styling, anything like that that's necessary. The JW Player will actually intelligently choose which rendering mode to use so you don't actually need to say always use Flash when available. So, we don't actually have a DASH player in Flash. We use HTML5 for that.


So, even if that's checked it doesn't matter. JW Player will know to render HTML5 when the stream source that you're given is an actual HTML5 compatible source. So, once you have all of your settings and your player ready to go just go back to your homepage, grab that external URL, paste it in here, click embed, and embed workflow window pops up. You can preview it in a large page.


DASH stream playing in JW Player with Chrome. This would work in any other browsers that support the media source extensions. So, it's as simple as just pasting in a URL, previewing it, making sure it's right and ready to go and grabbing either your single line embed or your Iframe embed and placing that directly on your website where you want the player to be rendered.


Ryan: Yeah, and like you mention Erik, it's a good point what you made about the HTML on Flash and of course it will render using HTML5 for DASH natively and by default. If I right click here I can see that it is running the HTML5 version of the player and I can also see that it does pull in my Chromecast functionality. But what you'll notice is that this is only one single rendition and the reason for that is because I actually pulled in just the single 720p rendition from Wowza streaming engine so even though we're transcoding I gave JW Player just one version. What I really need to do is actually grab all those different transcodings and deliver those ADAT bitrate renditions to JW.


So in order to do that, I can actually come back into my article on how to transcode live streams and in fact we have another one here on how to setup and run Wowza transcoder and we'll share this URL. And what you'll notice here is here is the what we call stream namegroups and what stream namegroups allow you to do is grab all these ADAT bitrate streaming similar to what we did in the first session of this stream talk with HLS, we can do the same thing with MPEG-Dash as well, because it is another HTTP streaming protocol. So, if I grab this syntax here, I'm going to go ahead and pull this into my code editor, and what I'm going to do is actually just jump over back to Wowza streaming engine, and I'm going to grab this URL and come back in here. And so here I've got an actual domain name attached to this particular server.


This could be my server IP address as well. You can see it's pulling in the WebM live application that I've created, or the application that I've created there. And what I need to do here is just grab this namegroup right here and in here I just need to specify this as underscore all. Instead of grabbing that 720p, it's going to grab all of the transcodings that have this URL syntax. So, just to double-check I'm going to go in to Wowza streaming engine, come back into the incoming streams and just make sure that is the name and you can see here it is set to transcode under or hyphen WebM underscore destination or D-E-S-T.


If I did look at transcoder just to clarify here and show you guys what's happening on the background. If I pull up that particular profile in my stream namegroup here is where it actually shows me the syntax for the underscore all, and you can see it's just pulling in these two renditions that I'm transcoding with this profile. So, if I come back in now to my code, I can grab this and then put this inside of the dashboard in JW-Player. And now I should be able to see those two WebM renditions that are getting rendered over MPEG-DASH.


So, I'm going to go ahead and post this URL in here. I'm going to click on embed. I'm going to pull this up in the preview page. And now you'll notice that if I hover over the HD here it's showing me the two different adaptive renditions that are available. I could very easily have created additional ones for 480p or 360p or the different ones, but the functionality you can see is working there.


We're pulling in an H264 feed into the Wowza streaming engine and the Wowza transcoder is re-encoding that into VP9 and OPUS audio codec and then delivering that over DASH. And you can see JW Player does a great job of rendering these to the page using HTML5 video. And Erik like I mentioned this is, we support VP9 and VPX but we also support H264 for DASH delivery as well.


Erik: Cool, I think that's probably one of the more common formats being used now in DASH anyway.


Ryan: Yep, absolutely. So, if I wanted to come back in here and actually grab the H264 rendition I could come into my incoming stream here, I could grab this particular stream, come into test players and this is the H264 version that actually I have running in here. And just like I did previously, I could just reference this and reference that stream namegroup and deliver H264 and then you could even put that inside the JavaScript right Erik, and be able to switch between either VP9 or H264 depending on what client happens to be on.?


Erik: Yeah, exactly. You can just actually put it in as multiple sources and the player will automatically choose which one it can render.


Ryan: Perfect, well, I think that's a pretty good overview and with that let's go ahead and open things up to questions and talk a little bit more about DASH and what you guys are doing with DASH.