saibotma / jitsi_meet_wrapper

Jitsi Meet Plugin for Flutter. Wrapping JitsiMeetSDK for Android and iOS.
BSD 3-Clause "New" or "Revised" License
27 stars 61 forks source link

Bring back web support #11

Open jaumard opened 2 years ago

jaumard commented 2 years ago

Would be nice and shouldn't be too hard based on jitsi_meet works, I'll try to make a PR if I find time if you're open for it

jagadish-pattanaik commented 2 years ago

If you can bring web support then most of the people could leave the Jitsi_Meet plugin and use yours. Btw is there any conflict arising if boh plugins are used together? Is not any way to use this plugin for android and Jitsi_meet for the web?

saibotma commented 2 years ago

Yeah, that is probably true, however it requires a significant amount of time to implement web support correctly I assume. I am open for PRs for this one.

Never tried running both at the same time. Just try it out and post it here.

garv-shah commented 2 years ago

Running both doesn't really work, since iOS gets a bit upset that the SDK versions are different. It may be possible to just remove the android and iOS specific code, and have an older sdk version for the web if updating the sdk is too hard

[!] CocoaPods could not find compatible versions for pod "JitsiMeetSDK":
  In snapshot (Podfile.lock):
    JitsiMeetSDK (= 4.0.0)

  In Podfile:
    jitsi_meet (from `.symlinks/plugins/jitsi_meet/ios`) was resolved to 0.0.1, which depends on
      JitsiMeetSDK (= 3.3.0)

    jitsi_meet_wrapper (from `.symlinks/plugins/jitsi_meet_wrapper/ios`) was resolved to 0.0.1, which depends on
      JitsiMeetSDK (= 4.0.0)

You have either:
 * out-of-date source repos which you can update with `pod repo update` or with `pod install --repo-update`.
 * changed the constraints of dependency `JitsiMeetSDK` inside your development pod `jitsi_meet_wrapper`.
   You should run `pod update JitsiMeetSDK` to apply changes you've made.
jagadish-pattanaik commented 2 years ago

The problem is in only iOS, right?

garv-shah commented 2 years ago

yeah, running both seems to work fine if you only want android and the web. either way, it's not ideal since the jitsi_meet package uses iframes for the web, which can be a bit annoying in some cases if you just want the iframes, you can integrate them using the build in iFrameElement class, which achieves the same thing as the initial plugin

saibotma commented 2 years ago

Unfortunately, I do not plan to add web support by myself. However, I am very happy to accept PRs.

jagadish-pattanaik commented 2 years ago

@saibotma Can your package and original jitsi-meet package be used together or will it cause conflict? If it can be used together then we can use yours for android and iOS and the original one for the web.

saibotma commented 2 years ago

According to @garv-shah it will cause a conflict on iOS.

jagadish-pattanaik commented 2 years ago

According to @garv-shah it will cause a conflict on iOS.

I only need for android and web, I am gonna try, I will make separate files for web and android, and import the old package in web files and your package in android files. Hope it works, if anyone has tried this before or @garv-shah you can share what happened. Btw @saibotma there have to be made a lot of changes in code to migrate from the old package to yours.

garv-shah commented 2 years ago

yeah, it worked for me when i was just targeting android and web, i just made seperate functions for both. for me, the solution i ended up going with was actually to just not use the old package, and just use url_launcher to open it in a new tab.
Initially, this wasn't ideal, since this didn't have the customisation I wanted, but I just ended up self-hosting jitsi to get it working how I intended it to

jagadish-pattanaik commented 2 years ago

@garv-shah Then I hope mine also works, still it isn't the most efficient way, we need to have an official type repository that is always maintained and supports all platforms.

garv-shah commented 2 years ago

here's the function I used to add web support:

connect() async {
  JitsiMeetingOptions options = JitsiMeetingOptions(room: details.room)
    ..userEmail = details.emailID
    ..userDisplayName = details.displayName
    ..featureFlags.addAll(feature)
    ..subject = details.subject
    ..userAvatarURL = details.avatarUrl
    ..webOptions = {
      "interfaceConfigOverwrite": { "SHOW_CHROME_EXTENSION_BANNER": false },
      "roomName": details.subject,
      "width": "100%",
      "height": "100%",
      "enableWelcomePage": false,
      "chromeExtensionBanner": null,
      "configOverwrite":
      {
        "chromeExtensionBanner": null,
        "disableInviteFunctions": true,
        "prejoinPageEnabled": false,
      },
      "userInfo": {"displayName": details.displayName}
    };
  await JitsiMeet.joinMeeting(options);
}

