Draw a widget over jitsi meet video

Question

I am using this library (https://github.com/gunschu/jitsi_meet) for jitsi meet, i want to draw a widget over the video screen like a chat button. Can anyone help? https://github.com/gunschu/jitsi_meet/issues/357

use the stack widget to place a widget on another and you can use the positioned widget to set the positon of your chat widget — OMi Shah, Feb 18 '22 at 16:48
i tried this, but the jitsi video takes whole screen and everything gets behind it — Usama Ahmad, Feb 18 '22 at 17:29

score 0 · Answer 1 · answered Feb 18 '22 at 19:17

0

As you mentioned that jitsi takes whole screen, your widgets should be placed in following manner and it should work:

Stack(
  children: [
    Jitsi(),
    ChatButton(),
  ],
)

If you keep your widgets like the following, your button will get behind Jitsi:

Stack(
  children: [
    ChatButton(),
    Jitsi(),
  ],
)

answered Feb 18 '22 at 19:17

Abhishek Doshi

465
2
5

Jitsi actually doesnt have a view, its just a function jitsi.joinmeeting() which opens up the video. so need to have a button over it, i tried using the stack approach aswell but doesnt work. – Usama Ahmad Feb 20 '22 at 10:07

score 0 · Answer 2 · answered Feb 20 '23 at 20:05

Stack will not work because when overlaying Flutter widgets on top of HtmlElementView widgets that respond to mouse gestures (handle clicks, for example), the clicks will be consumed by the HtmlElementView, and not relayed to Flutter.

The result is that Flutter widget's onTap (and other) handlers won't fire as expected, but they'll affect the underlying webview.

To fix this you can use : pointer_interceptor

Sample Code :

 Stack(
  children: [
    Jitsi(),
PointerInterceptor(     // wrap your widget inside pointer intercepter
child : ChatButton()),
  ],
)

Draw a widget over jitsi meet video

2 Answers2