巴黎人官方App下载 Video API Session 4: WebRTC Real-Time Streaming at ScaleJune 15, 2022
Now that we’ve covered a bit more of 巴黎人官方App下载 Video‘s advanced workflows and you have your content ready to go, the next step in making sure you deliver a seamless viewing experience to your audience is ensuring you stream with low latency. Who likes to watch a live stream that lags behind real time? Watch the video above or read the transcript below to learn how WebRTC or 巴黎人官方App下载 Video’s Real-Time Streaming at Scale feature can help you promise the best playback experience possible.
NOTE: You can download the Postman file for this session and previous three sessions at this link.
Table of contents
Streaming With WebRTC
Barry: Hey everyone. I’m Barry Owen from 巴黎人官方App下载, and I’m here again today with Rose Power.
Rose: Hey Barry. Good to see you.
Barry: You too.
Rose: Thank you.
Barry: Today, we are going to continue with our 巴黎人官方App下载 Video API tutorials, and in this session we’ll record session four. We’re going to cover some low latency streaming options within 巴黎人官方App下载 Video, which will include WebRTC in and out of the 巴黎人官方App下载 Video platform, as well as the 巴黎人官方App下载 Real-Time Streaming at Scale platform. Let’s get started.
As always, we are going to start with our friendly Postman screen. The first thing we need to do is create a stream. Now, in this case, very similar to what we’ve done in the past when we’re creating a live stream, you’ll notice here for my encoder type I’ve specified that I would like to send WebRTC. So, what this is going to do is enable the WebRTC entry point in 巴黎人官方App下载 Video. I’m going to go ahead and send this call.
All right. Let’s just see what we got back here — some source connection information. I’m going to grab this because I’m going to need it in a second when I show you some other things. I’ll just stash it in a little notepad over here so we have that.
Now we have our stream created. It’s ready to go for low latency. I have my SDP URL. I have an application name and I have a stream name. Those are the things I’m going to need to be able to send WebRTC from my browser. One of the things you may want to do, and this is optional — it really depends on some things; obviously, if you lower your buffer size to zero, like I’m doing here, you may have a few more issues if you have a bad connection — but I’m going to go ahead and set these values. I’m going to turn on the latency, processing the server, and turn off the stream smoother (which technically, probably doesn’t even matter in this case because I don’t think it’s really used with WebRTC, but better safe than sorry).
Rose: Barry, for the buffer size, are you implying then that the default is not zero and you recommend changing that to zero?
Barry: The default is not zero. The default with WebRTC is in fact lower than without WebRTC, but it’s not zero.
Barry: And that just returns the transcoder properties. You can dig through here and view and see that everything was properly set.
Setting Default Viewer Connection Limit
The next thing we’re going to do, so the default viewer connection limit for a WebRTC stream in 巴黎人官方App下载 Video is 10, and that means you can have 10 clients connected to your transcoder via WebRTC. The hard limit is 300, so we won’t allow you to connect more than 300 connections to that stream. I’m going to set a medium here. And even though we’re not going to have anywhere near this many, I’m going to go ahead and set this to a larger number.
And again, in the JSON you can see that, in effect, did happen. All right, so now we’re going to start it. This is going to take a minute, as you know, so while that’s starting, we’ll go over here to our 巴黎人官方App下载 Video main page. I’m going to go in here into Available Streams and you can see that I have indeed created a stream and it is, in fact, starting. So we’ll go over here and it will go ahead and start.
So while that’s doing it, we’re going to go and configure our publish page. So, I’m going to use the standard published page off of energyplanmaker.com and I’m just going to modify our settings. The settings that I saved over here in my notepad, I’m going to grab those. I’m going to put them in here and I’m going to save. So, that’s good. Now we’re going to leave that one there for a sec. We’re going to go and we’re going to do a similar thing to our player. I’ll show you this stream playing back as well. All right, now we’re going to go back and check on our stream. It’s still starting. Sometimes these can take a while depending on where the resources are available. So we’ll give that another minute.
Prerequisites for WebRTC
Rose: I have a question then, while we’re waiting.
Barry: Yeah, please.
Rose: A lot of our customers in the forums often ask, what do they need to have in place first, before they can go in and start using the API for WebRTC streaming? Do you have any suggestions what they might take a look at as far as like their ports or their firewalls, just the network overall? So they’re successful when they get to this stage?
Barry: So WebRTC is going to grab some UDP ports. I don’t have the exact range, but you do want to make sure that you’re able to send out over those UDP ports. Typically sending out is not a huge problem. On the playback side, there’ll be various ICE candidates that will allow it to connect and potentially go through the firewall necessary. So, that’s usually not that big of an issue.
Rose: OK. So we’re using UDP right now?
Barry: I believe the ICE candidates in 巴黎人官方App下载 cloud provide UDP first and TCP second. You can actually configure that via the APi< however. So if you have a specific need for one or the other, or you want to turn one off, that’s a property available on the transcoder when you create a WebRTC stream. So check the API docs and you can actually set that to whatever works for you.
Rose: Awesome. Thank you.
Checking WebRTC and Viewer Data
Barry: Absolutely. All right. Our stream has started, so I’m going go over here. I’m going to enable my camera. I’m not going to my microphone because then it’s going to be echo city and nobody wants that. We’ll go ahead and publish. You can see I’m now live and I’m sending a stream into 巴黎人官方App下载 Video from my browser. Now we’re going to go over to the player page, and with any luck, it’ll show up and you can see that latency is actually quite good, we have WebRTC connection, and all is well. Again, you can easily access these; they’re hanging off energyplanmaker.com, which makes it real simple to test the WebRTC process. Now, go ahead and stop those. And then we will go back to our cloud page.
Barry: Any data you can get through the user interface in 巴黎人官方App下载 Video, you can get through the API.
Rose: Oh, fantastic.
Barry: It’s worth noting that our entire user interface is built using our API. And in many cases there’s actually more in the API than it’s exposed in the user interface.
Barry: All right. So that was WebRTC. We’re going to go ahead and stop this. As we’ve seen before, stop, you’re going to go back over here. I’m going to refresh this page and you’re going to see that it stopped. All went well. I’m going to click over here, back to the homepage, and I’m going to go ahead and delete this stream just to not leave a bunch of garbage in my account that I don’t need. So, that’s a really quick overview of WebRTC and 巴黎人官方App下载. Works great if you don’t need a ton of scale — as I said, up to those 300 viewers.
Real-Time Streaming at Scale
Barry Owen: If you’re looking to scale higher than that, we do have an answer for you: it’s called Real-Time Streaming at Scale. It’s a slightly different API — while the interface is, in fact, integrated into 巴黎人官方App下载 Video, there are a few things you’re not going to get as far as real time (the real-time analytics and other things aren’t quite fully integrated in 巴黎人官方App下载 Video yet, but they will be very soon). But it’s a great way to easily send a WebRTC or any other kind of stream in. You can send in RTMP as well and output via WebRTC to millions of viewers all in sub-second latencies.
So let’s take a look at that real quick. So over here, you can see, we have another call. This is to create a real-time stream. It’s very simple; there’s just a little bit in the body. It’s really just the name, that’s all I need to send. So I’m going to go ahead and send that. What you can see here, I get back a stream name, a publish token — those are used for WebRTC input — as well as an RTMP URL that has the name in the token embedded that you can use in any standard RTMP encoder. I should mention that 巴黎人官方App下载 also does produce a version of OBS you can use that supports both RTMP and WebRTC output into our real-time streaming platform.
All right, so I’m going to grab these again. We’re going to go back over to my editor. n this case, I have a couple sample folk programs — sample files, I should say — on my computer that I have taken from our 巴黎人官方App下载 player, 巴黎人官方App下载 real-time streaming SDK. That SDK is available, we’ll post the URL for it in the accompanying text with this video (see link above). So I’m going to go in here and change my token. I’ll change my stream name, going to save that. And that’s for my publisher page. I’m going to do the same thing for my viewer page. My viewer page only needs the stream name, it does not need the token.
Next, save those pages. Now, something to note with the real-time streaming: you don’t need to start anything. You don’t need to configure anything. It’s a very simple API. We just create a stream and it’s ready to go. So, you can certainly go back and ask, “Hey, how many real-time streams are in my account?” Well, it turns out there’s a bunch, including the one I just created down here, probably at the bottom. If you want to get details on a specific stream, you can just pass the RTS stream ID back to the API and you’ll get details on that specific stream (you can, of course, change those). I don’t want this API real-time demo stream, I just want to call my real-time stream. Great. So make the change thing like that. You can also enable secure viewing. If you enable secure viewing, it will require a token for playback and won’t allow people without that token to play back the stream.
Let’s go back to our examples. Here is my published page. I’m going to reload it since I edited it and will start a broadcast. You see, I have a few things here — this is just a test page I whipped up based on the SDK, pretty simple stuff. You had some things back here if you wanted to, I’m just going to start the broadcast. So there it goes, and this page is also configured to give me some statistics that I’m pulling from the SDK as the page is broadcasting. And then we’ll go over this page and we’ll refresh it as well. At least we will try and it should play.
Rose: Real-time troubleshooting is the best way to learn.
Rose: I really like that. There’s that extra step for additional security in a world of hacker attempts and cyber attacks, 我知道WebRTC, it’s encrypted already, correct?
Barry: It is encrypted end-to-end, but you can never be too careful, right?
Rose: You can never be too careful, but I see you have that enabled Secure Viewer that you had mentioned there, in the JSON response, and that is an extra step that they can so they can use a token to make sure only the right people get the stream.
Barry: Yeah, absolutely. So, just because it’s encrypted end-to-end doesn’t mean somebody couldn’t steal the SDP URL’s stream name and play it back. They could get that from your page or elsewhere or spoofing it or watching the wire. So, whatever else you can do to increase the level of security to make sure people have all the required credentials, it’s nice to be able to do that.
All right, so now you’ve seen real-time streams. I will show you in the UI real quick, you can also look at your list of real-time streams in the UI. You can add them, you see that we had the recent one here that we just played, It’ll give you the details on it. So you do have all the information about anything you’ve created with real time in the user interface as well. I’m going to go ahead and again, I’m going to clean up after myself and I’m going to just delete this stream. So you see how delete works, everything goes great. And that’s it. And that is a complete session on low latency features within 巴黎人官方App下载 Video. Anything else you’d like to add, Rose?
Rose: No, I just think it’s great. It removes the fear that WebRTC is so complicated to configure, especially if you’re using the REST API. So I think this is wonderful to watch you walk through it.
Barry: Yeah. Even I can get it to work, so, it can’t be that hard! All right. Well, until next time, thanks for joining us and happy coding.