Skip to main content

Screen share, volume control and mute

To use Video SDK for audio and video communication, you implement a simple workflow in your app. The app joins a new or an existing channel using an app ID and an authentication token. If a channel of the given name exists within the context of the app ID, the app joins the channel. If the named channel does not exist, a new channel is created that other users may join. Once the app joins a channel, it subscribes to one or more of the audio and video streams published in the channel. The app also publishes its own audio and video streams that other users in the channel subscribe to. Each user publishes streams that share their captured camera, microphone, and screen data.

The basics of joining and leaving a channel are presented in the SDK quickstart project for Video Calling. This document explains the common workflows you need to handle in your app.

Understand the tech

The following figure shows the typical workflow you integrate into your app in order to publish and subscribe to audio and video streams.

Product Workflow

This page shows you how to add the following features to your app:

  • Screen Sharing

    Enables users in a channel to share what is on their screen with other users in the channel. This technology is useful in several online communication scenarios such as:

    • Sharing a local image or web page for discussion.
    • Showing slides or notes in an online student teacher interaction.
    • Running a third party app for online collaboration or troubleshooting.
  • Volume control

    Users in a channel often need to adjust the volume for local and remote audio. For example, they may want to increase the input volume from remote users and decrease the local audio recording volume. You use Video SDK to enable app users to adjust recording and playback volumes. Video SDK also provides methods to mute local audio, audio from a particular remote user, or audio from all remote users. Video SDK provides several methods to manage local and remote audio volumes. These methods enable the user to control:

    • Recording signal volume: The volume of the signal recorded by the local user.
    • Playback signal volume: The playback audio level, after audio mixing, for all remote users, or for a specific remote user.
    • In-ear monitoring volume: The volume of their own voice, users hear through wired earphones.
    • Audio mixing volume: The mixing volume for local playback and for sending to other users.
    • Muting audio streams: Stop or resume playing a specified remote or local audio.

Prerequisites

In order to follow this procedure you must have:

  • Android Studio 4.1 or higher.
  • Android SDK API Level 24 or higher.
  • A mobile device that runs Android 4.1 or higher.
  • An Agora account and project.

  • A computer with Internet access.

    Ensure that no firewall is blocking your network communication.

Project setup

To create the environment necessary to implement screen sharing and volume control features into your app, open the SDK quickstart Video Calling project you created previously.

Add the screen sharing module to your project

  1. Download the Latest Android Video SDK and unzip.

  2. Navigate to the Agora_Native_SDK_for_Android_FULL\rtc\sdk folder.

  3. Copy the file named AgoraScreenShareExtension.aar into the <project-name>/libs folder.

  4. In /Gradle Scripts/build.gradle (Module: <project name>.app), add the following line under dependencies:


_1
implementation files('../libs/AgoraScreenShareExtension.aar')

Implement a client for Video Calling

This section shows how to use Video SDK to implement screen sharing and volume control into your app, step-by-step.

Implement the user interface

In a real-world application, for each volume setting you want to control, you typically add a volume control UI element such as a SeekBar to the audio configuration panel. To enable the user to mute local or remote audio, you add a switch or a checkBox to the interface for each user. In this example, you add a SeekBar and a CheckBox to the UI to test different volume settings. For screen sharing, you add a Button to start and stop sharing.

To add the UI elements, in /app/res/layout/activity_main.xml, add the following code before </RelativeLayout>:


_31
<CheckBox
_31
android:id="@+id/muteCheckBox"
_31
android:layout_width="wrap_content"
_31
android:layout_height="wrap_content"
_31
android:layout_below="@id/JoinButton"
_31
android:checked="false"
_31
android:layout_alignStart="@id/JoinButton"
_31
android:text="Mute" />
_31
_31
<SeekBar
_31
android:id="@+id/volumeSeekBar"
_31
android:layout_width="match_parent"
_31
android:layout_height="wrap_content"
_31
android:layout_below="@id/JoinButton"
_31
android:layout_toRightOf="@id/muteCheckBox"
_31
android:layout_marginStart="10dp"
_31
android:layout_alignEnd="@id/LeaveButton"
_31
android:layout_alignBottom="@id/muteCheckBox"
_31
android:max="100"
_31
android:min="0"
_31
android:progress="50" />
_31
_31
<Button
_31
android:id="@+id/ShareScreenButton"
_31
android:layout_width="wrap_content"
_31
android:layout_height="wrap_content"
_31
android:layout_below="@id/volumeSeekBar"
_31
android:layout_alignEnd="@id/remote_video_view_container"
_31
android:layout_alignStart="@id/JoinButton"
_31
android:onClick="shareScreen"
_31
android:text="Start Screen Sharing" />

