Create an MCU Connection

In this tutorial, you'll learn how to create an MCU connection to stream video and audio in a conference.

Prerequisites

This tutorial requires the Handle Media app that you created earlier.

Create a Connection

To create an MCU connection:

1. Create one bi-directional stream to send and receive audio and video data. To do so, create an AudioStream and a VideoStream, and provide both the LocalMedia and RemoteMedia instances. This returns an FM.LiveSwitch.McuConnection instance.
2. Manage the layout manager. The local view sent to the Media Server appears in the video feeds received. To prevent delay and duplication of local view, we "float" local view over the video feeds. To do so, add an addOnLayout event handler to the LayoutManager instance. In this event handler, invoke the floatLocalPreview method of the FM.LiveSwitch.LayoutUtility utility class, and provide the following:
   • The VideoLayout instance, which is the video feeds received.
   • The Layout instance, which is the local view layout.
   • The ID of the McuConnection instance, which is used to find the local user's view in the video feeds.
3. Close the MCU connection by invoking the Closing method of the FM.LiveSwitch.McuConnection instance, and removing the remote view.

Paste the following code into the HelloWorldLogic class.

• CSharp
• Android
• iOS
• TypeScript

private McuConnection _McuConnection;
private VideoLayout _VideoLayout;

private McuConnection openMcuConnection()
{
    RemoteMedia remoteMedia = null;
    _Dispatcher.Invoke(() => remoteMedia = new RemoteMedia(false, false, _AecContext));

    _LayoutManager.AddRemoteView(remoteMedia.Id, remoteMedia.View);

    var audioStream = (LocalMedia.AudioTrack != null) ? new AudioStream(LocalMedia, remoteMedia) : null;
    var videoStream = (LocalMedia.VideoTrack != null) ? new VideoStream(LocalMedia, remoteMedia) : null;

    var connection = Channel.CreateMcuConnection(audioStream, videoStream);

    connection.OnStateChange += (conn) =>
    {
        Log.Info($"Mcu connection {conn.Id} is currently in a {conn.State.ToString()} state.");

        if (conn.State == ConnectionState.Closing || conn.State == ConnectionState.Failing)
        {
            _LayoutManager.RemoveRemoteView(remoteMedia.Id);
            remoteMedia.Destroy();
        }
        else if (conn.State == ConnectionState.Failed)
        {
            _McuConnection = openMcuConnection();
        }
    };

    _LayoutManager.OnLayout += (layout) =>
    {
        if (_McuConnection != null)
        {
            LayoutUtility.FloatLocalPreview(layout, _VideoLayout, _McuConnection.Id, remoteMedia.Id, LocalMedia.ViewSink);
        }
    };

    connection.Open();

    return connection;
}

Handle Stream Connection

If the number of participants in a media session changes, the Media Server automatically changes how it lays out the video feeds in an MCU connection. To handle this, create an addOnMcuVideoLayout event handler to the channel instance. This event handler calls the Layout method of the layout manager and caches the returned VideoLayout instance.

Update the OnClientRegistered function in the HelloWorldLogic class to the following:

• CSharp
• Android
• iOS
• TypeScript

private void OnClientRegistered(Channel[] channels)
{
    Channel = channels[0];
    DisplayMessage($"Client {Client.Id} has successfully connected to channel {Channel.Id}, Hello World!");
    Log.Info($"Client {Client.Id} has successfully connected to channel {Channel.Id}, Hello World!");

    Channel.OnMcuVideoLayout += (videoLayout) =>
    {
        _VideoLayout = videoLayout;

        if (_LayoutManager != null)
        {
            _Dispatcher.Invoke(() => _LayoutManager.Layout());
        }
    };

    _McuConnection = openMcuConnection();
}

Run Your App

Note

LiveSwitch recommends that you use a phone and not an emulator to run the mobile apps. It's possible to run the mobile apps on an emulator, but the camera doesn't work.

Run your app in your project IDE and click Join to join the conference. You should see video streaming on your app window. For an MCU connection, the Media Server composes local and remote views and sends them back to you. If you run your app on two devices, you should see that the local view and the remote view are displayed side by side. Your app UI should look similar to the following:

Congratulations, you've built a LiveSwitch conference app!

Go to your LiveSwitch Console's homepage, and select the Hello World Application. You should see one client, one channel, and one connection.

Go to your LiveSwitch Cloud's Dashboard page, and select the Hello World Application. You should see one client, one channel, and one connection.

If you run your app on multiple devices, you should see yourself and participants from other devices.

Report an issue