This opens up the meeting in an iFrame you have to specify separately, using the JitsiMeetConferencing widget, which needs to be on screen when you call the function

jagadish-pattanaik commented 2 years ago

here's the function I used to add web support:

connect() async {
  JitsiMeetingOptions options = JitsiMeetingOptions(room: details.room)
    ..userEmail = details.emailID
    ..userDisplayName = details.displayName
    ..featureFlags.addAll(feature)
    ..subject = details.subject
    ..userAvatarURL = details.avatarUrl
    ..webOptions = {
      "interfaceConfigOverwrite": { "SHOW_CHROME_EXTENSION_BANNER": false },
      "roomName": details.subject,
      "width": "100%",
      "height": "100%",
      "enableWelcomePage": false,
      "chromeExtensionBanner": null,
      "configOverwrite":
      {
        "chromeExtensionBanner": null,
        "disableInviteFunctions": true,
        "prejoinPageEnabled": false,
      },
      "userInfo": {"displayName": details.displayName}
    };
  await JitsiMeet.joinMeeting(options);
}

This opens up the meeting in an iFrame you have to specify separately, using the JitsiMeetConferencing widget, which needs to be on screen when you call the function

I have also done the same, still thank you so much as I didn't know it could be customized so much more, btw its available in the old package.

saibotma commented 2 years ago

yeah, it worked for me when i was just targeting android and web, i just made seperate functions for both. for me, the solution i ended up going with was actually to just not use the old package, and just use url_launcher to open it in a new tab.
Initially, this wasn't ideal, since this didn't have the customisation I wanted, but I just ended up self-hosting jitsi to get it working how I intended it to

You can add most of the customizations using query parameters. Did this not work for you?

garv-shah commented 2 years ago

for me it was mostly the jitsi logo being very visible on the web, and according to the forums the only way to remove it was self hosting. other customisation parameters worked perfectly :)

jagadish-pattanaik commented 2 years ago

for me it was mostly the Jitsi logo being very visible on the web, and according to the forums the only way to remove it was self-hosting. other customization parameters worked perfectly :)

For me also, and till now the logo is there, @garv-shah can you join my discord community, my discord ID: War_Captain # 0168, I wanna have some talk with you about self-hosted servers for Jitsi.

garv-shah commented 2 years ago

okay, sure!

jagadish-pattanaik commented 2 years ago

