Page 2 of 2
Re: Jitsi in a webgadget
Posted: Mon Nov 10, 2025 8:41 am
by Dirk Geppert
According to AI, Jitsi is based on WebRTC. So there is no solution other than to use a browser switch for mobile devices.
Code: Select all
If OpenWindow(0, 0, 0, 1000, 800, "WebGadget", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
gadget = WebGadget(#PB_Any, 10, 10, 990, 790, "")
! (function () {
! var gad = spider_GadgetID(v_gadget);
! if (!gad) return;
!
! var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
!
! if (isMobile) {
! // Auf dem Handy: lieber direkt im Browser öffnen,
! // nicht im WebGadget/WebView einbetten
! window.location.href =
! "https://meet.jit.si/jitsispidertest0815" +
! "#config.disableDeepLinking=true&config.mobileAppPromo=false";
! return;
! }
!
! var iframe = $(gad.div).find("iframe");
! if (!iframe || !iframe.length) return;
!
! iframe.attr("allow", "camera; microphone; fullscreen; display-capture");
! iframe.attr("allowfullscreen", "true");
! iframe.attr("src",
! "https://meet.jit.si/jitsispidertest0815" +
! "#config.disableDeepLinking=true&config.mobileAppPromo=false"
! );
! })();
EndIf
Re: Jitsi in a webgadget
Posted: Mon Nov 10, 2025 9:06 am
by Dirk Geppert
I just saw that Jitsi offers an iFrame API. That works. You just have to manually edit index.html and move the script to the top.
Code: Select all
<script src="https://meet.jit.si/external_api.js"></script>"
<script type="text/javascript" src="app.js?t=1762765235"></script>
@Fred: Is it possible to control whether the HeaderSction entries are inserted before or after the Spiderapp?
Code: Select all
HeaderSection
<script src="https://meet.jit.si/external_api.js"></script>
EndHeaderSection
If OpenWindow(0, 10, 10, 640, 400, "WebGadget", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
gadget = WebGadget(#PB_Any, 10, 10, 990, 790, "")
! (function () {
! var gad = spider_GadgetID(v_gadget);
! if (!gad) return;
!
! if (typeof JitsiMeetExternalAPI === "undefined") {
! console.error("JitsiMeetExternalAPI noch nicht geladen");
! return;
! }
!
! var domain = "meet.jit.si";
! var options = {
! roomName: "jitsispidertest0815",
! parentNode: gad.div,
! configOverwrite: {
! disableDeepLinking: true
! },
! interfaceConfigOverwrite: {
! MOBILE_APP_PROMO: false
! }
! };
!
! window.jitsiApi = new JitsiMeetExternalAPI(domain, options);
! })();
EndIf
Re: Jitsi in a webgadget
Posted: Mon Nov 10, 2025 4:10 pm
by Stefan
I didn't really understand that.
Am I supposed to write the code in the HeaderSection/EndHeaderSection section AND again in the index file?
The code below doesn't work, by the way.
Re: Jitsi in a webgadget
Posted: Tue Nov 11, 2025 11:15 am
by Dirk Geppert
@Stefan: What do you mean by “the code below doesn't work”?
It won't compile, won't run, doesn't open Jitsi, or doesn't activate the multimedia functions?
Have you edit the index.html?
With the HeaderSection, you can add your own code when creating the index.html.
Unfortunately, it will be added after your own app code. This will not work with jitsi.
Therefore, you must edit the index.html and move the entry:
Code: Select all
<script src="https://meet.jit.si/external_api.js"></script>">
upwards, like in this index.html
Code: Select all
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="user-scalable=no, width=device-width, height=device-height, initial-scale=1, minimum-scale=1, maximum-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script type="text/javascript">var spider = {}; spider.nbModules = 1; spider.nbLoadedModules = 0;</script>
<title>Jitsi Inside iFrame</title>
<script type="text/javascript">function onLoad() { spiderCheckBrowser(); }</script>
<script src="https://meet.jit.si/external_api.js"></script>
<script type="text/javascript" src="libs320/platform.js"></script>
<script type="text/javascript" src="libs320/init.js"></script>
<script type="text/javascript">dojoConfig.baseUrl = 'libs320/'; </script>
<script type="text/javascript" src="libs320/dojo/dojo.js"></script>
<script type="text/javascript" src="libs320/main.js?t=1762765054"></script>
<link rel="stylesheet" href="libs320/dojo/themes/flat/flat.css" />
<link rel="stylesheet" href="libs320/dojo/dgrid/css/dgrid.css" />
<script type="text/javascript" src="libs320/xdate.min.js"></script>
<link rel="stylesheet" title="Default" href="libs320/themes/flat/window.css" type="text/css"/>
<script type="text/javascript" src="app.js?t=1762765054"></script>
</head>
<body oncontextmenu="return false;" class="flat" id="spiderbody" onload="onLoad()">
</body>
</html>
Re: Jitsi in a webgadget
Posted: Tue Nov 11, 2025 3:57 pm
by Stefan
Unfortunately, the web gadget remains empty when I run your code.
Re: Jitsi in a webgadget
Posted: Wed Nov 12, 2025 9:09 am
by Dirk Geppert
As I already wrote, Jitsi must be loaded first. I mean in the index.html that is generated when creating the web app.
This entry:
<script src="
https://meet.jit.si/external_api.js"></script>
must be loaded before the Spiderbasic app.js.
Unfortunately, the HeaderSection function adds it after app.js.
This is why direct execution with F5 does not work.
Here is the compiled and edited WebApp for you:
https://www.highoramic.de/app/Jitsi/index.html
Re: Jitsi in a webgadget
Posted: Wed Nov 12, 2025 6:46 pm
by Stefan
I don't understand what this `external api.js` is supposed to do. Even in your example, I can't access the microphone on my smartphone or tablet.
Re: Jitsi in a webgadget
Posted: Thu Nov 13, 2025 10:17 am
by Dirk Geppert
Which devices did you use to test the site
https://www.highoramic.de/app/Jitsi/index.html ?
It worked here with Safari & Firefox on iOS.
Re: Jitsi in a webgadget
Posted: Thu Nov 13, 2025 3:41 pm
by Stefan
Android devices.
Re: Jitsi in a webgadget
Posted: Thu Nov 13, 2025 4:18 pm
by Stefan
My test environment is NOT encrypted, of course. Under these conditions, browsers on Android devices apparently don't ask for permission to use the microphone and camera.
I've now tried it with an encrypted page, and the code below even works there without any API.
Thanks so much for your help!
Code: Select all
If OpenWindow(0, 0, 0, 1000, 800, "WebGadget", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
gadget = WebGadget(#PB_Any, 10, 10, 990, 790, "")
! (function () {
! var gad = spider_GadgetID(v_gadget);
! if (!gad) return; // Sicherheitsnetz, falls irgendwas schiefgeht
!
! // Gadget-Container → iframe suchen
! var iframe = $(gad.div).find("iframe");
! if (!iframe || !iframe.length) return;
!
! // Berechtigungen für Kamera/Mikro/Fullscreen setzen
! iframe.attr("allow", "camera; microphone; fullscreen; display-capture");
! iframe.attr("allowfullscreen", "true");
!
! // Jitsi-Meeting laden
! iframe.attr("src", "https://meet.jit.si/jitsispidertest0815");
! })();
EndIf