Converting WebRTC to HLS With Wowza Streaming Engine

Justin Miller:

So let’s take a look at how to convert a WebRTC stream to HLS using Wowza Streaming Engine. And one reason why you’d want to do this is because you’re currently trying to encode a video stream within the browser, which generally means using WebRTC, but you also want to play back using an HTML5 standard, and that usually means HLS.

So to begin, you’ll first want to make sure that Wowza Streaming Engine can accept WebRTC. And that means once you have a Wowza Streaming Engine license, you’ll go to My Account on wowza.com, and click on StreamLock. It’s here that you can get a SSL certificate, and you’ll need this in order to securely stream with WebRTC. So as you can see, I got my host name here. I got my IP address, and sometimes it takes an hour or so to connect to the IP address. I have my Wowza Streaming Engine license key, and then I have the ability here to download the certificate, which will be placed in the Wowza Streaming Engine installation under the CONF directory.

Now, once all that’s set up, I’ll want to go into Wowza Streaming Engine Manager, and under Server, I can choose Virtual Host Setup, where I will add the host port for my StreamLock. Now to get that, I’m going to click on Edit, and I could go in and click Add Host Port to add it in, but I’m just going to click on Edit for right now and show you my settings. I’ve set the name to be “streamlock,” the type “Streaming,” the IP address as a wild card. We’re using port 443, and turned on Enable SSL/StreamLock. I have a key store path entered to where my StreamLock certificate is located. I have the key store password that I’ve created when I created the SSL certificate. And then I have Use WebRTC turned on.

So now that you know all of that is working, you’ll want to go in and create the application in Wowza Streaming Engine. So I’m going to go to the top here and I’m going to choose Add Application, and then click on Live single server or origin, and I’m going to name it. I’ll name it “arvada,” all lowercase. And you can name it what you’d like. I’m then going to go in and on the left side, click on WebRTC because I want to set up all the WebRTC configurations. To do this I’ll Edit, and then I can enable. And I’m just going to enable all the features here, as well as add an ICE candidate. Now, we want UDP to be the main protocol used, and it’s going to use the IP address for Wowza Streaming Engine. I’m just going to copy it over here and paste it in the IP address. And even though this UDP is the priority, I’m going to edit the TCP/IP address, this will also be the same, and then I’m going to change that priority right there to use the arrow and bring UDP to the top.

Okay, now that that’s all configured, I’m going to save this and I’m going to restart so the application changes can take effect. Okay. Now, in order to test this, we have the Wowza hosted test pages. We have both a play page as well as a published page. And as you can see, it’s currently using the information right here, the host name from my SSL certificate and “/webrtc-session.json”. And I’m going to add an application name for this, as you recall, I named it arvada, all lower case, so arvada. And for my stream name, I’m going to call this “golden,” because I’m currently in the golden office.

Now I’m going to leave everything else by default, and I’m just going to click on Publish. And as you can see, I am live. And if I go back into a Wowza Streaming Engine, I can go under Incoming Streams, and I can see that my golden stream is live. All right, nice and active. Now I can just test this out, I’m just going to test it out for playback right here. And I’m going to make this just a little smaller so you can all see it while you can see me. Not that you can’t see me already in the lower left-hand corner, but as you can see again, the signaling URL is the same. I’m going to make the application “arvada” and the stream name “golden,” and now I can play it, and there, it’s working. And I can even turn on the audio if you want to hear the audio, there we go. But that’s kind of annoying, so I’m going to turn it off again.

Now that we know this is working and that we have everything playing back correctly, we can go in and make some changes to make this work for HLS. Now, one reason why I wanted you to hear the audio is because the audio, as you can see here, to the published page, is coming in using the Opus codec. And that’s what, by default, WebRTC uses, but HLS doesn’t use this codec, so that means we need to transcode the audio from Opus to something that HLS uses, which is AAC.

So in order to do that, first of all, we need the transcoder on. So here in Wowza Streaming Engine Manager, I’m going to the transcoder, and we’re going to enable it. But if I enable it right now, it’s going to use the fallback template of Transrate (Default), and I don’t want to use that. I want to use Audio Only. The Audio Only one is already pre-configured to change all audio to AAC. So, since it is, I’m going to go and click on Edit and under Fallback Template, I’m going to choose Audio Only. We’re going to Save that. And then we’re going to Enable Transcoder. Now I can Restart Now and we’re ready to go.

Now, one thing I do want to mention, and we’re just going to go back to that WebRTC play page, is that this is still working right here, and it’s not working because we restarted, and when we restarted, as you can see, the incoming stream got shut off. So I’m going to go in and I’m going to start this up again. All right. Now I can go back to the playback page and I can verify that it is in fact playing back, there we go now. And now I’m going to go and we are going to test this using the HLS setup.

So for HLS, I am going to use THEOplayer. And if you go to theoplayer.com/demo-zone, they have this option right here to test your own HLS. So this is what we’re going to use. And this is the standard setup right here, but we’re going to make a few changes. First of all, we’ll go back to StreamLock and we’ll grab our SSL a host name. And I’m going to just paste that in. And it’s going to go for video, it’s going to be arvada. And Instead of “elephant’s dream,” it’s going to be “golden.”

Now, if I were to load this up, I could load it up and it would play it here, but no audio, no audio! Why is there no audio? Because this is not the stream where it’s being converted. In fact, if we go back here and go look at Incoming Streams once again, you’ll see that it’s using golden_aac, that’s what I need in order for the audio to be converted.

So I’m going to go back, and do I look awkward? Yes, I do. Add ‘_aac’. Click Here to Load Your Stream and click play. And there we go. Now we have the audio. I’m going to turn that off right now, because you don’t need to hear it. You’re going to notice, if I were to bring this a little smaller and take a look here, that there’s definitely a lag from one to the other, but I just wanted you to see that we are both streaming to HLS as well as playing back via WebRTC. And that’s pretty much it. So hey, thanks for watching, and happy streaming.