IFrame API Not working in IOS Browser

[augustinejenin]

Description:

Hi we have implemented jitsi in our server. we use IFrame API for websites.its working fine in desktop. but when we access the page through mobile browser it works fine in chrome from android device. But it is not working in IOS device (safari browser).We need this to be work in ios also

Steps to reproduce:

1. open this page https://citinew.testme.es/videopage/
2. open this page ios(iphone xr) browser
3. it ask permission only for microphone.

Expected behavior:

When page open in IOS browser the video and audio should work.

Actual behavior:

Now when taking in ios browser video not working.

Additional information:

We made it working in the mobile browser by following update in app.bundle.min.js

change in /usr/share/jitsi-meet/libs/app.bundle.min.js

from:
function i(){return"android"===r.a.OS||“ios”===r.a.OS}

to:
function i(){return false; return"android"===r.a.OS||“ios”===r.a.OS}

change in /usr/share/jitsi-meet/libs/app.bundle.min.js
Here is the IFrame API

<script src='https://mydomain/external_api.js'></script> <script type="text/javascript"> jQuery(document).ready(function() { var domain = 'mydomain'; var options = { roomName: 'chatroom', width: '100%', height: 700, configOverwrite: { disableDeepLinking: true }, parentNode: document.querySelector('#meet'), }; var api = new JitsiMeetExternalAPI(domain, options); }); </script>

[saghul]

What Jitsi package versions are you running?

[saghul]

change in /usr/share/jitsi-meet/libs/app.bundle.min.js

from:
function i(){return"android"===r.a.OS||“ios”===r.a.OS}

to:
function i(){return false; return"android"===r.a.OS||“ios”===r.a.OS}

You shouldn't need to do this because you already use: disableDeepLinking: true

[augustinejenin]

we are using the version is 10. Can you please let me know what code updations i can do to make it work in ios browser?

[saghul]

10 is not a version we have released. How did you install jitsi in your server? If it was using the Debian packages, then do dpkg -l | grep -i jitsi and paste the result here please.

[augustinejenin]

I will give you an update soon. is the issue beacause of that running version?

[saghul]

Maybe, but we need to know which version you have in order to know what fixes you might be missing.

[augustinejenin]

this issue only happens when the chatroom works in Iframe API. if we directly access the url it works in iphone browser.

[augustinejenin]

Sorry for the verson info 10 .it was a mistake
HI here is the response,
root@video:~# dpkg -l | grep -i jitsi
ii jicofo 1.0-567-1 all JItsi Meet COnference FOcus
ii jigasi 1.1-107-g6928850-1 amd64 Jitsi Gateway for SIP
ii jitsi-meet 2.0.4548-1 all WebRTC JavaScript video conferences
ii jitsi-meet-prosody 1.0.4074-1 all Prosody configuration for Jitsi Meet
ii jitsi-meet-turnserver 1.0.4074-1 all Configures coturn to be used with Jitsi Meet
ii jitsi-meet-web 1.0.4074-1 all WebRTC JavaScript video conferences
ii jitsi-meet-web-config 1.0.4074-1 all Configuration for web serving of Jitsi Meet
ii jitsi-videobridge2 2.1-197-g38256192-1 all WebRTC compatible Selective Forwarding Unit (SFU)

[saghul]

A number of Safari related fixes have been added since. Can you please update to the latest stable (released yesterday) and re-test?

[augustinejenin]

can you please let me know the release version details. So we can update and check.

[saghul]

What details do you need? It was pushed to out repo, so apt update && apt upgrade should do.

[augustinejenin]

Thank You we will update.
I have one question.
How we can allow the moderator to single chatroom. Now if we create host user password. the same user can be login to different chatrooms.

eg:
We created chatrooms chatroom1 and chatroom2.
created owner user and password.
this user can login to these two chatrooms now.
We need to restrict chatrooms like user can loginto only chatrrom1. if the charoom2 is taken in the browser it should show the authetication popup.

[saghul]

You need to use JWT authentication in that case.

[augustinejenin]

is it possible to do in the server settings when creating the chatroom?
can you please explain how to do?

[saghul]

It's not a server configuration thing (other than enabling token authentication). Each token has a room attribute and then the user would only be allowed to that room. But you need to generate the tokens yourself.

[SharadKumar97]

Hey @saghul

We were testing your latest JITSI updates and we still can't make iOS work using iFrame API on Safari. We tried this on iOS 13 on iPhone and iPad. Video still not working. Even for the audio, we have to manually unmute the microphone.

