Mute audio and video

At this point you only have a single button in the conference. The user will want to perform more actions to the conference. In this case, we will add two more buttons with the following functionality:

• Audio Mute: The user will be able to mute/unmute his audio.
• Video Mute: The user will be able to mute/unmute his video.

To create these buttons, you will have to perform the following tasks:

• Create the methods for the click listeners in the ViewModel .
• Create the buttons in the layout.

As always you can download the initial code from Step.03-Exercise-Mute-audio-and-video.

Modify the conference ViewModel

Create new LiveData properties that will contain the current state of the mute. This way other sections of the application will be aware of the state and act accordingly.

// Notify wheter the local audio is muted or not
private val _isLocalAudioMuted = MutableLiveData<Boolean>()
val isLocalAudioMuted: LiveData<Boolean>
    get() = _isLocalAudioMuted

// Notify whether the local video is muted or not
private val _isLocalVideoMuted = MutableLiveData<Boolean>()
val isLocalVideoMuted: LiveData<Boolean>
    get() = _isLocalVideoMuted

Define the methods that the click listener will call. The onToggleMuteAudio() method will stop the audio capture and change the LiveData state.

fun onToggleMuteAudio() {
    if (_isLocalAudioMuted.value != true) {
        localAudioTrack.stopCapture()
        _isLocalAudioMuted.value = true
    } else {
        localAudioTrack.startCapture()
        _isLocalAudioMuted.value = false
    }
}

And do the same for the video.

fun onToggleMuteVideo() {
    if (_isLocalVideoMuted.value != true) {
        localVideoTrack.value?.stopCapture()
        _isLocalVideoMuted.value = true
    } else {
        localVideoTrack.value?.startCapture()
        _isLocalVideoMuted.value = false
    }
}

Modify the conference fragment

In a previous lesson you have overridden onStart() to start automatically the local video. Now you have to check if the user has previously muted the video:

override fun onStart() {
    super.onStart()
    if (viewModel.isLocalVideoMuted.value != true) {
        viewModel.localVideoTrack.value?.startCapture()
    }
}

Modify the conference layout

You will want to hide the local video in your interface when the user push the muteVideo button. You can do this by adding a new attribute to the CardView .

<androidx.cardview.widget.CardView
    ...
    app:goneUnless="@{!viewModel.isLocalVideoMuted}"
>

Go to the LinearLayout in which you have defined the previously the disconnect button and add these two new buttons.

<com.google.android.material.button.MaterialButton
    android:id="@+id/mute_audio_button"
    android:layout_width="60dp"
    android:layout_height="72dp"
    android:layout_margin="4dp"
    android:backgroundTint="@color/teal"
    android:onClick="@{() -> viewModel.onToggleMuteAudio()}"
    app:audioMuted="@{viewModel.isLocalAudioMuted}"
    app:cornerRadius="100dp"
    app:iconGravity="textStart"
    app:iconPadding="0dp"
    app:iconSize="30dp" />

<com.google.android.material.button.MaterialButton
    android:id="@+id/mute_video_button"
    android:layout_width="60dp"
    android:layout_height="72dp"
    android:layout_margin="4dp"
    android:backgroundTint="@color/teal"
    android:onClick="@{() -> viewModel.onToggleMuteVideo()}"
    app:cornerRadius="100dp"
    app:iconGravity="textStart"
    app:iconPadding="0dp"
    app:iconSize="30dp"
    app:videoMuted="@{viewModel.isLocalVideoMuted}" />

Run the app

Your new buttons are in place and you have coded all the needed parts. Open your Android device or emulator and try it out.

You can compare your code with the solution in Step.03-Solution-Mute-audio-and-video. You can also check the differences with the previous tutorial in the git diff.