Inability to Receive Screen Sharing Stream on React Native Mobile App

[Schayimerdan]

After successfully implementing screen-sharing functionality on our web application using React-Lib, we are encountering difficulties receiving the screen-sharing stream on mobile devices that use React Native. Despite efforts, the screen-sharing stream remains inaccessible within the app. The JSON data indicates the absence of a screen-sharing stream.

It's suspected that the issue may be related to the native environment of React Native. However, further investigation is required to pinpoint the exact cause of the problem.

Would be great if you guys could offer me some ideas.
Thanks ;)

[thomasleflem]

Hi Schayimerdan,

Did you try with one of our tutorial (https://apirtc.github.io/ApiRTC-examples/conferencing_mute_screen/index.html) ?

On my side the screensharing Stream is well displayed on the React Native side.

BR,

Apizee Support Team

[Schayimerdan]

Hi Thomas,
thanks for the response. The link that you have attached above is a live demo, not a tutorial.

[thomasleflem]

Hi Schayimerdan,

Yes but you can access the source code here (pure js example not based on React Lib ) : https://github.com/apirtc/ApiRTC-examples/tree/master/conferencing_mute_screen

If you join the same Conversation in the live demo and in the React native App could you see the screensharing on the mobile device ?

BR,

Apizee Support Team

[Schayimerdan]

I am only seeing the joined streams in the React native App.
The JSON data indicates the absence of a screen-sharing stream in the app as well.
BR

[thomasleflem]

OK could you tell me which ApiKey you use please ?
I will check if the screenSharing Stream is well published.

BR,

Apizee Support Team

[Schayimerdan]

The last 4-digit: 3cfc

[thomasleflem]

Hi Schayimerdan,

Thank you.

I checked the conversation Timeline for your latest test with Android RectaNative (11/03/2024)

there is only one stream published on your the React Lib implementation.

Could you tell me more about the screensharing implementation on the react lib side ? for the moment there is no hook to create the screensharing stream so could you share the screensharing implementation and the ApiRTC log (DEBUG)

import { setLogLevel } from "@apirtc/react-lib";

setLogLevel("debug");

I had activated debug log on ApiRTC side on your enterprise so could you gather logs on react lib side please ?

BR,

Apizee Support Team

[Schayimerdan]

Hey Thomas,

sorry for the late reply.
As you can see on the screenshot, there are massive amounts of Logs when I start a stream, can you please tell me more specifically which type of Log you need? Do you need only on the react-lib site or both?

BR,
Schay

[thomasleflem]

Hi Schayimerdan,

If you can gather all logs (ApiRTC one and react lib) I will check them.

Thank you,

BR,

Apizee Support Team

[Schayimerdan]

Hi Thomas, I have attached the Logs after I started a Screenshare stream. But please keep in mind, that the problem was on the RN side, not on react side. There was no Screenshare stream received on the app.

eamId: '8714164609391763'} apiRTC.min.js:30877 [2024-03-15T08:21:16.286Z][DEBUG]apiRTC(ApiCC_Methods) Adding listener on type :userMediaStop apiRTC.min.js:30877 [2024-03-15T08:21:16.286Z][DEBUG]apiRTC(ApiCC_Methods) Adding listener on type :localStreamUpdated apiRTC.min.js:30877 [2024-03-15T08:21:16.286Z][DEBUG]apiRTC(ApiCC_Methods) Adding listener on type :backgroundSubstractionStopVisibilityChange apiRTC.min.js:30877 [2024-03-15T08:21:16.287Z][DEBUG]apiRTC(ApiCC_Methods) Adding listener on type :backgroundSubstractionStopComputeTime apiRTC.min.js:30877 [2024-03-15T08:21:16.287Z][DEBUG]apiRTC(ApiCC_Methods) Adding listener on type :AIESnapshot apiRTC.min.js:30877 [2024-03-15T08:21:16.287Z][DEBUG]apiRTC(ApiCC_Methods) Adding listener on type :AIELog apiRTC.min.js:30877 [2024-03-15T08:21:16.415Z][DEBUG]apiRTC(Stream) attachToElement apiRTC.min.js:30877 [2024-03-15T08:21:16.420Z][DEBUG]apiRTC(ApiCC_Methods) attachMediaStream apiRTC.min.js:30877 [2024-03-15T08:21:16.440Z][DEBUG]apiRTC(Stream) attachToElement apiRTC.min.js:30877 [2024-03-15T08:21:16.441Z][DEBUG]apiRTC(ApiCC_Methods) attachMediaStream apiRTC.min.js:30877 [2024-03-15T08:21:16.619Z][DEBUG]apiRTC(ApiCC_Methods) enumerateDevices(), sources : (7) [InputDeviceInfo, InputDeviceInfo, InputDeviceInfo, InputDeviceInfo, MediaDeviceInfo, MediaDeviceInfo, MediaDeviceInfo] apiRTC.min.js:30877 [2024-03-15T08:21:16.621Z][DEBUG]apiRTC(MediaDeviceManager) gotSources : sourceInfos : (7) [InputDeviceInfo, InputDeviceInfo, InputDeviceInfo, InputDeviceInfo, MediaDeviceInfo, MediaDeviceInfo, MediaDeviceInfo] apiRTC.min.js:30877 [2024-03-15T08:21:16.623Z][DEBUG]apiRTC(MediaDeviceManager) Audio device detected :true apiRTC.min.js:30877 [2024-03-15T08:21:16.623Z][DEBUG]apiRTC(MediaDeviceManager) Video device detected :true apiRTC.min.js:30877 [2024-03-15T08:21:16.623Z][DEBUG]apiRTC(MediaDeviceManager) audio Output device detected :true apiRTC.min.js:30877 [2024-03-15T08:21:16.624Z][DEBUG]apiRTC(MediaDeviceManager) mediaDeviceSourceInfosArray : {audioinput: {…}, audiooutput: {…}, videoinput: {…}} apiRTC.min.js:30877 [2024-03-15T08:21:16.625Z][DEBUG]apiRTC(WebRTC_Client) this.gum_config: {audio: {…}, video: {…}} apiRTC.min.js:30877 [2024-03-15T08:21:16.627Z][DEBUG]apiRTC(ApiCCSession) setUserData in session : {audioDevicePresent: true, videoDevicePresent: true} apiRTC.min.js:30877 [2024-03-15T08:21:16.627Z][DEBUG]apiRTC(Utils) mergeJSON apiRTC.min.js:30877 [2024-03-15T08:21:16.628Z][DEBUG]apiRTC(Utils) {username: 'guest-7ee6c27f-de96', userConfId: 'guest-7ee6c27f-de961710490788619', webRtcCompliant: true, dtlsCompliant: true, osName: 'Windows', …} apiRTC.min.js:30877 [2024-03-15T08:21:16.628Z][DEBUG]apiRTC(ApiCCSession) this.userData : {username: 'guest-7ee6c27f-de96', userConfId: 'guest-7ee6c27f-de961710490788619', webRtcCompliant: true, dtlsCompliant: true, osName: 'Windows', …} apiRTC.min.js:30877 [2024-03-15T08:21:16.628Z][DEBUG]apiRTC(ApiCCSession) actualUserData : {username: 'guest-7ee6c27f-de96', userConfId: 'guest-7ee6c27f-de961710490788619', webRtcCompliant: true, dtlsCompliant: true, osName: 'Windows', …} apiRTC.min.js:30877 [2024-03-15T08:21:16.629Z][DEBUG]apiRTC(ApiCCSession) forceSendData : undefined apiRTC.min.js:30877 [2024-03-15T08:21:16.629Z][DEBUG]apiRTC(ApiCCSession) userData is not changed, leaving userData processing apiRTC.min.js:30877 [2024-03-15T08:21:19.988Z][DEBUG]apiRTC(ApiCCUserMediaStream) mute event : BrowserCaptureMediaStreamTrack {kind: 'video', id: '46174551-4fd1-4d99-9890-dc1557fa0dca', label: 'web-contents-media-stream://04968639F5E826FF2C08D900AA32A95B', enabled: true, muted: true, …} apiRTC.min.js:30877 [2024-03-15T08:21:22.530Z][DEBUG]apiRTC(ApiCCUserMediaStream) notifyMLineMutedCall; mline: video, muted: true