Please find our jitsi packages information ->
ii jicofo 1.0-589-1 all JItsi Meet COnference FOcus
ii jitsi-meet 2.0.4627-1 all WebRTC JavaScript video conferences
ii jitsi-meet-prosody 1.0.4127-1 all Prosody configuration for Jitsi Meet
ii jitsi-meet-turnserver 1.0.4127-1 all Configures coturn to be used with Jitsi Meet
ii jitsi-meet-web 1.0.4127-1 all WebRTC JavaScript video conferences
ii jitsi-meet-web-config 1.0.4127-1 all Configuration for web serving of Jitsi Meet
ii jitsi-videobridge2 2.1-202-g5f9377b9-1 all WebRTC compatible Selective Forwarding Unit (SFU)

please let us know if you need anything else to troubleshoot this issue.

Thank you

[saghul]

@jallamsetty1 ^ are these the issues you were looking into?

[jallamsetty1]

Video should be working fine, audio is the known issue and the workaround for that is to tap on the camera icon in the safari tab twice to disable and enable it as described above.

[localota-travel]

We're using the iframe API and this is not working for me either regardless of how many times I activate and deactivate the camera when using Safari on iOS. Using Chrome on iOS it just crashes.

[jallamsetty1]

The audio issue should be fixed, we pushed a change to the master. It should be available in the unstable repo or you can try IFrame API against https://alpha.jitsi.net.
We do not support Chrome on iOS.

[augustinejenin]

@saghul
Its working on iphone safari browser. but when we try in ipad its not working. We are using the iframe api. the page just showing a blank screen.

[augustinejenin]

Can you please message? Its not working in iPad. Just showing a blank page.

[augustinejenin]

@jallamsetty1 why IFrame API not working in ipad. its working in android chrome and iphone. when we check in ipad its not working. its showing a blank page. do you have any fix for this?

[saghul]

Have you tested what @jallamsetty1 suggested? Can you gather browser console output? (You can do that with the remote inspector).

[SharadKumar97]

Hi, @saghul Audio and Video works. But are you guys working on Microphone bug? Why we have to double-tap on microphone to unmute it in an iframe.

[saghul]

I’m not aware of such issue.

[SharadKumar97]

Gotcha. Let me explain the issue. We are using JITSI API and are creating a conference session. But when we use this on safari iOS, by default our microphone is muted and we have to double click on microphone to unmute ourselves along with the video camera.

[jallamsetty1]

@SharadKumar97, have you tried the nightly build ? double-tapping on the camera icon in the address bar was a workaround for the audio bug that has been fixed in the nightly build. Are you referring to a different issue ? If so, please provide the logs to help us debug it further.

[augustinejenin]

Now we tested in ipad. Now its working both audio and video in safari. Thank you @jallamsetty1 and @saghul

[SharadKumar97]

@SharadKumar97, have you tried the nightly build ? double-tapping on the camera icon in the address bar was a workaround for the audio bug that has been fixed in the nightly build. Are you referring to a different issue ? If so, please provide the logs to help us debug it further.

Hi. We tested the nightly build and it's fixed there. Thank you

[augustinejenin]

@jallamsetty1 when one customer tried in ios(iphone). he don't access the camera.
Browser : safari
IOS :13.5.1

can you please let me know is there any version issues affecting.

[jallamsetty1]

@jallamsetty1 when one customer tried in ios(iphone). he don't access the camera.
Browser : safari
IOS :13.5.1

can you please let me know is there any version issues affecting.

This issue doesn't seem to be specific to iOS only. Mobile browsers in general seem to be more restrictive, previews of all available cameras is not working on the android phone I tested using chrome and Firefox. Can you please check if it works well from the device settings menu instead of the camera button pop-up ?

[augustinejenin]

@jallamsetty1 can you please let us know what browser settings we have to check. because some clients says that it is not working they are not able to access camera.This issues also happens when shifting the front camera and back camera.

When shifting camera front camera screen shows black.
Different clients are using so can you please let me know the browser settings and device settings need to check.

[jallamsetty1]

@jallamsetty1 can you please let us know what browser settings we have to check. because some clients says that it is not working they are not able to access camera.This issues also happens when shifting the front camera and back camera.

When shifting camera front camera screen shows black.
Different clients are using so can you please let me know the browser settings and device settings need to check.

Yes, looks like the browser on mobile doesn't seem to return a second stream from the same camera, this is what we try to do when we try to get a preview for the camera selection popup from the video button. Though you see a black screen for the preview, you should be able to switch to the rear camera there. We will be working on optimizing all these settings for the mobile browsers but in the meanwhile you can try to use the device selection menu from the following

[dimacros]

I have the same problem, the fullscreen option in iframe api is not working on ios with safari browser.