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.

Broadcaster

SFU

Receiver

Receiver

Receiver

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.ts file.

export abstract class Participant {

    private applicationId: string = Config.applicationId;
    private channelId: string = Config.channelId;
    private gatewayUrl: string = Config.gatewayUrl;
    private sharedSecret: string = Config.sharedSecret;

    // Client and channel
    public client: fm.liveswitch.Client;
    public channel: fm.liveswitch.Channel;

    // Media Id, which will be used by both the broadcaster and receivers.
    protected presentationId = "presentation-id";

    // Layout manager
    protected layoutManager = new fm.liveswitch.DomLayoutManager(document.getElementById("my-container"));

    constructor() {
        // Log to console.
        fm.liveswitch.Log.registerProvider(new fm.liveswitch.ConsoleLogProvider(fm.liveswitch.LogLevel.Debug));
    }

    public joinAsync(): fm.liveswitch.Future<Object> {
        const promise = new fm.liveswitch.Promise<Object>();

        // Create the client.
        this.client = new fm.liveswitch.Client(this.gatewayUrl, this.applicationId);

        // Write registration state to log.
        this.client.addOnStateChange(() => fm.liveswitch.Log.debug(`Client is ${new fm.liveswitch.ClientStateWrapper(this.client.getState())}.`));

        // Generate a token (do this on the server to avoid exposing your shared secret).
        const token: string = fm.liveswitch.Token.generateClientRegisterToken(this.applicationId, this.client.getUserId(), this.client.getDeviceId(), this.client.getId(), null, [new fm.liveswitch.ChannelClaim(this.channelId)], this.sharedSecret);

        // Register client with token.
        this.client.register(token)
            .then(channels => {
                // Store our channel reference.
                this.channel = channels[0];

                fm.liveswitch.Log.info(`Client ${this.client.getId()} has successfully connected to channel ${this.channel.getId()}, Hello World!`);

                this.establishConnection();
                promise.resolve(null);
            })
            .fail(ex => {
                fm.liveswitch.Log.error("Failed to register with Gateway.");
                promise.reject(ex);
            });

        return promise;
    }

    protected abstract establishConnection(): void;
    public abstract start(): fm.liveswitch.Future<Object>;
    public abstract stop(): fm.liveswitch.Future<Object>;

}

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.ts file.

export class Broadcaster extends Participant {

    private localMedia: fm.liveswitch.LocalMedia;

    protected establishConnection(): void {
        // Create a SFU upstream connection with local audio and video and the presentation ID.
        const audioStream = new fm.liveswitch.AudioStream(this.localMedia);
        const videoStream = new fm.liveswitch.VideoStream(this.localMedia);
        const connection: fm.liveswitch.SfuUpstreamConnection = this.channel.createSfuUpstreamConnection(audioStream, videoStream, this.presentationId);

        connection.open();
    }

    public start(): fm.liveswitch.Future<Object> {
        const promise = new fm.liveswitch.Promise<Object>();

        // Create local media with audio and video enabled.
        const audioEnabled = true;
        const videoEnabled = true;
        this.localMedia = new fm.liveswitch.LocalMedia(audioEnabled, videoEnabled);

        // Set local media in the layout.
        this.layoutManager.setLocalMedia(this.localMedia);

        // Start local media capturing.
        this.localMedia.start()
            .then(() => {
                fm.liveswitch.Log.debug("Media capture started.");
                promise.resolve(null);
            })
            .fail(ex => {
                fm.liveswitch.Log.error(ex.message);
                promise.reject(ex);
            });

        return promise;
    }

    public stop(): fm.liveswitch.Future<Object> {
        const promise = new fm.liveswitch.Promise<Object>();

        // Stop local media capturing.
        this.localMedia.stop()
            .then(() => {
                fm.liveswitch.Log.debug("Media capture stopped.");
                promise.resolve(null);
            })
            .fail(ex => {
                fm.liveswitch.Log.error(ex.message);
                promise.reject(ex);
            });

        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.ts file.

export class Receiver extends Participant {

    private remoteMedia: fm.liveswitch.RemoteMedia;

    protected establishConnection(): void {
        // Create remote media.
        this.remoteMedia = new fm.liveswitch.RemoteMedia();
        const audioStream = new fm.liveswitch.AudioStream(this.remoteMedia);
        const videoStream = new fm.liveswitch.VideoStream(this.remoteMedia);

        // Add remote media to the layout.
        this.layoutManager.addRemoteMedia(this.remoteMedia);

        // Create a SFU downstream connection with remote audio and video and the presentation ID.
        const connection: fm.liveswitch.SfuDownstreamConnection = this.channel.createSfuDownstreamConnection(this.presentationId, audioStream, videoStream);

        connection.addOnStateChange(conn => {
            // Remove the remote media from the layout if the remote is closed.
            if (conn.getRemoteClosed()) {
                this.layoutManager.removeRemoteMedia(this.remoteMedia);
            }
        });

        connection.open();
    }

    // Not needed because receiver only receives media from the broadcaster.
    public start(): fm.liveswitch.Future<Object> {
        return fm.liveswitch.Promise.resolveNow();
    }

    // Not needed because receiver only receives media from the broadcaster.
    public stop(): fm.liveswitch.Future<Object> {
        return fm.liveswitch.Promise.resolveNow();
    }

}

Uncomment UI Components

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

In the index.ts file, uncomment the codes between the <Broadcast> and </Broadcast> tags.

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!