Mute Media

In this tutorial, you'll learn how to mute local media so that other participants don't see or hear you, and mute remote media so that you don't see or hear a participant.

Prerequisites

This tutorial requires the SFU connection app that you created earlier.

Mute Audio and Video

To mute local audio and video:

Get the config from the upstream connection.
Set the config to mute the local audio and video.
Update the upstream connection with the new config.

To mute the remote audio and video:

Get the config from the downstream connection.
Set the config to mute the remote audio and video.
Update the downstream connection with the new config. This mutes the remote media locally. Other participants can still hear and see the person you mute.

Paste the following code into the HelloWorldLogic class.

public async Task ToggleMuteLocalAudio()
{
    var config = _UpstreamConnection.Config;
    config.LocalAudioMuted = !config.LocalAudioMuted;
    await _UpstreamConnection.Update(config);
}

public async Task ToggleMuteLocalVideo()
{
    var config = _UpstreamConnection.Config;
    config.LocalVideoMuted = !config.LocalVideoMuted;
    await _UpstreamConnection.Update(config);
}

public void ToggleDisableRemoteAudio()
{
    foreach (SfuDownstreamConnection connection in _DownStreamConnections.Values)
    {
        var config = connection.Config;
        config.RemoteAudioDisabled = !config.RemoteAudioDisabled;
        connection.Update(config);
    }
}

public void ToggleDisableRemoteVideo()
{
    foreach (SfuDownstreamConnection connection in _DownStreamConnections.Values)
    {
        var config = connection.Config;
        config.RemoteVideoDisabled = !config.RemoteVideoDisabled;
        connection.Update(config);
    }
}

public Future<Object> toggleMuteLocalAudio() {
    if (upstreamConnection != null) {
        // Retrieve and update the config of the upstream connection.
        ConnectionConfig config = upstreamConnection.getConfig();
        config.setLocalAudioMuted(!config.getLocalAudioMuted());
        return upstreamConnection.update(config);
    } else {
        return Promise.resolveNow();
    }
}

public Future<Object> toggleMuteLocalVideo() {
    if (upstreamConnection != null) {
        // Retrieve and update the config of the upstream connection.
        ConnectionConfig config = upstreamConnection.getConfig();
        config.setLocalVideoMuted(!config.getLocalVideoMuted());
        return upstreamConnection.update(config);
    } else {
        return Promise.resolveNow();
    }
}

public void toggleDisableRemoteAudio() {
    // Retrieve and update the config of each of the downstream connections.
    for (SfuDownstreamConnection connection : downstreamConnections.values()) {
        ConnectionConfig config = connection.getConfig();
        config.setRemoteAudioDisabled(!config.getRemoteAudioDisabled());
        connection.update(config);
    }
}

public void toggleDisableRemoteVideo() {
    // Retrieve and update the config of each of the downstream connections.
    for (SfuDownstreamConnection connection : downstreamConnections.values()) {
        ConnectionConfig config = connection.getConfig();
        config.setRemoteVideoDisabled(!config.getRemoteVideoDisabled());
        connection.update(config);
    }
}

func toggleMuteLocalAudio() -> FMLiveSwitchFuture
{
    if (_upstreamConnection != nil) {
        let config = _upstreamConnection?.config()
        config?.setLocalAudioMuted(!(config?.localAudioMuted())!)
        return (_upstreamConnection?.update(with: config))!
    } else {
        let promise = FMLiveSwitchPromise();
        promise?.resolve(withResult: nil)
        return promise!
    }
}

func toggleMuteLocalVideo() -> FMLiveSwitchFuture {
    if (_upstreamConnection != nil) {
        let config = _upstreamConnection?.config()
        config?.setLocalVideoMuted(!(config?.localVideoMuted())!)
        return (_upstreamConnection?.update(with: config))!
    } else {
        let promise = FMLiveSwitchPromise();
        promise?.resolve(withResult: nil)
        return promise!
    }
}

func toggleDisableRemoteAudio() {
    for connection in self._downStreamConnections.values {
        let config = connection.config()
        config?.setRemoteAudioDisabled(!(config?.remoteAudioDisabled())!)
        connection.update(with: config)
    }
}

func toggleDisableRemoteVideo() {
    for connection in self._downStreamConnections.values {
        let config = connection.config()
        config?.setRemoteVideoDisabled(!(config?.remoteVideoDisabled())!)
        connection.update(with: config)
    }
}

public toggleMuteLocalAudio(): fm.liveswitch.Future<object> {
    // Retrieve and update the config of the upstream connection.
    const config: fm.liveswitch.ConnectionConfig = this.upstreamConnection.getConfig();
    config.setLocalAudioMuted(!config.getLocalAudioMuted());
    return this.upstreamConnection.update(config);
}

public toggleMuteLocalVideo(): fm.liveswitch.Future<object> {
    // Retrieve and update the config of the upstream connection.
    const config: fm.liveswitch.ConnectionConfig = this.upstreamConnection.getConfig();
    config.setLocalVideoMuted(!config.getLocalVideoMuted());
    return this.upstreamConnection.update(config);
}

public toggleDisableRemoteAudio(): void {
    // Retrieve and update the config of each of the downstream connections.
    for (const id in this.downstreamConnections) {
        const connection: fm.liveswitch.SfuDownstreamConnection = this.downstreamConnections[id];
        const config: fm.liveswitch.ConnectionConfig = connection.getConfig();
        config.setRemoteAudioDisabled(!config.getRemoteAudioDisabled());
        connection.update(config);
    }
}

public toggleDisableRemoteVideo(): void {
    // Retrieve and update the config of each of the downstream connections.
    for (const id in this.downstreamConnections) {
        const connection: fm.liveswitch.SfuDownstreamConnection = this.downstreamConnections[id];
        const config: fm.liveswitch.ConnectionConfig = connection.getConfig();
        config.setRemoteVideoDisabled(!config.getRemoteVideoDisabled());
        connection.update(config);
    }
}

Uncomment UI Components

Now, go to the files for the UI components and uncomment the code for muting streams.

In the index.ts file, uncomment the code between the <Mute streams> and </Mute streams> tags in a few places.

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.

Run your app in your project IDE and click Join. You should be able to mute local media and turn off the remote media by clicking the appropriate Mute button. Your app UI should look similar to the following:

Congratulations, you've just added the muting media feature to your app!