Set Webcam position by dockerfile parameter

[Mte90]

Is your feature request related to a problem? Please describe. Based on #76 now the webcam is positioned in the center of the slide.

Describe the solution you'd like A parameter in the dockerfile that let me pick the position or the path of a css file that in injected.

Additional context Video example: https://video.linux.it/videos/watch/1d1d50ec-51c9-41e9-a29a-f3c86c3e26cd

There is a code that position on top https://github.com/aau-zid/BigBlueButton-liveStreaming/issues/76#issuecomment-708205596

Seems that this code:

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)'")

In line https://github.com/aau-zid/BigBlueButton-liveStreaming/blob/master/stream.py#L176 it is enough but maybe a css file in the repo is another solution if there are some already provided.

[Mte90]

Seems that this change is not enough because if more users open the webcam seems that is not working they are not placed rightly.

[mtsonline]

thanks for this info. That is why I suggested implimenting the parameter / option for custom css so one can choose of some offered css templates and modify them to the needs.

think it would be the better choice and eventually more efficient way to go

[Mte90]

There is an easy way to test those changes? like with a browser and add those css/s rules?

Because seems that on every new webcam require a new positioning.

[Mte90]

any updates for this?

[mtsonline]

no, nobody did commit anything css related until now. Would be great though.

[Mte90]

browser.execute_script("document.getElementById('container').firstChild.setAttribute('top','0px');")
browser.execute_script("document.getElementById('container').firstChild.setAttribute('bottom','0px');")

This put the webcam on top

browser.execute_script("document.getElementById('container')[2].setAttribute('top','90px');")

This move the content above

I need to do some tests. I see that using the url generated by the python script those components are misplaced instead accessing as usual they aren't but the url ad the end is the same with some redirect probably.

[Mte90]

And yes changing joinParams['userdata-bbb_enable_video'] = 'true' fix the issue and now everything is placed rightly :-)

[mtsonline]

think you took the wrong join url. You need to use the one from the stream not the chat.