React Native SDK - Screen sharing not showing, disable video and mic when joining, toggle device speakers

[emmanuel-D]

Which package/packages do you use?

• @stream-io/video-react-sdk
• @stream-io/video-react-native-sdk
• @stream-io/video-client

Describe the bug
I am currently integrating the React Native SDK in my app and so far everything is easy. I am using the Expo Dev Client.

• The 1st issue is that the ShareScreenButton is not displaying the video stream when pressed, although on Android the native Prompt Popup warning before starting the screenshare is displayed. After accepting the sharing, no participant is seeing nothing being shared. No error is thrown in the console logs.

• 2nd is how to auto-disable the video and mic (audio) when joining the call ?

• 3rd is how to toggle Speakers on real Device in order to use laud-speakers instead of low-speakers ?

Below are some of my code snippets:

To Reproduce
Steps to reproduce the behavior:

----- ScreenShareToggleButton.tsx

export const ScreenShareToggleButton = ({
                                            onScreenShareStartedHandler,
                                            onScreenShareStoppedHandler,
                                        }: ScreenShareToggleButtonProps) => {

    const screenCapturePickerViewiOSRef = useRef(null);

    const {onPress, hasPublishedScreenShare} = useScreenShareButton(
        screenCapturePickerViewiOSRef,
        onScreenShareStartedHandler,
        onScreenShareStoppedHandler
    );

    if (!onPress) return null;

    return (
        <>
            <IconButton
                onPress={onPress}
                icon={iconsProps => (
                    <MaterialCommunityIcons
                        {...iconsProps}
                        name={hasPublishedScreenShare ? 'monitor-off' : 'monitor-share'}
                    />
                )}
                style={{borderColor: '#fff'}}
            />
            {IOS && (
                <ScreenCapturePickerView ref={screenCapturePickerViewiOSRef}/>
            )}
        </>
    );
};

---- CallView.tsx

<CallParticipantsList
      participants={participants}
/>

---- app.json (Expo DEV Client) plugins entry

[
        "@stream-io/video-react-native-sdk",
        {
          "enableScreenshare": true,
          "appleTeamId": "XXXXXXXXXX"
        }
      ],
      [
        "@config-plugins/react-native-webrtc",
        {
          "cameraPermission": "App requires camera access in order to capture and transmit video",
          "microphonePermission": "App requires microphone access in order to capture and transmit audio"
        }
 ]

---- Call.tsx (Where User can join call) inside an useEffect hook

const tokenProvider = async () => {
                    const {data} = await roomAuthApi.roomAuthControllerGenerateRoomAccessToken({
                        roomId: room.id,
                        sessionUid: roomParticipant.sessionUid
                    });
                    return (data as any).token as string;
                };
                const apiKey = 'xxxxxxxxxx'; // TODO
                const myClient = StreamVideoClient.getOrCreateInstance({
                    apiKey,
                    tokenProvider,
                    user: {
                        id: roomParticipant.userId,
                        name: roomParticipant.username,
                        image: roomParticipant.userProfilePicUri,
                        type: 'authenticated',
                        custom: {
                            role: roomParticipant.role,
                        },
                    }
                });
                setClient(myClient);

                // Join call
                try {
                    const call = myClient.call('default', room.id);
                    setCall(call);
                    const callResponse = await call.getOrCreate();
                    await call.join();
                } catch (e) {
                    FlashMsg.showError('An error occurred while joining your Room', 3000);
                    setTimeout(() => {
                        FlashMsg.showError(e?.response?.data?.message);
                    }, 2_000);
                    hideModal();
                }
            }
        };
        joinCall();
        return () => {
            call && call.leave();
            client && client.disconnectUser();
            setClient(undefined);
        };

Expected behavior
After starting the screen-share, the <ParticipantView/> component should display the shared stream.
But currently nothing shows-up

Screenshots
VIDEO EXPLAINING THE BUG
https://github.com/user-attachments/assets/b2e1ddce-e4ed-475c-94d5-0d6be23f0ef4

SDK Version

    "@stream-io/react-native-webrtc": "^124.0.2",
    "@stream-io/video-react-native-sdk": "^1.2.14",

Env:
React Native

• Real Android device (Google Pixel 8)

Node JS client

• Node version: 22 LTS

Additional context
Add any other context about the problem here.

[santhoshvai]

Hi,

About 1, this is not reproducible in the sample app. Have you customised the CallContent view or not using it. This might be the cause here. Can you please share it

About 2, You can disable it through Dashboard. Navigate to Video & Audio -> Call Types -> <Your Call Type>. Then you can toggle Camera on by Default and Microphone on by Default

About 3, Sorry I dont understand what you mean here. But check out https://github.com/react-native-webrtc/react-native-incall-manager. Speaker management in React Native is done through this library.

[emmanuel-D]

@santhoshvai Hi 👋,

I don't use the CallContent component at all, I only use CallParticipantList and have created my custom Header and Footer components from scratch.

    const {
        useParticipants,
    } = useCallStateHooks();
    const participants = useParticipants();

           { // Room is joined and live
                callingState === CallingState.JOINED &&
                <>
                    <CurrentLiveRoomHeader/>
                    <View style={[AppStyles.container]}>
                        <CallParticipantsList
                            participants={participants}
                        />
                    </View>
                    <CurrentLiveRoomFooter/>
                </>
          }

Please check this video to see it:
https://github.com/user-attachments/assets/b2e1ddce-e4ed-475c-94d5-0d6be23f0ef4

[emmanuel-D]

@santhoshvai , Hi, any updates on this based on my CallParticipantsList usage ?

[santhoshvai]

@emmanuel-D I recommend to please trying out using CallContent first and then after doing your customisation. You can see the code of how CallContent component uses the CallParticipantsList component etc. Or customise CallContent using the props provided in the component.

[emmanuel-D]

@santhoshvai good recommendation indeed.
Using the CallContent was effective and had to customize it.

But the main issue and confusing part was that according to the docs the Expo setup is not similar to the React Native one.
Will be helpful to speficy that if devs are using an expo custom-dev-client or have ejected, then they should follow the React Native setup instead to make it work.

For me the below native code was missing in my MainActivity.java

import com.oney.WebRTCModule.WebRTCModuleOptions;

 @Override
protected void onCreate(Bundle savedInstanceState) {
    WebRTCModuleOptions options = WebRTCModuleOptions.getInstance();
    options.enableMediaProjectionService = true;
    // ..the rest
}