Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Whiteboard showing black screen in Jitsi React native SDK #15199

Open
11 tasks
Sbhagat705 opened this issue Oct 15, 2024 · 6 comments
Open
11 tasks

Whiteboard showing black screen in Jitsi React native SDK #15199

Sbhagat705 opened this issue Oct 15, 2024 · 6 comments

Comments

@Sbhagat705
Copy link

What happened?

I have configured jitsi react native sdk for android and ios both. the issue which i am facing at mobile app are given below.
Issue:
One user is joined from web as a moderator and another user from mobile app is joined as a student.
when a moderator is showing whiteboard feature from web to mobile it is working in web. but in mobile, user cannot see whiteboard feature in mobile app. it is showing Blackscreen for whiteboard in android and ios both platform.

Whiteboard screen visible in web

Screenshot 2024-10-15 at 12 57 48 PM

Whiteboard screen is not visible in mobile, showing black screen.
Simulator Screenshot - iPhone 15 Pro - 2024-10-15 at 11 08 33

and i am using this component in my code
<JitsiMeeting
config={{
hideConferenceTimer: true,
subject: room,
startTime: start_date,
endTime: end_date,
duration: duration,
Whiteboard: {
enabled: true,
//collabServerBaseUrl: "https://test.jitsi.globalu.com/",
},
}}
flags={{
"invite.enabled": true,
"audioMute.enabled": true,
"ios.screensharing.enabled": true,
"fullscreen.enabled": false,
"audioOnly.enabled": false,
"android.screensharing.enabled": true,
"pip.enabled": true,
"pip-while-screen-sharing.enabled": true,
"conference-timer.enabled": true,
"close-captions.enabled": false,
"toolbox.enabled": true,
}}
eventListeners={eventListeners}
ref={jitsiMeeting}
style={styles.meeting}
room={room}
serverURL="https://test.jitsi.globalu.com/"
token={jwt}
userInfo={{
displayName: ${user.first_name} ${user.last_name},
email: ${user.email},
avatarURL: ${user.profile_url},
}}
/>

please let me know if you are using any additional library here to modify this feature in mobile or is there any correction in my code.

jitsi version : "@jitsi/react-native-sdk": "^10.2.0"

Platform

  • Chrome (or Chromium based)
  • Firefox
  • Safari
  • Other desktop browser
  • Android browser
  • iOS browser
  • Electron app
  • Android mobile app
  • iOS mobile app
  • Custom app using a mobile SDK

Browser / app / sdk version

@jitsi/react-native-sdk": "^10.2.0

Relevant log output

No response

Reproducibility

  • The problem is reproducible on meet.jit.si

More details?

No response

@Calinteodor
Copy link
Contributor

Calinteodor commented Oct 15, 2024

Do you repro the issue if you test using jitsi sample app?
https://github.com/jitsi/jitsi-meet-sdk-samples/tree/master/react-native
Also, I see in the sample code that Whiteboard is incorrect, it should be with a lowercase and //collabServerBaseUrl: "https://test.jitsi.globalu.com/" is commented out, which is also wrong.

@Sbhagat705
Copy link
Author

Do you repro the issue if you test using jitsi sample app? https://github.com/jitsi/jitsi-meet-sdk-samples/tree/master/react-native Also, I see in the sample code that Whiteboard is incorrect, it should be with a lowercase and //collabServerBaseUrl: "https://test.jitsi.globalu.com/" is commented out, which is also wrong.

-->I have taken the reference from jitsi sample app repo but i can able to see this issue still persist, also i have tried to Whiteboard as a lowercase character and uncommented collabServerBaseUrl, but this issue still exist.

I have checked this ticket where it is mentioned whiteboard is facing issue in mobile and It's not currently implemented for mobile.
reference ticket: #13971

please let me know do we need to use any third party library to show whiteboard. Please guide me here ,what else we can do?

<JitsiMeeting
config={{
hideConferenceTimer: true,
subject: room,
startTime: start_date,
endTime: end_date,
duration: duration,
whiteboard: {
enabled: true,
collabServerBaseUrl: "https://test.jitsi.globalu.com/",
},
}}
flags={{
"audioMute.enabled": true,
"ios.screensharing.enabled": true,
"fullscreen.enabled": false,
"audioOnly.enabled": false,
"android.screensharing.enabled": true,
"pip.enabled": true,
"pip-while-screen-sharing.enabled": true,
"conference-timer.enabled": true,
"close-captions.enabled": false,
"toolbox.enabled": true,
}}
eventListeners={eventListeners}
ref={jitsiMeeting}
style={styles.meeting}
room={room}
serverURL="https://test.jitsi.globalu.com/"
token={jwt}
userInfo={{
displayName: ${user.first_name} ${user.last_name},
email: ${user.email},
avatarURL: ${user.profile_url},
}}
/>

@Calinteodor
Copy link
Contributor

Calinteodor commented Oct 16, 2024

Please check again the react native app https://github.com/jitsi/jitsi-meet-sdk-samples/blob/master/react-native/components/Meeting.tsx. It's updated and whiteboard is enabled on it.
The problem is not reproducible using https://meet.jit.si/.

@Sbhagat705
Copy link
Author

I have tried with this https://meet.jit.si/. URL and it is not working . As i am using custom URL to host the jitsi live session
whiteboard: {
enabled: true,
collabServerBaseUrl: "https://test.jitsi.globalu.com/",
},

for the same, it is not working at my end.

@Sbhagat705
Copy link
Author

It is not working the same thing i have checked in Jitsi mobile app
there also it is showing black screen. what should we need to do ? please let us know.

@Calinteodor
Copy link
Contributor

Can you share some logs? This is a recording done with the sample app that I sent you, using a web moderator and a mobile participant. The web moderator initiates whiteboard.

IMG_6086.MP4

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants