React Native - shareScreen() does not turn on screen share

[faiziqureshi2504 (Muhammad)]

Description
I am using @zoom/react-native-videosdk:"^1.10.10" when I call zoom.shareHelper.shareScreen() it opens a popup to start now sharing screen, but nothing happens after that.
I have also tried updating the library to latest version 1.13.10, but still facing the same issue.
I am following the same steps as mentioned in the documentation
On the other hand, in iOS it records the screen and save it in my iPhone gallery. But doesnt share the screen to other user.

React Native Video SDK version
1.10.10

Video SDK Code Snippets

const onOpenScreenShareMenu = async () => {
    const isSharingLocked = await zoom.shareHelper.isShareLocked();
    if (!isSharingLocked) {
      await zoom.shareHelper.shareScreen();
    }
  };

Screenshots

[ekaansh.zoom (Ekaansh)]

Hey @faiziqureshi2504

Have you followed all the platform specific steps here: Video SDK - React Native - Screen Sharing - Zoom Developers? Have you set up the foreground service for Android?

[faiziqureshi2504 (Muhammad)]

Thank you @ekaansh.zoom for responding on my post.
Yes, I tried adding permission FOREGROUND_SERVICE_MICROPHONE and FOREGROUND_SERVICE in my app.json, as I am working in React Native. But its still not working. When I call zoom.shareHelper.shareScreen() it doesnt start sharing screen.

What else you think might be the cause?

[ekaansh.zoom (Ekaansh)]

No I meant did you create the NotificationService.java file in ndroid/app/src/main/java/com/<your_app_org>/<your_app_name>/as described in the docs?

It should look like this:

public class NotificationService extends Service {
  private final String CHANNEL_ID = "rn_zoom_video_sdk_notification_channel_id";
  private final int NOTIFICATION_ID = 9;
...
 }

}

You can find the full code in the docs.

Additionally, can you also confirm setting up android/app/src/main/java/com/<your_app_org>/<your_app_name>/MainActivity.kt? You need to add the following code:

import android.app.Activity;
import android.content.Intent;
import us.zoom.sdk.ZoomVideoSDK;
import us.zoom.sdk.ZoomVideoSDKShareHelper;
...
  override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
      super.onActivityResult(requestCode, resultCode, data)
      if (requestCode == 0 && resultCode == Activity.RESULT_OK) {
          val intent = Intent(this, NotificationService::class.java)
          val shareHelper = ZoomVideoSDK.getInstance().shareHelper
          if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
              startForegroundService(intent)
          } else {
              startService(intent)
          }
          shareHelper.startShareScreen(data)
      }
  }

Can also be found in the same doc.

[faiziqureshi2504 (Muhammad)]

I am a bit lost here @ekaansh.zoom . I am using React Native Expo Bare workflow setup, these files supposed to be created automatically inside android folder.
If I create these files inside android folder by myself, then while building the apk or ios apps, these files not be there.
Do you get my point? Or am I wrong?

[faiziqureshi2504 (Muhammad)]

Where can I get CHANNEL_ID ? It can be anything but unique value? Or is it somewhere in Zoom Admin Account?

[ekaansh.zoom (Ekaansh)]

When you run expo prebuild, it’ll generate the required ios and android directories inside your react-native app directory. You’ll then have to manually create/modify these files as explained in our documentations. Please follow all the steps as in the docs.

You can see this diff for the setup: Comparing zoom:main...EkaanshArora:diff-for-screenshare-setup · zoom/videosdk-reactnative-quickstart · GitHub

[faiziqureshi2504 (Muhammad)]

@ekaansh.zoom For the iOS, do I have to follow the same steps as described in documentation for iOS? Is it possible for you to provide me a GitHub code for iOS zoom screen sharing implementation, just as you sent me GitHub link for android?

[ekaansh.zoom (Ekaansh)]

@faiziqureshi2504

or the iOS, do I have to follow the same steps as described in documentation for iOS?

Yes.

@faiziqureshi2504

Is it possible for you to provide me a GitHub code for iOS zoom screen sharing implementation, just as you sent me GitHub link for android?

The diff I linked has the setups instructions for both Android and iOS. See the feat: ios screenshare commit in particular for iOS.

[faiziqureshi2504 (Muhammad)]

@ekaansh.zoom I tried the documentation you have provided for ios & android.

Android
Now when I call the zoom.shareHelper.shareScreen(); the screen gets blacked but nothing showed on the other end of the user i.e. the web client. It does prints ZoomVideoSDKShareStatus_Startin the logs for android, but nothing appears on the web side that has @zoom/videosdk. The canvas on the web, increases the height when the shareScreen() function called on the android. Other than that the video call and microphone works fine.

IOS
Also from the iOS, when I call the screenShare() it stars recording the screen, instead of sharing the screen, and when I stop it, it saved the recording to my phone gallary. Other than that the video call and microphone works fine.

Is this issue sounds familiar to you? Is it because I am passing the channel_id wrong? Or should I have to implement anything related to handling screen share on the web side as well, thats why its not appearing on the web side? I mean is there anything Im missing on the web side related to screen sharing?

Note: Screen share option is only available on phone, and web side users can only see the phone screens. So we are not implementing the screen share option in the web side.

[rehema.zoom (Rehema)]

HI @faiziqureshi2504,

Thank you for sharing more about this during our office hours, it was great to chat with you. Could you share code snippets for your android and iOS screen share implementation?

Thanks,
Rehema

[faiziqureshi2504 (Muhammad)]

@rehema.zoom Sure, here are few code snippets that I hope helps you understand pretty much the code structure:

Thats how Im using the ZoomView from @zoom/react-native-videosdk

And thats the openScreenShareMenu event, triggers when someone press the share screen button:

Thats the listener, tells us if the screenshare status has been changed, if it started then it shows the text Sharing Screen:

I have added the NotificationService.java file and added the code in MainActivity.kt

In the NotificationService.java s this channel_id looks correct to you? or it needs to be changed?

I am using these steps for iOS SDK:

The app currently uses v1.10.11 of the iOS Zoom Video SDK and Zoom Screenshare SDK, which can be downloaded from the Zoom developer dashboard.

1. After logging in, scroll to the bottom of the page and click “Account.”
2. On the left sidebar, click “Build App.”
3. In the “Download” section, select “iOS,” then download v1.10.11 of the SDK.
4. In the downloaded folder, under zoom-video-sdk-iOS-1.10.11/Sample-Libs/lib, copy the following folders into the Boundless app:
   1. ZoomVideoSDK.xcframework into mobile/ios
   2. ZoomVideoSDKScreenShare.xcframework into mobile/ios

Thats pretty much the basic structure for zoom video SDK for React Native.

Let me know what are your thoughts on it.

Outputs:
Android User sharing screen:

Web User seeing what has been shared from the Android User:

[rehema.zoom (Rehema)]

Hi @faiziqureshi2504 ,

Thank you for sharing. I just send you a private message to investigate further.

Thanks,
Rehema

[adityadeshmukh932 (Aditya)]

Can you please reply here ? I am facing same issue on android.

[faiziqureshi2504 (Muhammad)]

@adityadeshmukh932 I am still looking into this issue with @rehema.zoom . I will update here if we find anything.
Let me know if you have already found the solution.