Bug - webcam superposed on the presentation - on the middle of the screen

[aguerson]

Hi guy, First : Thank you very much for the work ! I run it without docker with bash script, and it works like a charm. I am able to stream a hls flux with the power of nginx ! But I have one last problem !

When the users use their webcam, the position of the webcam is on the presentation, il the middle of the screen. Is there a solution ?

I searched how to configure selenium, how to deplace the webcam up of the presentation, but I didn't find nothing.

Can you help me ? Regards, Aurelien.

[mtsonline]

Aurelien, thanks for your feedback. the possibility to change the design has to be implimented. We changed the join url composition method so userdata parameters can be used now. This allows to submit an userdata css style with the design you want. have a look at the bbb userdata parameters docs ... would be great if someone can impliment this option.

just two steps are missing:

1. an env parameter to tell which css file to use (and of course the css file)

2. in chat.py and stream.py a userdata param in the join url creation function with the encoded css styles.

then the css provided would be used instead of the default one.

hth

[aguerson]

Thank for the fast reply.

Have you already try to deplace the webcam onthe top of the presentation ?

I can test your code if you want.

I found this https://github.com/bigbluebutton/bigbluebutton/issues/7791 and this https://docs.bigbluebutton.org/2.2/customize.html

If you have some code, I could try. Thanks again in adavance, Regards, Aurélien.

[mtsonline]

someone will have to code the lines for that. there is nothing to test right now.

these are the missing params: userdata-bbb_custom_style=... userdata-bbb_hide_presentation=true

and a css style must be created / the default one from bbb has to be changed.

hope somebody finds the time to do this.

[SadeqRouhani]

When the users use their webcam, the position of the webcam is on the presentation, il the middle of the screen. Is there a solution ?

hey every body i have same problem. how can change webcam position from middle to top?

[muuuh]

Workaround

edit stream.py, add after existing line:

browser.execute_script("document.getElementById('container').setAttribute('style','margin-bottom:30px');")

the following:

browser.execute_script("document.querySelector('.react-draggable').style.transform = 'translate(820px, 300px)'")

I copied the source files from https://github.com/aau-zid/BigBlueButton-liveStreaming to the directory source.

root@ubuntu:~/bbb-streaming# cat docker-compose.yml
version: '3.3'
services:
  bbb-streamer:
    #image: aauzid/bigbluebutton-livestreaming
    build: ./source/
...

launch with:

docker-compose up --build

[aguerson]

browser.execute_script("document.querySelector('.react-draggable').style.transform = 'translate(820px, 300px)'")

It worked for me ;)

I have to precised just one thing, whene the desktop screen is shared, if the resolution of the screen is very big, the webcam is on the shared screen on the botton of the right corner.

Many thanks.

[caijian76]

edit stream.py change: joinParams['userdata-bbb_enable_video'] = 'false' to 'true'

[aguerson]

I will try. I thought this option is used to share the webcam from the bot "live"

[mtsonline]

@caijian76 I thought the video param would disable sending the webcam of the live user ... what does it do instead? Should we enable it generally, or will this break something?

thanks

[aguerson]

Many thanks, it works very well !

[MonsieurPoutounours]

Hi,

Just sharing in case other people need it : if you start the stream and no webcam is enabled yet, the fix mentionned above will prevent container from starting, as the webcam element does not exist.

I fixed it by adding an 'if'

if(len(browser.find_elements_by_css_selector('.react-draggable'))>0): browser.execute_script("document.querySelector('.react-draggable').style.transform = 'translate(820px, 300px)'")

Yet, i am very bad at Python, so feel free to give a better way to do it.

[Lutice]

Hi, If you want the webcams center on top slide you can modify the file stream.py like this : after the line : browser.execute_script("document.querySelector('[aria-label=\"Actions bar\"]').style.display='none';") add this :

    browser.execute_script("document.getElementById('container').setAttribute('style','margin:100px');")
    browser.execute_script("document.getElementById('container').firstChild.setAttribute('style','height:500px !important');")
    browser.execute_script("document.getElementById('container').setAttribute('style','padding-top:200px !important');")
    browser.execute_script("document.querySelector('.react-draggable').style.transform = 'translate(0px,-500px)'")

Regards

[sroycode]

Hi: This works quite well. Is there a way to make the webcam window larger at the center of the screen ? Regards SRC

[dimitrihof]

edit stream.py change: joinParams['userdata-bbb_enable_video'] = 'false' to 'true'

This fixed it for me. Thanks for the tool guys!

[Mte90]

Any way to have in upstream this https://github.com/aau-zid/BigBlueButton-liveStreaming/issues/76#issuecomment-708205596 to have the webcam on top instead of over the presentation? As it is now there is space for the webcam, video example https://video.linux.it/videos/watch/1d1d50ec-51c9-41e9-a29a-f3c86c3e26cd

[mtsonline]

what do you mean with "this" - the pr is already merged. Or do you mean when the master will be released as new version? ... you always can just checkout the master branch and start with your docker-compose (have a look at the examples folder) hth

[Mte90]

I don't see the code of that comment https://github.com/aau-zid/BigBlueButton-liveStreaming/issues/76#issuecomment-708205596 in https://github.com/aau-zid/BigBlueButton-liveStreaming/blob/master/stream.py

[Lutice]

Hi @Mte90 It's line 153 you need to add the 4 lines after the line 153

[Mte90]

I saw that I was asking if it is possible to add those lines in the code of this repo so I don't need to keep a modified version and align at every new changes.

[mtsonline]

I saw this:

d3hof commented on 30 Oct 
edit stream.py
change:
joinParams['userdata-bbb_enable_video'] = 'false' to 'true'
This fixed it for me. Thanks for the tool guys!

and thought this was the change talked about. this had been implimented.

As there had been more than one issue mixed up in the thread, it is not clear what people are refering to.

Regardng this change: Do you all think this may be good in any case? Should this be the default for all meetings, regardless if there is a presentation, screenshare or webcam?...

In my opinion the style should not be changed by selenium clicks at all, this is no stable solution and selenium should be used if there is no better solution.

I did make the changes to the join url and introduced the user preferences params so it is easy to add the CSS styles parameter ...

I would be happy if someone could create a few css templates and provide a pr that impliments a new env that allows to specify the css that the user would prefer.

to realice this you would have to add the variable, the pass of the variable in the shell script and the user data param for css that sends the encoded css code to bbb within the join url function.

this is not much more work than adding the lines above but would fix it correctly, without selenium and additionally would allow users to create individual css styles for every meeting just by replacing the css file ... and this styles could be shared / added to the examples in the repo.

Hope someone finds the time to do this ... would be helpful for everyone

cheers

[Mte90]

I will open a new ticket so we can address better what requires to be done.

[dimitrihof]

@mtsonline I was referring to the webcam in the middle of the presentation.