Got this error when trying to debug run on a physical device.

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:checkDebugAarMetadata'.
> Could not resolve all files for configuration ':app:debugRuntimeClasspath'.
   > Could not resolve org.jitsi.react:jitsi-meet-sdk:4.0.0.
     Required by:
         project :app > project :jitsi_meet
      > Could not resolve org.jitsi.react:jitsi-meet-sdk:4.0.0.
         > Could not get resource 'https://jcenter.bintray.com/org/jitsi/react/jitsi-meet-sdk/4.0.0/jitsi-meet-sdk-4.0.0.pom'.
            > Could not GET 'https://jcenter.bintray.com/org/jitsi/react/jitsi-meet-sdk/4.0.0/jitsi-meet-sdk-4.0.0.pom'. Received status code 502 from server: Bad Gateway
   > Could not resolve org.jitsi.react:jitsi-meet-sdk:4.0.0.
     Required by:
         project :app > project :jitsi_meet_wrapper
      > Could not resolve org.jitsi.react:jitsi-meet-sdk:4.0.0.
         > Could not get resource 'https://jcenter.bintray.com/org/jitsi/react/jitsi-meet-sdk/4.0.0/jitsi-meet-sdk-4.0.0.pom'.
            > Could not GET 'https://jcenter.bintray.com/org/jitsi/react/jitsi-meet-sdk/4.0.0/jitsi-meet-sdk-4.0.0.pom'. Received status code 502 from server: Bad Gateway

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 1m 30s
Running Gradle task 'assembleDebug'...
[!] Gradle threw an error while downloading artifacts from the network. Retrying to download...
Parameter format not correct -

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:checkDebugAarMetadata'.
> Could not resolve all files for configuration ':app:debugRuntimeClasspath'.
   > Could not resolve org.jitsi.react:jitsi-meet-sdk:4.0.0.
     Required by:
         project :app > project :jitsi_meet
      > Could not resolve org.jitsi.react:jitsi-meet-sdk:4.0.0.
         > Could not get resource 'https://jcenter.bintray.com/org/jitsi/react/jitsi-meet-sdk/4.0.0/jitsi-meet-sdk-4.0.0.pom'.
            > Could not GET 'https://jcenter.bintray.com/org/jitsi/react/jitsi-meet-sdk/4.0.0/jitsi-meet-sdk-4.0.0.pom'. Received status code 502 from server: Bad Gateway
   > Could not resolve org.jitsi.react:jitsi-meet-sdk:4.0.0.
     Required by:
         project :app > project :jitsi_meet_wrapper
      > Could not resolve org.jitsi.react:jitsi-meet-sdk:4.0.0.
         > Could not get resource 'https://jcenter.bintray.com/org/jitsi/react/jitsi-meet-sdk/4.0.0/jitsi-meet-sdk-4.0.0.pom'.
            > Could not GET 'https://jcenter.bintray.com/org/jitsi/react/jitsi-meet-sdk/4.0.0/jitsi-meet-sdk-4.0.0.pom'. Received status code 502 from server: Bad Gateway

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 26s
[!] Gradle threw an error while downloading artifacts from the network. Retrying to download...
Exception: Gradle task assembleDebug failed with exit code 1
garv-shah commented 2 years ago

that seems to be a jcenter problem, not anything with the package. jcenter went down a couple days ago, it was a global outage, and that's the error that people got. try cleaning out your project and try again, since it's back online now

Joseph-Nathan commented 2 years ago

@garv-shah i command flutter clean and nothing happened , and also i got Could not determine java version from '11.0.10'. when i change pack. version .

garv-shah commented 2 years ago

sorry, not sure, it worked for me. seems to be a version mismatch or something of the likes, either way, doesn't seem to be related to the wrapper from this repository

jagadish-pattanaik commented 2 years ago

here's the function I used to add web support:

connect() async {
  JitsiMeetingOptions options = JitsiMeetingOptions(room: details.room)
    ..userEmail = details.emailID
    ..userDisplayName = details.displayName
    ..featureFlags.addAll(feature)
    ..subject = details.subject
    ..userAvatarURL = details.avatarUrl
    ..webOptions = {
      "interfaceConfigOverwrite": { "SHOW_CHROME_EXTENSION_BANNER": false },
      "roomName": details.subject,
      "width": "100%",
      "height": "100%",
      "enableWelcomePage": false,
      "chromeExtensionBanner": null,
      "configOverwrite":
      {
        "chromeExtensionBanner": null,
        "disableInviteFunctions": true,
        "prejoinPageEnabled": false,
      },
      "userInfo": {"displayName": details.displayName}
    };
  await JitsiMeet.joinMeeting(options);
}

This opens up the meeting in an iFrame you have to specify separately, using the JitsiMeetConferencing widget, which needs to be on screen when you call the function

Are any other configurations available that can be made by adding some more code? and can u share the doc where info about this piece of code is given?

jagadish-pattanaik commented 2 years ago

that seems to be a jcenter problem, not anything with the package. jcenter went down a couple days ago, it was a global outage, and that's the error that people got. try cleaning out your project and try again, since it's back online now

The same error didn't show up today but got another error, probably gradle one. btw @garv-shah , you left the server in between the unfinished talks, and my access to text you is now no more available till u accept my friend request.

garv-shah commented 2 years ago

https://jitsi.github.io/handbook/docs/dev-guide/dev-guide-iframe https://github.com/gunschu/jitsi_meet/blob/master/jitsi_meet/example/lib/main.dart

The example over here creates the following website: https://jitsiflutter.web.app/

Velliane commented 1 year ago

Hi ! I see that a PR is opened for the web support. Any news about it ?