Let’s now take the time to add in the Agora method to load the list of our devices. The configuration object allows us to set the overall width and height of the stream and then within the transcodingUser array we can also specify the scale and position of the individual streams within the merged video stream.Įarlier we added some dropdown UI elements to our microphone and camera buttons. To allow developers to control the layout when the videos are merged into a single video stream. Along with userCount, the transcodingUser array in our example is a single element array, but you can make that dynamic if you wish to have more broadcasters in the external stream.Īnother point worth mentioning: if you are broadcasting more than one stream to a 3rd party service using RTMP, the streams will be merged into a single stream. In our example, the user count is hardcoded in because we are only broadcasting with a single user, but if you intend to have more than a single broadcaster in each channel you need to make this number dynamic to the number of streams you want to push to the external server. One area to take note, is the userCount and transcodingUser. We are using the form elements to allow the broadcaster to control their settings, but since we are building an object for the configuration we need to ensure that we are pulling the values with the correct types. We are using a form to allow a user to configure the settings for their broadcast The main difference being we won’t need to account for other broadcasters, since we’re building this as a one-to-many broadcast. The broadcaster client is almost identical to the client we build for our communication web-app. In our live broadcast web-app we will have two clients ( broadcaster/audience), each with their own UI.
NEW BLUE TITLER LIVE SERVER BUILD SOFTWARE
Each client will have a unique interface for each of the user roles ( broadcaster/audience) and both will connect to the Agora Software Defined Real-Time Network ( SD-RTN). We can see we have to implement two different clients, one for broadcasters and one for the audience. The graphic above helps us to visualize the flow of our broadcaster web-app. In this case we need to limit the broadcasting capability to specific users while allowing all other users are in the audience they will only consume the broadcaster stream(s). Some users in the channel are broadcasting ( broadcasters) their camera streams and other users that will be watching the content streamed by the “ broadcasters” ( audience). In this project we will be implementing a broadcasting scenario, where there is a mix of users. In “ Building a Group Video Chat Web-App,” the build conformed to the communication scenario, where every user in the channel has the ability to broadcast their audio and video streams. Read: Building a group video chat web-app.An understanding of how Bootstrap and JQuery function.A way to support a secure ( https) connection (I use ngrok).This tutorial will be a followup to “ Building a Group Video Chat Web-App” and will assume a familiarity of some parts of the code.įor the TLDR crowd: there’s a CodeSandbox demo at the bottom of the post. This project can be extended to support “ many-to-many” broadcasting, where multiple broadcasters are streaming to the same audience. The web-app will allow a single broadcaster to stream their video feed to a multi-person audience. When building a live broadcasting web-app, the architecture is similar to that of a communication web-app, except with a slight twist.įor the sake of simplicity, this tutorial will walk through the process of creating a “ one-to-many” live broadcasting web-app similar to Facebook and Youtube Live. Now we want to build something more akin to Instagram Live. In a previous post we built a group video chat app similar to a Google Hangouts/Meet.
0 kommentar(er)
