Jitsi in a webgadget

Dirk Geppert · Post by **Dirk Geppert** » Mon Nov 10, 2025 8:41 am

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

Dirk Geppert · Post by **Dirk Geppert** » Mon Nov 10, 2025 9:06 am

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

Stefan · Post by **Stefan** » Mon Nov 10, 2025 4:10 pm

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.

Dirk Geppert · Post by **Dirk Geppert** » Tue Nov 11, 2025 11:15 am

@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>

Stefan · Post by **Stefan** » Tue Nov 11, 2025 3:57 pm

Unfortunately, the web gadget remains empty when I run your code.

Dirk Geppert · Post by **Dirk Geppert** » Wed Nov 12, 2025 9:09 am

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

Stefan · Post by **Stefan** » Wed Nov 12, 2025 6:46 pm

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.

Dirk Geppert · Post by **Dirk Geppert** » Thu Nov 13, 2025 10:17 am

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.

Stefan · Post by **Stefan** » Thu Nov 13, 2025 3:41 pm

Android devices.

Stefan · Post by **Stefan** » Thu Nov 13, 2025 4:18 pm

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

SpiderBasic

Jitsi in a webgadget

Re: Jitsi in a webgadget

Re: Jitsi in a webgadget

Re: Jitsi in a webgadget

Re: Jitsi in a webgadget

Re: Jitsi in a webgadget

Re: Jitsi in a webgadget

Re: Jitsi in a webgadget

Re: Jitsi in a webgadget

Re: Jitsi in a webgadget

Re: Jitsi in a webgadget