[thomasleflem]

Hi Schayimerdan,

I checked on our call server side and the screensharing Stream is not published.(based on timestamp of gather logs)
if I look to your logs the ScreenSharing Stream is well created but this one is not published.

Only the Camera Stream is published

For comparison , here is the Timeline of my own implementation based on the React Lib tuto with my own ScreenSharing Hook (not yet available on the React Lib source)

You can see the ScreenSharing Publish call and the Subscribtion by the ReactNative user (id 472741)

So you must understand why the ScreenSharing Stream is not published using the Hook useConversationStreams

BR,

Apizee Support Team

[Schayimerdan]

Hi Thomas,

could you please share the implementation that how you published screen sharing on react-lib and subscribed on the ReactNative side?

BR,
Schay

[thomasleflem]

Hi Schayimerdan,

Sorry for the response delay.

• 1 st of all you need to create a new Hook based on the useCameraStream of the react lib (see file useScreenSharingStream.ts in zip file)

• 2 nd point modify the useMemo to add the screensharingStream (add checkStreams calculation function) (see file App.js in zip file)

useScreenSharingStream.zip

I'm not a react Dev so this is just an example on how to create a ScreenSharing Stream publish it.
on reactnative side the tuto will automatically subscribe to it.

Hope this help.

BR,

Apizee Support Team