Jitsi Video Conference

:discourse2: Summary Jitsi Video Conference allows embedding Jitsi video conference calls into Discourse posts.
:hammer_and_wrench: Repository Link https://github.com/discourse/discourse-jitsi
:open_book: New to Discourse Themes? Beginnerā€™s guide to using Discourse Themes

Install this theme component

Features

  • admins can use their own Jitsi server instance
  • adds a composer toolbar icon (can be limited to staff only in componentā€™s settings)
  • displays a button with a configurable icon and label in posts


Settings

Name Description
show in options dropdown When unchecked, icon is shown in composer toolbar.
only available to staff
meet jitsi domain Domain only (no protocol, no trailing slash).
jitsi script src URL of external API javascript file. If you change this, you will also need to add the URL to the ā€˜content security script srcā€™ site setting.
button icon Enter the name of the FontAwesome 5 icon to display in the Jitsi button.
chat button Integrate with Discourse Chat
hide iframe buttons Hide the choice for iframe settings from users, the default settings below will be used
default mobile iframe Enable iframe mode by default for mobile
default desktop iframe Enable iframe mode by default for desktop
chat button position Position of the button within the chat window
svg icons If using a custom icon, add it to this field too (in addition to ā€˜button_iconā€™ above
Translation Default
composer_title Discourse Jitsi
room_label Jitsi room ID
button_text_label Button label
launch_jitsi Start Video Conference
modal.room_field_description Enter an ID for your room (or leave empty to use a randomly generated ID).
modal.insert Insert
modal.cancel Cancel
modal.title Add Jitsi Integration
modal.mobile_iframe Show in an iframe on mobile devices
modal.desktop_iframe Show in an iframe on desktop devices

:discourse2: Hosted by us? Theme components are available to use on our Standard, Business, and Enterprise plans.

Last edited by @JammyDodger 2024-06-13T09:33:02Z

Check documentPerform check on document:
43 Likes

Hi, thank you for this post and plugin. Iā€™ve removed some of my posts from the other thread to limit confusion. Iā€™ve installed and been testing the component.

I do not see a Discourse Preview when drafting a video conference into a new post.
Do you see a preview?

2 Likes

Awesome! @downey could we try this using your jitsi server? I dont have one now but might like to set one up.

I was just struggling with a family call using gotomeeting and would be interested in trying something mew that is simply embedded in a discourse topic. All the better if its with jitsi!

1 Like

Is there a concern over using the server jitsi is providing for free?

1 Like

Is there a concern over using the server jitsi is providing for free?

Weā€™ve been testing it and it works fine for ~10 people. Performance becomes unusable at 20+ so youā€™d want to run your own instance for larger groups calls + Slack and Etherpad integration.

4 Likes

That reminds me, the reason our Jitsi testing has stopped is because Jitsi prompts mobile users to install an app, at least on iOS. Weā€™re looking at BigBlueButton again which works through the browser on mobile and desktop.

Wondering if @pmusaraj would be interested in checking out their API to see how much if any of the work done on this component could work over there tooā€¦

6 Likes

Does it help that your users can also phone in? fwiw the iOS app is excellent, plus it is fully open source and just easy to use afaik. Iā€™ve noticed the app is basic a replica of the Zoom app for iOS and Android, which almost everyone I know uses.

2 Likes

I mean, if I have the choice of conferencing that works natively, versus one that requires an app, I will probably pass on installing the additional app.

3 Likes

Itā€™s kinda (not totally) like asking everyone who wants to have any given conversation using Discourse as a platform to use meta. :slight_smile:

Yeah this is true, and I havenā€™t thought through ramifications of using a mobile interface embedded in Discourse like this.

Have been hearing good things about BBB as well, especially for more ā€œwebinar styleā€ events. An integration for it would be good too :slight_smile:

AFAIK, itā€™s the other way around, Zoom copied a lot of the UI/UX for Jitsi and other web conferencing tools over the years.

6 Likes

FWIW, Iā€™m getting an error when configuring the theme component to use my own installed Jitsi instance. The normal room URL syntax works fine, but some reason getting a 404 when attempting to use the button. Unfortunately I wonā€™t have time this week to troubleshootā€¦

3 Likes

@pmusaraj, thanks for the component!

Anyway to add a randomized word generator for room creation? Or maybe a timestamp/epoch? I hit a mental wall each time I create a room in Discourse. :slight_smile:

3 Likes

ā€œGood artists copy, great artists stealā€ ā€“ at the start of the day, the current product is what the user sees, not the history.

How much does the performance of Jitsi improve with your own instance? I thought that it is peer-peer once the call has been made.

We need a solution that can cope with large groups, and as it is (using meet.jit.si) Iā€™m finding it too poor for one:one calls often.

Jitsi is only peer to peer in 1:1 settings. Any larger groups route through the server.

Even dedicated self hosted instances weā€™ve experimented with tap out fairly quickly.

1 Like

Maybe they should offer a sold hosting option for money in addition to the self-hosting optionā€¦ could help them identify problems in the software at scale :thinking:

3 Likes

I think the main problem is that for deployments of any scale jitsi-videobridge really needs a dedicated host, with the jitsi-meet component installed separately. The former is the streaming server, while meet only provides the front end.

Unfortunately the install route most people go for is the semi-automated single-host deployment. Their quick install all lives within docker and is very straightforward.

The detailed manual install which lets you deploy the components separately is going to put off any newcomers quite quickly.

8 Likes

Iā€™m not able to get this to work, even with the default meet.jit.si server. Whatever I put in for the meeting id, I just get a grey box instead of the video meeting.

1 Like

Anything in the console?

Hi Tobias, it works here (with chrome and firefox), 2.5.0 beta2, few plugins, fresh Jitsi server from +/- 48h ago ā€¦ :face_with_raised_eyebrow:

Iā€™m currently trying to implement jwt, but by might be in over my head :exploding_head:, and I was also wondering if it wouldnā€™t be better to import external_api.js from settings.meet_jitsi_domain rather than https://meet.jit.si ?
there : https://github.com/pmusaraj/discourse-jitsi/blob/master/javascripts/discourse/initializers/insert-jitsi.js.es6

2 Likes

Hmmā€¦ lots of errors in the console. This happens on my personal instance and on a new hosted trial site just created. Iā€™m using the default meet.jit.si server, have made no changes to the theme component settings.

I donā€™t have my own jitsi server (yet) and thought it would work out of the boxā€¦

click to see
Logger.js:154 2020-04-11T19:21:21.250Z [modules/util/JitsiLocalStorage.js] <new <anonymous>>:  DOMException: Failed to read the 'localStorage' property from 'Window': Access is denied for this document.
    at new <anonymous> (https://web-cdn.jitsi.net/meetjitsi_4004.656/libs/app.bundle.min.js?v=3962.622:29:197547)
    at Object.<anonymous> (https://web-cdn.jitsi.net/meetjitsi_4004.656/libs/app.bundle.min.js?v=3962.622:29:197486)
    at Object.<anonymous> (https://web-cdn.jitsi.net/meetjitsi_4004.656/libs/app.bundle.min.js?v=3962.622:29:197742)
    at n (https://web-cdn.jitsi.net/meetjitsi_4004.656/libs/app.bundle.min.js?v=3962.622:1:110)
    at Object.<anonymous> (https://web-cdn.jitsi.net/meetjitsi_4004.656/libs/app.bundle.min.js?v=3962.622:54:98101)
    at n (https://web-cdn.jitsi.net/meetjitsi_4004.656/libs/app.bundle.min.js?v=3962.622:1:110)
    at Object.<anonymous> (https://web-cdn.jitsi.net/meetjitsi_4004.656/libs/app.bundle.min.js?v=3962.622:24:101984)
    at n (https://web-cdn.jitsi.net/meetjitsi_4004.656/libs/app.bundle.min.js?v=3962.622:1:110)
    at Object.<anonymous> (https://web-cdn.jitsi.net/meetjitsi_4004.656/libs/app.bundle.min.js?v=3962.622:29:222225)
    at n (https://web-cdn.jitsi.net/meetjitsi_4004.656/libs/app.bundle.min.js?v=3962.622:1:110)
    at Object.<anonymous> (https://web-cdn.jitsi.net/meetjitsi_4004.656/libs/app.bundle.min.js?v=3962.622:24:213733)
    at n (https://web-cdn.jitsi.net/meetjitsi_4004.656/libs/app.bundle.min.js?v=3962.622:1:110)
    at Object.<anonymous> (https://web-cdn.jitsi.net/meetjitsi_4004.656/libs/app.bundle.min.js?v=3962.622:29:196138)
    at n (https://web-cdn.jitsi.net/meetjitsi_4004.656/libs/app.bundle.min.js?v=3962.622:1:110)
    at Object.<anonymous> (https://web-cdn.jitsi.net/meetjitsi_4004.656/libs/app.bundle.min.js?v=3962.622:24:154819)
    at n (https://web-cdn.jitsi.net/meetjitsi_4004.656/libs/app.bundle.min.js?v=3962.622:1:110)
    at Object.<anonymous> (https://web-cdn.jitsi.net/meetjitsi_4004.656/libs/app.bundle.min.js?v=3962.622:63:41390)
    at n (https://web-cdn.jitsi.net/meetjitsi_4004.656/libs/app.bundle.min.js?v=3962.622:1:110)
    at Object.<anonymous> (https://web-cdn.jitsi.net/meetjitsi_4004.656/libs/app.bundle.min.js?v=3962.622:54:53082)
    at Object.<anonymous> (https://web-cdn.jitsi.net/meetjitsi_4004.656/libs/app.bundle.min.js?v=3962.622:54:55490)
    at n (https://web-cdn.jitsi.net/meetjitsi_4004.656/libs/app.bundle.min.js?v=3962.622:1:110)
    at Object.<anonymous> (https://web-cdn.jitsi.net/meetjitsi_4004.656/libs/app.bundle.min.js?v=3962.622:54:165081)
    at Object.<anonymous> (https://web-cdn.jitsi.net/meetjitsi_4004.656/libs/app.bundle.min.js?v=3962.622:54:166745)
    at n (https://web-cdn.jitsi.net/meetjitsi_4004.656/libs/app.bundle.min.js?v=3962.622:1:110)
    at Object.<anonymous> (https://web-cdn.jitsi.net/meetjitsi_4004.656/libs/app.bundle.min.js?v=3962.622:126:292708)
    at Object.<anonymous> (https://web-cdn.jitsi.net/meetjitsi_4004.656/libs/app.bundle.min.js?v=3962.622:126:323867)
    at n (https://web-cdn.jitsi.net/meetjitsi_4004.656/libs/app.bundle.min.js?v=3962.622:1:110)
    at Module.<anonymous> (https://web-cdn.jitsi.net/meetjitsi_4004.656/libs/app.bundle.min.js?v=3962.622:222:80217)
    at n (https://web-cdn.jitsi.net/meetjitsi_4004.656/libs/app.bundle.min.js?v=3962.622:1:110)
    at https://web-cdn.jitsi.net/meetjitsi_4004.656/libs/app.bundle.min.js?v=3962.622:1:908
    at https://web-cdn.jitsi.net/meetjitsi_4004.656/libs/app.bundle.min.js?v=3962.622:1:919
o @ Logger.js:154
(anonymous) @ JitsiLocalStorage.js:42
(anonymous) @ JitsiLocalStorage.js:77
(anonymous) @ app.bundle.min.js?v=3962.622:29
n @ bootstrap:19
(anonymous) @ app.bundle.min.js?v=3962.622:54
n @ bootstrap:19
(anonymous) @ app.bundle.min.js?v=3962.622:24
n @ bootstrap:19
(anonymous) @ app.bundle.min.js?v=3962.622:29
n @ bootstrap:19
(anonymous) @ app.bundle.min.js?v=3962.622:24
n @ bootstrap:19
(anonymous) @ app.bundle.min.js?v=3962.622:29
n @ bootstrap:19
(anonymous) @ app.bundle.min.js?v=3962.622:24
n @ bootstrap:19
(anonymous) @ app.bundle.min.js?v=3962.622:63
n @ bootstrap:19
(anonymous) @ AuthHandler.js:1
(anonymous) @ app.bundle.min.js?v=3962.622:54
n @ bootstrap:19
(anonymous) @ connection.js:1
(anonymous) @ app.bundle.min.js?v=3962.622:54
n @ bootstrap:19
(anonymous) @ conference.js:1
(anonymous) @ app.bundle.min.js?v=3962.622:126
n @ bootstrap:19
(anonymous) @ app.bundle.min.js?v=3962.622:222
n @ bootstrap:19
(anonymous) @ bootstrap:83
(anonymous) @ app.bundle.min.js?v=3962.622:1
Show 2 more frames
Logger.js:154 2020-04-11T19:21:21.252Z [features/local-recording] <Object._loadMetadata>:  Failed to parse localStorage item.
o @ Logger.js:154
_loadMetadata @ SessionManager.js:170
(anonymous) @ SessionManager.js:152
(anonymous) @ SessionManager.js:435
n @ bootstrap:19
(anonymous) @ app.bundle.min.js?v=3962.622:24
n @ bootstrap:19
(anonymous) @ app.bundle.min.js?v=3962.622:29
n @ bootstrap:19
(anonymous) @ app.bundle.min.js?v=3962.622:24
n @ bootstrap:19
(anonymous) @ app.bundle.min.js?v=3962.622:29
n @ bootstrap:19
(anonymous) @ app.bundle.min.js?v=3962.622:24
n @ bootstrap:19
(anonymous) @ app.bundle.min.js?v=3962.622:63
n @ bootstrap:19
(anonymous) @ AuthHandler.js:1
(anonymous) @ app.bundle.min.js?v=3962.622:54
n @ bootstrap:19
(anonymous) @ connection.js:1
(anonymous) @ app.bundle.min.js?v=3962.622:54
n @ bootstrap:19
(anonymous) @ conference.js:1
(anonymous) @ app.bundle.min.js?v=3962.622:126
n @ bootstrap:19
(anonymous) @ app.bundle.min.js?v=3962.622:222
n @ bootstrap:19
(anonymous) @ bootstrap:83
(anonymous) @ app.bundle.min.js?v=3962.622:1
Logger.js:154 2020-04-11T19:21:21.309Z [index.web] <HTMLDocument.<anonymous>>:  (TIME) document ready:	 432.6749999891035
react-dom.production.min.js:187 DOMException: Failed to read the 'localStorage' property from 'Window': Access is denied for this document.
    at Oe._initStorage (https://web-cdn.jitsi.net/meetjitsi_4004.656/libs/app.bundle.min.js?v=3962.622:16:45149)
    at Oe.componentDidMount (https://web-cdn.jitsi.net/meetjitsi_4004.656/libs/app.bundle.min.js?v=3962.622:16:44779)
    at Oe.componentDidMount (https://web-cdn.jitsi.net/meetjitsi_4004.656/libs/app.bundle.min.js?v=3962.622:24:223947)
    at Gs (https://web-cdn.jitsi.net/meetjitsi_4004.656/libs/app.bundle.min.js?v=3962.622:184:94889)
    at t.unstable_runWithPriority (https://web-cdn.jitsi.net/meetjitsi_4004.656/libs/app.bundle.min.js?v=3962.622:192:3884)
    at fi (https://web-cdn.jitsi.net/meetjitsi_4004.656/libs/app.bundle.min.js?v=3962.622:184:41540)
    at Ws (https://web-cdn.jitsi.net/meetjitsi_4004.656/libs/app.bundle.min.js?v=3962.622:184:90890)
    at Ps (https://web-cdn.jitsi.net/meetjitsi_4004.656/libs/app.bundle.min.js?v=3962.622:184:78509)
    at fc (https://web-cdn.jitsi.net/meetjitsi_4004.656/libs/app.bundle.min.js?v=3962.622:184:105337)
    at hc (https://web-cdn.jitsi.net/meetjitsi_4004.656/libs/app.bundle.min.js?v=3962.622:184:105412)
    at https://web-cdn.jitsi.net/meetjitsi_4004.656/libs/app.bundle.min.js?v=3962.622:184:106607
    at Bs (https://web-cdn.jitsi.net/meetjitsi_4004.656/libs/app.bundle.min.js?v=3962.622:184:80044)
    at _c (https://web-cdn.jitsi.net/meetjitsi_4004.656/libs/app.bundle.min.js?v=3962.622:184:106592)
    at Object.render (https://web-cdn.jitsi.net/meetjitsi_4004.656/libs/app.bundle.min.js?v=3962.622:184:109864)
    at HTMLDocument.<anonymous> (https://web-cdn.jitsi.net/meetjitsi_4004.656/libs/app.bundle.min.js?v=3962.622:222:80940)
La @ react-dom.production.min.js:187
Ga.n.callback @ react-dom.production.min.js:200
Hi @ react-dom.production.min.js:125
Bi @ react-dom.production.min.js:125
Gs @ react-dom.production.min.js:239
t.unstable_runWithPriority @ scheduler.production.min.js:20
fi @ react-dom.production.min.js:113
Ws @ react-dom.production.min.js:230
Ls @ react-dom.production.min.js:206
(anonymous) @ react-dom.production.min.js:114
t.unstable_runWithPriority @ scheduler.production.min.js:20
fi @ react-dom.production.min.js:113
gi @ react-dom.production.min.js:114
mi @ react-dom.production.min.js:113
Bs @ react-dom.production.min.js:208
_c @ react-dom.production.min.js:272
render @ react-dom.production.min.js:273
(anonymous) @ index.web.js:25
react-dom.production.min.js:114 Uncaught DOMException: Failed to read the 'localStorage' property from 'Window': Access is denied for this document.
    at Oe._initStorage (https://web-cdn.jitsi.net/meetjitsi_4004.656/libs/app.bundle.min.js?v=3962.622:16:45149)
    at Oe.componentDidMount (https://web-cdn.jitsi.net/meetjitsi_4004.656/libs/app.bundle.min.js?v=3962.622:16:44779)
    at Oe.componentDidMount (https://web-cdn.jitsi.net/meetjitsi_4004.656/libs/app.bundle.min.js?v=3962.622:24:223947)
    at Gs (https://web-cdn.jitsi.net/meetjitsi_4004.656/libs/app.bundle.min.js?v=3962.622:184:94889)
    at t.unstable_runWithPriority (https://web-cdn.jitsi.net/meetjitsi_4004.656/libs/app.bundle.min.js?v=3962.622:192:3884)
    at fi (https://web-cdn.jitsi.net/meetjitsi_4004.656/libs/app.bundle.min.js?v=3962.622:184:41540)
    at Ws (https://web-cdn.jitsi.net/meetjitsi_4004.656/libs/app.bundle.min.js?v=3962.622:184:90890)
    at Ps (https://web-cdn.jitsi.net/meetjitsi_4004.656/libs/app.bundle.min.js?v=3962.622:184:78509)
    at fc (https://web-cdn.jitsi.net/meetjitsi_4004.656/libs/app.bundle.min.js?v=3962.622:184:105337)
    at hc (https://web-cdn.jitsi.net/meetjitsi_4004.656/libs/app.bundle.min.js?v=3962.622:184:105412)
    at https://web-cdn.jitsi.net/meetjitsi_4004.656/libs/app.bundle.min.js?v=3962.622:184:106607
    at Bs (https://web-cdn.jitsi.net/meetjitsi_4004.656/libs/app.bundle.min.js?v=3962.622:184:80044)
    at _c (https://web-cdn.jitsi.net/meetjitsi_4004.656/libs/app.bundle.min.js?v=3962.622:184:106592)
    at Object.render (https://web-cdn.jitsi.net/meetjitsi_4004.656/libs/app.bundle.min.js?v=3962.622:184:109864)
    at HTMLDocument.<anonymous> (https://web-cdn.jitsi.net/meetjitsi_4004.656/libs/app.bundle.min.js?v=3962.622:222:80940)
gi @ react-dom.production.min.js:114
mi @ react-dom.production.min.js:113
Bs @ react-dom.production.min.js:208
_c @ react-dom.production.min.js:272
render @ react-dom.production.min.js:273
(anonymous) @ index.web.js:25
react-dom.production.min.js:187 TypeError: Cannot read property 'dispatch' of undefined
    at Oe.componentWillUnmount (BaseApp.js:100)
    at react-dom.production.min.js:187
    at Ra (react-dom.production.min.js:189)
    at Ua (react-dom.production.min.js:195)
    at Gs (react-dom.production.min.js:235)
    at t.unstable_runWithPriority (scheduler.production.min.js:20)
    at fi (react-dom.production.min.js:113)
    at Ws (react-dom.production.min.js:230)
    at Ls (react-dom.production.min.js:206)
    at react-dom.production.min.js:114
    at t.unstable_runWithPriority (scheduler.production.min.js:20)
    at fi (react-dom.production.min.js:113)
    at gi (react-dom.production.min.js:114)
    at mi (react-dom.production.min.js:113)
    at Bs (react-dom.production.min.js:208)
    at _c (react-dom.production.min.js:272)
    at Object.render (react-dom.production.min.js:273)
    at HTMLDocument.<anonymous> (index.web.js:25)
La @ react-dom.production.min.js:187
Ga.n.callback @ react-dom.production.min.js:200
Hi @ react-dom.production.min.js:125
Bi @ react-dom.production.min.js:125
Gs @ react-dom.production.min.js:239
t.unstable_runWithPriority @ scheduler.production.min.js:20
fi @ react-dom.production.min.js:113
Ws @ react-dom.production.min.js:230
Ls @ react-dom.production.min.js:206
(anonymous) @ react-dom.production.min.js:114
t.unstable_runWithPriority @ scheduler.production.min.js:20
fi @ react-dom.production.min.js:113
gi @ react-dom.production.min.js:114
mi @ react-dom.production.min.js:113
I @ scheduler.production.min.js:16
H @ scheduler.production.min.js:18
C @ scheduler.production.min.js:13
BaseApp.js:100 Uncaught TypeError: Cannot read property 'dispatch' of undefined
    at Oe.componentWillUnmount (BaseApp.js:100)
    at react-dom.production.min.js:187
    at Ra (react-dom.production.min.js:189)
    at Ua (react-dom.production.min.js:195)
    at Gs (react-dom.production.min.js:235)
    at t.unstable_runWithPriority (scheduler.production.min.js:20)
    at fi (react-dom.production.min.js:113)
    at Ws (react-dom.production.min.js:230)
    at Ls (react-dom.production.min.js:206)
    at react-dom.production.min.js:114
    at t.unstable_runWithPriority (scheduler.production.min.js:20)
    at fi (react-dom.production.min.js:113)
    at gi (react-dom.production.min.js:114)
    at mi (react-dom.production.min.js:113)
    at Bs (react-dom.production.min.js:208)
    at _c (react-dom.production.min.js:272)
    at Object.render (react-dom.production.min.js:273)
    at HTMLDocument.<anonymous> (index.web.js:25)
1 Like