search

jitsi / jitsi-meet

Jitsi Meet - Secure, Simple and Scalable Video Conferences that you use as a standalone app or embed in your web application.
https://jitsi.org/meet
Apache License 2.0
23.21k stars 6.74k forks source link

how to allow jitsi meeting on mobile browser using webview? I am Externel jitsi api. #5773

Closed jeetvirani closed 4 years ago

jeetvirani commented 4 years ago

When i am running in desktop it is working fine. But when i am trying into Mobile browser or webview it is giving this error: You need the Jitsi Meet mobile app to join this meeting on your phone. Can anyone help me?

Entretoize commented 4 years ago

Same question, it works by loading the computer version on mobile so why are they forcing using the app ? It must have a workaround as it just checks user agent.

Entretoize commented 4 years ago

Just found a way, just add that in your index.html after the first <script>:

Object.defineProperty(navigator, 'userAgent', {
    get: function () { return 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.163 Safari/537.36'; }
});
alariej commented 4 years ago

Hi @Entretoize, your solution looks promising but doesn't work for me unfortunately, I still can't get the Jitsi Meet API to load on Webview Android (react-native-webview@5.12.1). I don't get passed the warning to install the Jitsi app. I tried various user agents, no luck. Are you using more or less the same script as in https://github.com/jitsi/jitsi-meet/blob/master/doc/examples/api.html? If not, any chance you can post your script? Perhaps other settings also influence the environment detection in the Jitsi API...

Entretoize commented 4 years ago

My solution is for a mobile web browser. It could work in a webview, with that user agent, but with the right permissions and some javascript trick maybe I remember the webview needs some javascript custom handling. I'm using jitsi "as is" on debian, I used the quick install guide.

alariej commented 4 years ago

Actually the answer is simpler than I thought, in the case of React Native: react-native-webview has a userAgent property. Setting it to a desktop value, such as 'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/80.0.3987.163 Chrome/80.0.3987.163 Safari/537.36', bypasses the warning and brings Jitsi Meet on Webview.

dmelechow commented 4 years ago

@Entretoize I took code from an example, and I tried your approach but it doesn't work for me 

<head>
  <meta charset="utf-8">
  <meta http-equiv="content-type" content="text/html;charset=utf-8">
</head>

<body>

  <script>
    Object.defineProperty(window.navigator, 'userAgent', {
      get: function () { return 'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/80.0.3987.163 Chrome/80.0.3987.163 Safari/537.36'; }
    });
  </script>

  <script src="https://meet.jit.si/external_api.js"></script>

  <script>
    var domain = "meet.jit.si";
    var options = {
      roomName: "JitsiMeetAPIExample1221121212",
      width: 700,
      height: 500,
      parentNode: undefined,
      configOverwrite: {},
      interfaceConfigOverwrite: {
        filmStripOnly: true
      }
    }
    var api = new JitsiMeetExternalAPI(domain, options);
  </script>
</body>

</html>
saghul commented 4 years ago

Try this:

configOverwrite: {
    disableDeepLinking: true
},

Note that this won't work on iOS because we need to make some Safari fixes and last I checked web viewss don't have WebRTC support.

Entretoize commented 4 years ago

@Entretoize I took code from an example, and I tried your approach but it doesn't work for me

I'm not using the external api, I installed jitsi-meet on my own server.

dmelechow commented 4 years ago

@saghul Thanks, It helped, but it lost the ability to turn on audio/video, is it a bug or I need to add something extra?

Screenshot 2020-04-09 at 13 13 45

alariej commented 4 years ago

@saghul On Android, Webview (from v36) has WebRTC support:

https://developer.chrome.com/multidevice/webview/overview#does_the_new_webview_have_feature_parity_with_chrome_for_android_

Not quite sure about WKWebView on iOS.

saghul commented 4 years ago

@dmelechow You are using filmStripOnly: true was that intentional? Remove that it should just work.

dmelechow commented 4 years ago

@saghul Unfortunately, this approach doesn't work too, I removed filmStripOnly: true and used this configOverwrite: { disableDeepLinking: true }, but whatever I can't turn on audio/video and I got some warning message 2020-04-10 13 37 03

Entretoize commented 4 years ago

If you are building a android app, maybe permission are missing in manifest or not clearly asked to user. Or you are using an iframe ?

dmelechow commented 4 years ago

@Entretoize I tried to build the web application with <script src="https://meet.jit.si/external_api.js"></script> in Html file and try to run in it in a browser with "toggle device" with mobile preview resolution

alariej commented 4 years ago

@dmelechow I just tested the Jitsi Meet external API on Android Webview and I can confirm that it fails to access the camera and microphone. The problem is that the API serves Jitsi Meet inside an iframe, which for some reason fails to obtain the permissions given to the Webview. If you just pass the Jitsi Meet URL (https://meet.jit.si/<someConferenceID>#config.disableDeepLinking=true) to the Webview, instead of the API, then everything works fine: The Webview requests the camera and microphone permissions, and you get video and sound.

One problem with the iframe could be that the Jitsi Meet API server does not pass the "Access-Control-Allow-Origin":"*" CORS header. AFAIK, this would be required for Jitsi Meet to access hardware permissions behind an iframe inside Webview. @saghul, can you confirm this?

Entretoize commented 4 years ago

I already succeded in using jitsi-meet in an iframe with that code:

alariej commented 4 years ago

But was the source https://meet.jit.si, or a self-hosted version? As I wrote above, it probably works only if the web server for the source provides the "Access-Control-Allow-Origin":"*" CORS header. I believe the Jitsi Meet API already provides the allow="camera;microphone" directive in the iframe, so that should not be the problem.

Entretoize commented 4 years ago

It was on the self hosted version, but I just tried in an android webview with the meet.jit.si and the camera and microphone works and are streamed. I added the following permissions in the manifest:

    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.MICROPHONE" />
    <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
    <uses-permission android:name="android.permission.RECORD_AUDIO" />

And needed to request permission from the user: Manifest.Permission.RecordAudio

alariej commented 4 years ago

I use the exact same permission settings. Do you pass https://meet.jit.si as a URL parameter to the Webview, or are you building the HTML using <script src="https://meet.jit.si/external_api.js"></script>?

Entretoize commented 4 years ago

I just pass https://meet.jit.si. EDIT: I just tried with your code:

<head>
  <meta charset="utf-8">
  <meta http-equiv="content-type" content="text/html;charset=utf-8">
</head>

<body>

 <script src="https://meet.jit.si/external_api.js"></script>

  <script>
    var domain = "meet.jit.si";
    var options = {
      roomName: "JitsiMeetAPIExample1221121212",
      width: 700,
      height: 500,
      parentNode: undefined,
      configOverwrite: {},
      interfaceConfigOverwrite: {
        filmStripOnly: true
      }
    }
    var api = new JitsiMeetExternalAPI(domain, options);
  </script>
</body>

</html>

And it worked too. But one question, where do you put this code ? I put it on my website and call the url, maybe that's the diffrence ?

alariej commented 4 years ago

Yes I think that is the difference. Your web server must somehow provide the required CORS header (https://tecadmin.net/enable-cors-apache/), while the https://meet.jit.si server does not.

Webview has both a source.html parameter and a url parameter. You can put the Jitsi Meet API code in the source parameter, and leave the url parameter empty.

In React Native, it would be:

const html =
`<head>
  <meta charset="utf-8">
  <meta http-equiv="content-type" content="text/html;charset=utf-8">
</head>
<body>
  <script src="https://meet.jit.si/external_api.js"></script>
  <script>
    ...
  </script>
</body>
</html>`;

then call the Webview like this:

<WebView
  source={{
    html: html,
  }}
  mediaPlaybackRequiresUserAction={ false }
  allowsInlineMediaPlayback={ true }
/>
dmelechow commented 4 years ago

@Entretoize I don't have any mobile apps, I only use jitsi in my ReactJs project in desktop and mobile browser, on desktop everything is working perfectly, but in a mobile browser, there are problems 1. You need to use native jitsi app 2. configOverwrite: { disableDeepLinking: true } when I use this I can't turn on the audio, for simplicity I was trying to the code from doc in the pure .HTML file.

In my pure .HTML I use this code

<head>
  <meta charset="utf-8">
  <meta http-equiv="content-type" content="text/html;charset=utf-8">
</head>

<body>

 <script src="https://meet.jit.si/external_api.js"></script>

  <script>
    var domain = "meet.jit.si";
    var options = {
      roomName: "JitsiMeetAPIExample1221121212",
      width: 700,
      height: 500,
      parentNode: undefined,
      configOverwrite: {
        disableDeepLinking: true
      }
    }
    var api = new JitsiMeetExternalAPI(domain, options);
  </script>
</body>

</html>
alariej commented 4 years ago

@Entretoize I tried the Jisti Meet API HTML code in a static web page, which I call in the Android Webview using the URL parameter. This works perfectly well and I now have access to video and sound in the Webview, with no failed access error. I am not quite sure anymore why calling the same HTML directly in the Webview doesn't work. Is it a CORS issue, a security feature in Webview, a bug?

I also tested my web page on Chrome and Firefox on Android and it works well. The UI design of Jitsi Meet is not yet well adapted for mobile devices, but I think this will get better eventually.

Unfortunately, things don't look as good on iOS. Chrome doesn't even have access to camera or microphone permissions at all. With Safari, I can access the microphone, but the video only shows a static image. I haven't tried yet the Webview on iOS, but it doesn't look like it supports WebRTC yet.

SumitBando commented 4 years ago

On my MacBook, an html page with the simplest embed works in Chrome. Unfortunately, if I turn on the developer tool set to emulate a phone, it fails to work, with this uninformative screen.

Screen Shot 2020-04-21 at 8 39 08 PM

This "feature" was an enormous waste of time for me, and likely others. If this is by choice, it should at least be documented.

The workaround mentioned about by @saghul got me to a conference on mobile web, but as mentioned by @dmelechow, it disabled the camera / microphone.

iresharma commented 4 years ago

Try this:

configOverwrite: {
    disableDeepLinking: true
},

Note that this won't work on iOS because we need to make some Safari fixes and last I checked web viewss don't have WebRTC support.

This worked perfectly On an iPhone too

I mean I'm not really sure I used a simulator so I check back on iPhone and reply tomorrow

saghul commented 4 years ago

The option should now work fine.

In fact, we have landed open in browser support in master now.

Closing.

tdrp commented 4 years ago

@iresharma @alariej - were you able to get this to work on a real iPhone? I am running into the same problem as other users where it is not letting me enable the camera or microphone. Works fine on Android though, but not on iOS.

iresharma commented 4 years ago

@iresharma @alariej - were you able to get this to work on a real iPhone? I am running into the same problem as other users where it is not letting me enable the camera or microphone. Works fine on Android though, but not on iOS.

In my case sometimes it worked sometimes it didn't, I still wrapping my head around how to fix it

The worst part is some guy closed this issue stating it's fixed so I pushed to deployment and now my client is complaining again and again.

ShubhGar commented 4 years ago

Hi, I try https://jitsinew.tinda.app/test with wkwebview ios but it unable to access camera and Microphone

shijilspark commented 4 years ago

Has anyone has the issue of turning off/on camera in mobile browser after enabling disableDeepLinking: true ?

I can mute/unmute mike though.

Any help would be appreciated.

PRAVEENKUMARRAJENDRAN commented 4 years ago

I'm also facing same issue

amirkhattak commented 4 years ago

hi there i am i am facing issue on mobile i am using external jitisi site api using iframe in a box for my site but on mobile device its says download app wevview is not working any 1 can help me p ![Uploading 79883823-fc465680-8411-11ea-98f3-05d8b816164d.png…]() ls?

marcelomf commented 3 years ago

for external api, try:

      let domain = "meet.jit.si";
      let options = {
          roomName: 'test123',
          width: '100%',
          height: '100%',
          userInfo: {
            // email: 'email@jitsiexamplemail.com',
            displayName: 'test321'
          },
          configOverwrite: {
            requireDisplayName: false,
            prejoinPageEnabled: false,
            disableDeepLinking: true,
          },
          interfaceConfigOverwrite: {
            MOBILE_APP_PROMO: false,
          },
          // parentNode: meetElement
      }
      let api = await new JitsiMeetExternalAPI(domain, options)
amirkhattak commented 3 years ago

thank you

paudeldileep commented 2 years ago

unable to join the meeting from react-native-webview . What might be the problem. image

saghul commented 2 years ago

Not sure what the question is. What problem are you facing?

paudeldileep commented 2 years ago

Not sure what the question is. What problem are you facing?

I solved the issue but is there way for going back to previous screen on react native after call ends

paudeldileep commented 2 years ago

I have a web view screen for conference and I want each user to be redirected back to previous page when meeting ends

paudeldileep commented 2 years ago

image

saghul commented 2 years ago

You'd need to detect the URL changes I think.