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 Broadcast Streaming. This document explains the common workflows you need to handle in your app.

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

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.

In order to follow this procedure you must have:

• Implemented the SDK quickstart project for Broadcast Streaming.

• 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.

To create the environment necessary to implement screen sharing and volume control features into your app, open the SDK quickstart Broadcast Streaming 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>/app/libs folder.

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

   
   

   _1

   implementation files('libs/AgoraScreenShareExtension.aar')

   
   

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

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.

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"/>

   
   

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 SurfaceView to the local FrameLayout

   _17

   container.addView(surfaceView,

   _17

   new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,

   _17

   ViewGroup.LayoutParams.MATCH_PARENT));

   _17

   _17

   // Setup local video to render your local camera preview

   _17

   agoraEngine.setupLocalVideo(new VideoCanvas(surfaceView, Constants.RENDER_MODE_FIT, 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

   }

   
   

To ensure that you have implemented Broadcast Streaming 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.

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

4. Connect an Android device to your development device.

5. 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.

6. Press Join to connect to the same channel as your web demo.

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

8. 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.

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

4. 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.

5. Press Join to connect to the same channel as your web demo.

6. 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.

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

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

• startScreenCapture
• stopScreenCapture
• updateChannelMediaOptions
• adjustRecordingSignalVolume
• adjustPlaybackSignalVolume
• adjustUserPlaybackSignalVolume
• adjustAudioMixingVolume
• adjustAudioMixingPlayoutVolume
• adjustAudioMixingPublishVolume
• setInEarMonitoringVolume