I am using the Jitsi Flutter plugin in conjunction with 8x8's Jitsi-as-a-Service offering to integrate video calls into my mobile app.
Immediately after joining a meeting, the call ends and Jitsi closes. The logs indicate that the underlying Jitsi Meet SDK is unable to fetch config.js
from 8x8:
E/JitsiMeetSDK(10937): [features/base/lib-jitsi-meet] Failed to load config from https://8x8.vc/vpaas-magic-cookie-<tenantID>/hello-world/config.js?room=vpaas-magic-cookie-<tenantID>hello-world Error(Error){"message":"loadScript error: undefined","stack":"index.android.bundle:538:817\np@index.android.bundle:284:423\nindex.android.bundle:284:1740\np@index.android.bundle:284:423\nn@index.android.bundle:284:898\nindex.android.bundle:284:1047\nf@index.android.bundle:111:155\nindex.android.bundle:111:882\ny@index.android.bundle:117:661\nC@index.android.bundle:117:1025\ncallImmediates@index.android.bundle:117:3100\ncallImmediates@[native code]\nvalue@index.android.bundle:36:3247\nindex.android.bundle:36:1283\nvalue@index.android.bundle:36:2939\nvalue@index.android.bundle:36:1253\nvalue@[native code]\nvalue@[native code]"}
I/JitsiMeetSDK(10937): [features/overlay] The conference will be reloaded after 19 seconds.
D/JitsiMeetSDK(10937): ExternalAPI Sending event: CONFERENCE_TERMINATED with data: { NativeMap: {"url":"https://8x8.vc/vpaas-magic-cookie-<tenantID>/hello-world/vpaas-magic-cookie-<tenantID>hello-world","error":"Error: loadScript error: undefined"} }
E/ThemeUtils(10937): View class com.facebook.react.views.text.ReactTextView is an AppCompat widget that can only be used with a Theme.AppCompat theme (or descendant).
I/chatty (10937): uid=10179(com.example.app) identical 1 line
E/ThemeUtils(10937): View class com.facebook.react.views.text.ReactTextView is an AppCompat widget that can only be used with a Theme.AppCompat theme (or descendant).
D/JITSI_MEET_PLUGIN(10937): JitsiMeetPluginActivity.onConferenceTerminated: {error=Error: loadScript error: undefined, url=https://8x8.vc/vpaas-magic-cookie-<tenantID>/hello-world/vpaas-magic-cookie-<tenantID>hello-world}
D/JITSI_MEET_PLUGIN(10937): JitsiMeetEventStreamHandler.onConferenceTerminated
I/JitsiMeetSDK(10937): Conference terminated: {error=Error: loadScript error: undefined, event=onConferenceTerminated, url=https://8x8.vc/vpaas-magic-cookie-<tenantID>/hello-world/vpaas-magic-cookie-<tenantID>hello-world}
I/JitsiMeetSDK(10937): [features/base/connection] No connection found while disconnecting.
I followed the official 8x8 JaaS docs on how to configure Jitsi in my app:
_joinMeeting(String token, String userName) async {
FeatureFlag featureFlag = FeatureFlag();
featureFlag.welcomePageEnabled = false;
// ...
featureFlag.resolution = FeatureFlagVideoResolution.HD_RESOLUTION;
var options = JitsiMeetingOptions()
..serverURL = "https://8x8.vc"
..room = "vpaas-magic-cookie-<tenantID>/hello-world"
..subject = "Hello World"
..token = token
..userDisplayName = userName
..audioOnly = false
..audioMuted = true
..videoMuted = true
..featureFlag = featureFlag;
await JitsiMeet.joinMeeting(options, roomNameConstraints: Map());
}
It works flawlessly with the public meet.jit.si
servers but does not with 8x8's JaaS offering. What am I missing?
TL;DR: Set the full URL of your 8x8 meeting as the room name.
If you follow the official 8x8 Jaas docs, you will likely end up with Jitsi Flutter being unable to load config.js
from the 8x8 server.
This forum comment hints that one can join 8x8 meetings via the official Jitsi Meet app from the App Store by using the full 8x8 meeting URL as the room name.
As a matter of fact, this not only works for the official app, but also for the Jitsi Flutter plugin. Using the configuration below you should be able to connect to a meeting room on your 8x8 tenant. Please make sure to disable any room name constraints by passing an empty map to joinMeeting
, otherwise Jitsi Flutter will reject your room name!
_joinMeeting(String token, String userName) async {
FeatureFlag featureFlag = FeatureFlag();
featureFlag.welcomePageEnabled = false;
// ...
featureFlag.resolution = FeatureFlagVideoResolution.HD_RESOLUTION;
var options = JitsiMeetingOptions()
..serverURL = "https://8x8.vc"
..room = "https://8x8.vc/vpaas-magic-cookie-<tenantID>/<roomName>"
..subject = "Hello World"
..token = token
..userDisplayName = userName
..audioOnly = false
..audioMuted = true
..videoMuted = true
..featureFlag = featureFlag;
await JitsiMeet.joinMeeting(options, roomNameConstraints: Map());
}
Hope this saves you some time.