Live Streaming 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 ZegoUIKitPrebuiltLiveStreamingConfig 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 to let the screen sharing button show.

Here is the reference code:

Java

Kotlin

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

    long appID = YourAppID;
    String appSign = YourAppSign;
    String userID = "userID";
    String userName = "userName";
    String liveID = "testLiveID";

    // Modify your custom configurations here.
    ZegoUIKitPrebuiltLiveStreamingConfig config;
    if (isHost) {
        config = ZegoUIKitPrebuiltLiveStreamingConfig.host();
    } else {
        config = ZegoUIKitPrebuiltLiveStreamingConfig.audience();
    }
    config.bottomMenuBarConfig.hostButtons = Arrays.asList(ZegoMenuBarButtonName.TOGGLE_CAMERA_BUTTON,
       ZegoMenuBarButtonName.TOGGLE_MICROPHONE_BUTTON,ZegoMenuBarButtonName.SWITCH_CAMERA_FACING_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);

    ZegoUIKitPrebuiltLiveStreamingFragment fragment = ZegoUIKitPrebuiltLiveStreamingFragment.newInstance(appID, appSign, userID, userName, liveID, config);

    getSupportFragmentManager()
            .beginTransaction()
            .replace(R.id.fragment_container, fragment)
            .commitNow();
  }
}

Copied!

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

        // Modify your custom configurations here.
        val config: ZegoUIKitPrebuiltLiveStreamingConfig = if (isHost) {
            ZegoUIKitPrebuiltLiveStreamingConfig.host()
        } else {
            ZegoUIKitPrebuiltLiveStreamingConfig.audience()
        }
        config.bottomMenuBarConfig.hostButtons = Arrays.asList<ZegoMenuBarButtonName>(
            ZegoMenuBarButtonName.TOGGLE_CAMERA_BUTTON,
            ZegoMenuBarButtonName.TOGGLE_MICROPHONE_BUTTON,
            ZegoMenuBarButtonName.SWITCH_CAMERA_FACING_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 = ZegoUIKitPrebuiltLiveStreamingFragment
            .newInstance(appID, appSign, userID, userName, liveID, config)
        supportFragmentManager
            .beginTransaction()
            .replace(R.id.fragment_container, fragment)
            .commitNow()
    }
}

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 LiveActivity as an example:

Untitled

<activity
    android:name=".LiveActivity"
    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