Broadcast

In this tutorial, you will learn how to do broadcasting.

LiveSwitch supports massive-scale broadcasting of audio and video data from SFU upstream connections to SFU downstream connections. In broadcasting, there is one Broadcaster and multiple Receivers.

graph TB A(Broadcaster)-.->m[SFU] m-->B(Receiver) m-->C(Receiver) m-->D(Receiver) classDef default fill: #D8EFF9,stroke:#86CBEE;

Prerequisites

This tutorial requires the SFU connection app or any apps you have built earlier on top of it.

Create Participant

Both the Broadcaster and Receiver follow the same registration process, we can create an abstract class Participant to handle registration and abstract the Broadcaster and the Receiver classes from it.

The Participant class is similar to the HelloWorldLogic class that handles registration, token generation, channel creation, and other shared fields. For broadcasting, we will need to add the following:

  1. Media ID: We use an optional Media ID to identify the Broadcaster's media streams. We must use the same Media ID for Receivers when creating their downstream connection. The media ID replaces the remote connection info.
  2. Disable remote client events: In a normal conference, everyone in the channel is notified when clients come and go, and when upstream connections are opened and closed. In broadcasting, this is unnecessary and negatively impacts the performance of the presentation.
  3. Create the EstablishConnection, Start, and Stop methods for Broadcaster and Receiver to implement.
Note

When creating the Participant class, remember to replace the applicationId and sharedSecret with your own Application ID and Shared Secret, just as you did in the Hello World tutorial.

Paste the following code into the HelloWorld namespace in the Participant.cs file.

public abstract class Participant
{
    public string ApplicationId = Config.ApplicationId;
    public string ChannelId = Config.ChannelId;
    public string GatewayURL = Config.GatewayURL;
    public string SharedSecret = Config.SharedSecret;

    // Client 
    private Client _Client;
    protected Channel Channel;

    // Media and UI
    protected FM.LiveSwitch.Wpf.LayoutManager LayoutManager = null;
    protected Dispatcher Dispatcher;

    // Media Id for Broadcaster/Receiver
    protected string PresentationId = "presentation-id";

    // Make a registration request
    public async Task JoinAsync()
    {
        _Client = new Client(GatewayURL, ApplicationId);
        var claim = new ChannelClaim(ChannelId);
        // To improve performance, disable remote client events
        claim.DisableRemoteClientEvents = true;
        ChannelClaim[] channelClaims = new[] { claim };

        string token = Token.GenerateClientRegisterToken(
            ApplicationId,
            null,
            null,
            _Client.Id,
            _Client.Roles,
            channelClaims,
            SharedSecret
        );

        var channels = await _Client.Register(token).AsTask();
        OnClientRegistered(channels);
    }

    // Procedure to run once client is registered
    private void OnClientRegistered(Channel[] channels)
    {
        Channel = channels[0];
        EstablishConnection();
    }

    public async Task LeaveAsync()
    {
        if (_Client != null)
        {
            await _Client.Unregister();
            Log.Info("Client has successfully unregistered.");
        }
    }

    // EstablishConnection is for Broadcaster and Receiver to implement  
    public abstract void EstablishConnection();
    public abstract Future<object> Start(MainWindow window);
    public abstract Future<object> Stop();
}

Create Broadcaster

The Broadcaster class sends an upstream connection to the server without receiving any remote connections. It essentially "broadcasts" its streams to its subscribers. We only need local media to make this class.

We create the class by the following:

  1. Create SFU upstream connections by passing the Media ID into the CreateSfuUptreamConnection channel method.
  2. Start and stop the broadcaster local media using the same method as starting and stopping the camera local media.

Paste the following code into the HelloWorld namespace in the Broadcaster.cs file.

public class Broadcaster : Participant
{

    private LocalMedia _Media;
    private static Broadcaster _Context;

    public static Broadcaster Instance()
    {
        if (_Context == null)
        {
            _Context = new Broadcaster();
        }

        return _Context;
    }

    public override void EstablishConnection()
    {

        AudioStream audioStream = (_Media.AudioTrack != null) ? new AudioStream(_Media) : null;
        VideoStream videoStream = (_Media.VideoTrack != null) ? new VideoStream(_Media) : null;
        SfuUpstreamConnection connection = Channel.CreateSfuUpstreamConnection(audioStream, videoStream, PresentationId);

        connection.OnStateChange += (conn) =>
        {
            Log.Info(string.Format("Upstream connection {0} is currently in a {1} state.", conn.Id, conn.State.ToString()));

            if (conn.State == ConnectionState.Closing || conn.State == ConnectionState.Failing)
            {
                conn = null;
            }

            else if (conn.State == ConnectionState.Failed)
            {
                EstablishConnection();
            }
        };

        connection.Open();
    }