You see errors in your IDE. This is because this layout refers to methods that you create later.

Handle the system logic

  1. Add the required libraries

    To access and use the UI elements and to capture and share your screen, import the corresponding Agora and Android libraries. In /app/java/com.example.<projectname>/MainActivity, add the following to the list of import statements:


    _10
    import android.view.ViewGroup;
    _10
    import android.widget.Button;
    _10
    import android.widget.CheckBox;
    _10
    import android.widget.CompoundButton;
    _10
    import android.widget.SeekBar;
    _10
    import android.content.Intent;
    _10
    import android.os.Build;
    _10
    import android.util.DisplayMetrics;
    _10
    _10
    import io.agora.rtc2.ScreenCaptureParameters;

  2. Add the permission to run a foreground service

    Your app must run as a foreground service so that it is not killed when it is minimized. To get the required permission, in AndroidManifest.xml, add the following line after </application>.


    _1
    <uses-permission android:name="android.permission.FOREGROUND_SERVICE"/>

Implement screen sharing, volume control and mute

To implement these features in your app, take the following steps:

  1. Declare the variables you need

    To to read, store and apply workflow settings, in /app/java/com.example.<projectname>/MainActivity, add the following declarations to the MainActivity class:


    _10
    // Volume Control
    _10
    private SeekBar volumeSeekBar;
    _10
    private CheckBox muteCheckBox;
    _10
    private int volume = 50;
    _10
    private int remoteUid = 0; // Stores the uid of the remote user
    _10
    _10
    // Screen sharing
    _10
    private final int DEFAULT_SHARE_FRAME_RATE = 10;
    _10
    private boolean isSharingScreen = false;
    _10
    private Intent fgServiceIntent;

  2. Store the uid of the remote user

    To adjust the volume or mute a specific remote user, you need the uid of that user. Add the following line to the beginning of the onUserJoined callback, to store the remoteUid:


    _1
    remoteUid = uid;

  3. Adjust or mute the volume

    You use the OnSeekBarChangeListener and OnCheckedChangeListener callbacks to handle the volume change actions taken by the user. In /app/java/com.example.<projectname>/MainActivity, add the following lines to onCreate after SetupVideoSDKEngine();:


    _25
    volumeSeekBar = (SeekBar)findViewById(R.id.volumeSeekBar);
    _25
    volumeSeekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
    _25
    _25
    public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
    _25
    volume = progress;
    _25
    agoraEngine.adjustRecordingSignalVolume(volume);
    _25
    }
    _25
    _25
    public void onStartTrackingTouch(SeekBar seekBar) {
    _25
    //Required to implement OnSeekBarChangeListener
    _25
    }
    _25
    _25
    public void onStopTrackingTouch(SeekBar seekBar) {
    _25
    //Required to implement OnSeekBarChangeListener
    _25
    }
    _25
    });
    _25
    _25
    muteCheckBox = (CheckBox) findViewById(R.id.muteCheckBox);
    _25
    muteCheckBox.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener(){
    _25
    _25
    @Override
    _25
    public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
    _25
    agoraEngine.muteRemoteAudioStream(remoteUid, isChecked);
    _25
    }
    _25
    });

    When using a device to capture audio, Video SDK sets a default global volume value of 85 (range [0, 255]). Video SDK automatically increases a capture device volume that's too low. You can adjust the capture volume as per your needs by adjusting the microphone or sound card's signal capture volume.

  4. Start or stop screen sharing

    When a user presses the start screen sharing button, you create an Intent to start a foreground service. You pass ScreenCaptureParameters to the startScreenCapture method and set up the local preview. To start publishing the screen sharing data to the channel, you call updateMediaPublishOptions. When a user ends screen sharing, you call stopScreenCapture. To do this, add the following method to the MainActivity class:


    _44
    public void shareScreen(View view) {
    _44
    Button sharingButton = (Button) view;
    _44
    _44
    if (!isSharingScreen) { // Start sharing
    _44
    // Ensure that your Android version is Lollipop or higher.
    _44
    if (Build.VERSION.SDK_INT > Build.VERSION_CODES.LOLLIPOP) {
    _44
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
    _44
    fgServiceIntent = new Intent(this, MainActivity.class);
    _44
    startForegroundService(fgServiceIntent);
    _44
    }
    _44
    // Get the screen metrics
    _44
    DisplayMetrics metrics = new DisplayMetrics();
    _44
    getWindowManager().getDefaultDisplay().getMetrics(metrics);
    _44
    _44
    // Set screen capture parameters
    _44
    ScreenCaptureParameters screenCaptureParameters = new ScreenCaptureParameters();
    _44
    screenCaptureParameters.captureVideo = true;
    _44
    screenCaptureParameters.videoCaptureParameters.width = metrics.widthPixels;
    _44
    screenCaptureParameters.videoCaptureParameters.height = metrics.heightPixels;
    _44
    screenCaptureParameters.videoCaptureParameters.framerate = DEFAULT_SHARE_FRAME_RATE;
    _44
    screenCaptureParameters.captureAudio = true;
    _44
    screenCaptureParameters.audioCaptureParameters.captureSignalVolume = 50;
    _44
    _44
    // Start screen sharing
    _44
    agoraEngine.startScreenCapture(screenCaptureParameters);
    _44
    isSharingScreen = true;
    _44
    startScreenSharePreview();
    _44
    // Update channel media options to publish the screen sharing video stream
    _44
    updateMediaPublishOptions(true);
    _44
    sharingButton.setText("Stop Screen Sharing");
    _44
    }
    _44
    } else { // Stop sharing
    _44
    agoraEngine.stopScreenCapture();
    _44
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
    _44
    if (fgServiceIntent!=null) stopService(fgServiceIntent);
    _44
    }
    _44
    isSharingScreen = false;
    _44
    sharingButton.setText("Start Screen Sharing");
    _44
    _44
    // Restore camera and microphone publishing
    _44
    updateMediaPublishOptions(false);
    _44
    setupLocalVideo();
    _44
    }
    _44
    }

  5. Set up local screen sharing preview

    To show the screen sharing preview in the local video container, add the following method to the MainActivity class:


    _17
    private void startScreenSharePreview() {
    _17
    // Create render view by RtcEngine
    _17
    FrameLayout container = findViewById(R.id.local_video_view_container);
    _17
    SurfaceView surfaceView = new SurfaceView(getBaseContext());
    _17
    if (container.getChildCount() > 0) {
    _17
    container.removeAllViews();
    _17
    }
    _17
    // Add to the local container
    _17
    container.addView(surfaceView, new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
    _17
    // Setup local video to render your local camera preview
    _17
    agoraEngine.setupLocalVideo(new VideoCanvas(surfaceView, Constants.RENDER_MODE_FIT,
    _17
    Constants.VIDEO_MIRROR_MODE_DISABLED,
    _17
    Constants.VIDEO_SOURCE_SCREEN_PRIMARY,
    _17
    0));
    _17
    _17
    agoraEngine.startPreview(Constants.VideoSourceType.VIDEO_SOURCE_SCREEN_PRIMARY);
    _17
    }

  6. Switch between publishing camera feed and screen sharing

    Add the following method to the MainActivity class to update publishing options when starting or stopping screen sharing:


    _8
    void updateMediaPublishOptions(boolean publishScreen) {
    _8
    ChannelMediaOptions mediaOptions = new ChannelMediaOptions();
    _8
    mediaOptions.publishCameraTrack = !publishScreen;
    _8
    mediaOptions.publishMicrophoneTrack = !publishScreen;
    _8
    mediaOptions.publishScreenCaptureVideo = publishScreen;
    _8
    mediaOptions.publishScreenCaptureAudio = publishScreen;
    _8
    agoraEngine.updateChannelMediaOptions(mediaOptions);
    _8
    }

Test your implementation

To ensure that you have implemented Video Calling workflow features in your app:

  1. Generate a temporary token in Agora Console .

  2. In your browser, navigate to the Agora web demo and update App ID, Channel, and Token with the values for your temporary token, then click Join.

  1. In Android Studio, open app/java/com.example.<projectname>/MainActivity and update appId, channelName and token with the values from Agora Console.

  2. Connect an Android device to your development device.

  3. In Android Studio, click Run app. A moment later, you see the project installed on your device.

    If this is the first time you run your app, grant camera and microphone permissions.

  1. Press Join to connect to the same channel as your web demo.
  1. Test volume control

    1. Speak into your Android device as you move the slider on the SeekBar to the left and then right. You notice the volume decrease and then increase in the web demo app as the recording volume changes.

    2. Tap the Mute CheckBox while you speak into the microphone connected to the web demo app. You notice that the remote audio is muted on your Android device.

    3. To test other volume control methods, in onProgressChanged replace the adjustRecordingSignalVolume call with one of the following:


      _6
      agoraEngine.adjustPlaybackSignalVolume(volume);
      _6
      agoraEngine.adjustUserPlaybackSignalVolume(remoteUid,volume);
      _6
      agoraEngine.adjustAudioMixingVolume(volume);
      _6
      agoraEngine.adjustAudioMixingPlayoutVolume(volume);
      _6
      agoraEngine.adjustAudioMixingPublishVolume(volume);
      _6
      agoraEngine.setInEarMonitoringVolume(volume);

      Run the app again and use the volume slider to test the change in the corresponding volume setting.

    4. To test other mute methods, in onCheckedChanged replace the muteRemoteAudioStream call with one of the following:


      _2
      agoraEngine.muteAllRemoteAudioStreams(isChecked);
      _2
      agoraEngine.muteLocalAudioStream(isChecked);

      Run the app again and tap the CheckBox to test the effect of these mute methods.

  2. Test Screen sharing

    1. Press Start Screen Sharing. You see your device screen shared in the web demo app and a preview on your Android device.

    2. Press Stop Screen Sharing. Screen sharing is stopped and the camera stream is restored in the web demo app.

  1. In Solution Explorer, open CAgoraImplementationDlg.cpp and update APP_ID, ChannelName and Token with the values from Agora Console.

  2. In Visual Studio, click Local Window Debugger. A moment later, you see the app running on your development device.

    If this is the first time you run your app, grant camera and microphone permissions.

  1. Press Join to connect to the same channel as your web demo.
  1. Test volume control

    1. Speak into your development device as you move the slider on the Slider Control to the left and then right. You notice the volume decrease and then increase in the web demo app as the recording volume changes.

    2. Tap Mute while you speak into the microphone connected to the web demo app. You notice that the remote audio is muted on your development device.

    3. To test other volume control methods, in OnNMCustomdrawSlider2, replace the adjustRecordingSignalVolume call with one of the following:


      _6
      agoraEngine.adjustPlaybackSignalVolume(value);
      _6
      agoraEngine.adjustUserPlaybackSignalVolume(remoteUId,value);
      _6
      agoraEngine.adjustAudioMixingVolume(value);
      _6
      agoraEngine.adjustAudioMixingPlayoutVolume(value);
      _6
      agoraEngine.adjustAudioMixingPublishVolume(value);
      _6
      agoraEngine.setInEarMonitoringVolume(value);

      Run the app again and use the volume slider to test the change in the corresponding volume setting.

    4. To test other mute methods, in OnBnClickedCheck1 replace the muteRemoteAudioStream call with one of the following:


      _2
      agoraEngine.muteAllRemoteAudioStreams(isChecked);
      _2
      agoraEngine.muteLocalAudioStream(isChecked);

      Run the app again and tap the CheckBox to test the effect of these mute methods.

  2. Test Screen sharing

    Press Share Sharing. You see your device screen shared in the web demo app and a preview on your development device. Press the same button again, you see screen sharing is stopped and the camera stream is restored in the web demo app.

Reference

This section contains information that completes the information in this page, or points you to documentation that explains other aspects to this product.

Video Calling