Call Kit(Android) Screen sharing

Screen sharing refers to the process of broadcasting the contents of one screen to another device or multiple devices in a video call or interactive video scene.

Starts screen sharing	Screen shared by mobile apps	Screen shared by web apps	Landscape mode

Implementation

Screen sharing is only supported in the gallery layout. To share your screen, you will need to set the layout inside the ZegoUIKitPrebuiltCallConfig to Gallery first.

To decide whether to use the full-screen mode by default during screen sharing, you will need to configure the showNewScreenSharingViewInFullscreenMode inside the ZegoLayoutGalleryConfig. Set it to true, meaning that the shared screen will automatically be in full screen when the screen sharing starts.

Meanwhile, the full-screen mode button is customizable, you can decide the way how it shows. To set it, configure the showScreenSharingFullscreenModeToggleButtonRules inside the ZegoLayoutGalleryConfig:

SHOW_WHEN_SCREEN_PRESSED: show the full-screen mode button when clicking the shared screen.
ALWAYS_SHOW: always shows the full-screen mode button.
ALWAYS_HIDE: always hides the full-screen mode button.

To start the screen sharing, add the ZegoMenuBarButtonName.SCREEN_SHARING_TOGGLE_BUTTON config to the bottomMenuBarConfig or topMenuBarConfig to let the screen sharing button show.

Here is the reference code:

Java

Kotlin

public class CallActivity extends AppCompatActivity {
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_call);

    long appID = YourAppID;
    String appSign = YourAppSign;
    String userID = "userID";
    String userName = "userName";
    String callID = "callID";

    ZegoUIKitPrebuiltCallConfig config = ZegoUIKitPrebuiltCallConfig.groupVideoCall();

    config.bottomMenuBarConfig.buttons = Arrays.asList(ZegoMenuBarButtonName.TOGGLE_CAMERA_BUTTON,
            ZegoMenuBarButtonName.SWITCH_CAMERA_BUTTON, ZegoMenuBarButtonName.HANG_UP_BUTTON,
            ZegoMenuBarButtonName.TOGGLE_MICROPHONE_BUTTON, ZegoMenuBarButtonName.SCREEN_SHARING_TOGGLE_BUTTON);


    ZegoLayoutGalleryConfig galleryConfig = new ZegoLayoutGalleryConfig();
    galleryConfig.removeViewWhenAudioVideoUnavailable = true;
    galleryConfig.showNewScreenSharingViewInFullscreenMode = true;
    galleryConfig.showScreenSharingFullscreenModeToggleButtonRules  = ZegoShowFullscreenModeToggleButtonRules.SHOW_WHEN_SCREEN_PRESSED;
    config.zegoLayout = new ZegoLayout(ZegoLayoutMode.GALLERY, galleryConfig);
    
    ZegoUIKitPrebuiltCallFragment fragment = ZegoUIKitPrebuiltCallFragment.newInstance(appID,appSign, userID, userName, callID, config);
    getSupportFragmentManager().beginTransaction().replace(R.id.fragment_container, fragment).commitNow();

Copied!

class CallActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_call)
        val appID: Long = YourAppID
        val appSign: String = YourAppSign
        val userID = "userID"
        val userName = "userName"
        val callID = "callID"

        config.bottomMenuBarConfig.buttons = Arrays.asList<ZegoMenuBarButtonName>(
            ZegoMenuBarButtonName.TOGGLE_CAMERA_BUTTON,
            ZegoMenuBarButtonName.SWITCH_CAMERA_BUTTON,
            ZegoMenuBarButtonName.HANG_UP_BUTTON,
            ZegoMenuBarButtonName.TOGGLE_MICROPHONE_BUTTON,
            ZegoMenuBarButtonName.SCREEN_SHARING_TOGGLE_BUTTON
        )
        val galleryConfig = ZegoLayoutGalleryConfig()
        galleryConfig.removeViewWhenAudioVideoUnavailable = true
        galleryConfig.showNewScreenSharingViewInFullscreenMode = true
        galleryConfig.showScreenSharingFullscreenModeToggleButtonRules =
            ZegoShowFullscreenModeToggleButtonRules.SHOW_WHEN_SCREEN_PRESSED
        config.zegoLayout = ZegoLayout(ZegoLayoutMode.GALLERY, galleryConfig)
        
        val fragment: ZegoUIKitPrebuiltCallFragment =
            ZegoUIKitPrebuiltCallFragment.newInstance(
                appID,appSign, userID, userName, conferenceID, config
            )
        supportFragmentManager.beginTransaction().replace(R.id.fragment_container, fragment)
            .commitNow()
    }
}

Copied!

You can set galleryLayout in ZegoUIKitPrebuiltCallInvitationConfig for call-invitation:

Untitled

ZegoUIKitPrebuiltCallInvitationConfig callInvitationConfig = new ZegoUIKitPrebuiltCallInvitationConfig();
callInvitationConfig.notifyWhenAppRunningInBackgroundOrQuit = false;
callInvitationConfig.provider = new ZegoUIKitPrebuiltCallConfigProvider() {
    @Override
    public ZegoUIKitPrebuiltCallConfig requireConfig(ZegoCallInvitationData invitationData) {
        ZegoUIKitPrebuiltCallConfig config = ZegoUIKitPrebuiltCallConfig.groupVideoCall();
        config.bottomMenuBarConfig.buttons = Arrays.asList(ZegoMenuBarButtonName.TOGGLE_CAMERA_BUTTON,ZegoMenuBarButtonName.SWITCH_CAMERA_BUTTON, ZegoMenuBarButtonName.HANG_UP_BUTTON,ZegoMenuBarButtonName.TOGGLE_MICROPHONE_BUTTON, ZegoMenuBarButtonName.SCREEN_SHARING_TOGGLE_BUTTON);
        ZegoLayoutGalleryConfig galleryConfig = new ZegoLayoutGalleryConfig();
        galleryConfig.removeViewWhenAudioVideoUnavailable = true;
        galleryConfig.showNewScreenSharingViewInFullscreenMode = true;
        galleryConfig.showScreenSharingFullscreenModeToggleButtonRules = ZegoShowFullscreenModeToggleButtonRules.SHOW_WHEN_SCREEN_PRESSED;
        config.layout = new ZegoLayout(ZegoLayoutMode.GALLERY, galleryConfig);
        return config;
    }
};
ZegoUIKitPrebuiltCallService.init(getApplication(), appID, appSign, userID, userName, callInvitationConfig);

Copied!

Screen rotation

To support screen rotation, do the following:

Turn off the rotation lock function in the phone settings.
Add the android:configChanges="locale|keyboardHidden|fontScale|orientation|screenSize|screenLayout|layoutDirection|density|uiMode" attribute to the manifest file configuration of the Activity that adds the fragment. Taking CallActivity as an example:

Untitled

  <activity
      android:name=".CallActivity"
      android:configChanges="locale|keyboardHidden|fontScale|orientation|screenSize|screenLayout|layoutDirection|density|uiMode"
      android:exported="false" />

Copied!

Screen sharing

What's screen sharing?

Implementation

Share the screen

Screen rotation