    public override Future<object> Start(MainWindow window)
    {
        Promise<object> promise = new Promise<object>();
        _Media = new CameraLocalMedia(false, false, new AecContext());
        LayoutManager = new FM.LiveSwitch.Wpf.LayoutManager(window.videoContainer);
        Dispatcher = window.Dispatcher;

        _Media.Start().Then((result) =>
        {
            LayoutManager.SetLocalView(_Media.View);
            promise.Resolve(null);

        }).Fail((exception) =>
        {
            promise.Reject(exception);
        });

        return promise;
    }

    public override Future<object> Stop()
    {
        Promise<object> promise = new Promise<object>();

        if (_Media != null)
        {
            _Media.Stop().Then((result) =>
            {
                if (LayoutManager != null)
                {
                    LayoutManager.UnsetLocalView();
                    LayoutManager = null;
                }
                if (_Media != null)
                {
                    _Media.Destroy();
                    _Media = null;
                }
                promise.Resolve(null);
            }).Fail((exception) =>
            {
                promise.Reject(exception);
            });
        }

        return promise;
    }
}

Create Receiver

For the Receiver class, we only expect a downstream connection from the server. It acts like a subscriber that "subscribes" to the Broadcaster streams. We only need the remote media class to make the class.

We create the class by the following:

  1. Create SFU downstream connections by passing the Media ID into the CreateSfuDownstreamConnection channel method. This enables users to open their connections prior to receiving the streams. When using Media ID, we don't rely on channel event handlers.
  2. Start and stop the receiver.

Paste the following code into the HelloWorld namespace in the Receiver.cs file.

public class Receiver : Participant
{   
    RemoteMedia media;

    private static Receiver _Context;

    public static Receiver Instance()
    {
        if(_Context == null)
        {
            _Context = new Receiver();
        }
        return _Context;
    }

    public override void EstablishConnection()
    {            
        AudioStream audioStream = new AudioStream(media);
        VideoStream videoStream = new VideoStream(media);
        SfuDownstreamConnection connection = Channel.CreateSfuDownstreamConnection(PresentationId, audioStream, videoStream);
        
        LayoutManager.AddRemoteView(media.Id, media.View);
        
        connection.OnStateChange += (conn) =>
        {
            Log.Info(string.Format("Downstream connection {0} is currently in a {1} state.", conn.Id, conn.State.ToString()));

            if (conn.State == ConnectionState.Closing || conn.State == ConnectionState.Failing)
            {
                var layoutManager = LayoutManager;
                if (layoutManager != null)
                {
                    layoutManager.RemoveRemoteView(media.Id);
                }

                Dispatcher.Invoke(new Action(() =>
                {
                    media.Destroy();
                }));
            }

            else if (conn.State == ConnectionState.Failed)
            {
                EstablishConnection();
            }
        };

        connection.Open();
    }
    
    public override Future<object> Start(MainWindow window)
    {
        Promise<object> promise = new Promise<object>();

        LayoutManager = new FM.LiveSwitch.Wpf.LayoutManager(window.videoContainer);
        media = new RemoteMedia(false, false, new AecContext());
        Dispatcher = window.Dispatcher;
        promise.Resolve(null);

        return promise;
    }

    public override Future<object> Stop()
    {
        Promise<object> promise = new Promise<object>();

        if(LayoutManager != null)
        {
            LayoutManager.RemoveRemoteViews();
            LayoutManager = null;
        }
        return promise;
    }   
}

Uncomment UI Components

Now go to the files for the UI components and uncomment the codes for broadcasting.

In the MainWindow.xaml.cs file, uncomment the codes between the following tags:

  • <Broadcast> and </Broadcast>
  • <Receiver> and </Receiver>

Run Your App

Tip

In the mobile app, some buttons are hidden. To show hidden buttons, swipe the button (not the screen) from left to right.

Build your app and run it on at least two devices, one acts as the broadcaster and the others act as the receivers:

Warning

Don't click Join to start.

  • For .NET and TypeScript, click Broadcast to broadcast or click Receiver to receive the broadcasting.
  • For Android and iOS, first click Broadcasting, and then click Broadcast to broadcast or click Subscribe to receive the broadcasting.

The broadcaster should see themselves and the receivers should see the broadcaster. Your app UI should look similar to the following:

Congratulations, you've just created an app to broadcast using the SFU connection!