There are two feature requests relate to bigbluebutton video UI.
This is used for guiding the user to adjust the header and shoulder place before camera, by showing an outline in selfview video.
To do this we can simply add a foreground image, and put that image in the center of selfview window.
The code changes are in bigbluebutton-client/src/org/bigbluebutton/modules/videoconf/views/UserGraphicHolder.mxml
We need override the function override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void, this function will be used to update the sizes and positions the children of your component.
-
we just hide the image for other people and only show in selfview.
-
The image need to be resized according when we resize the window, the width/height scale matters when resizing the image, when the width/height of the image is less than that of the window, then the image height is equal to the window height, and we adjust the width of the image accordingly; otherwise, the image width is equal to the window width, and we adjust the height of the image accordingly.
And we also need to add the image resource in the css file bigbluebutton-client/branding/default/style/css/V2Theme.css
Bigbluebutton has only one video dock, and sometimes people may need multiple video docks to show different group people. One scenario is having one dock for selfview, one dock for moderator, and one dock for other participants.
PR#4586 changed the layout module to use custom names instead of the class name, so that we can give different names for different video docks. We need this PR for this feature.
The video dock is created in bigbluebutton-client/src/org/bigbluebutton/modules/videoconf/maps/VideoEventMapDelegate.as, and after applying PR#4586, we can create multiple video docks, and give each video dock different name, the name will be used later to config the layout.
And in VideoEventMapDelegate.as we create additional GraphicsWrappers for newly added video docks, GraphicsWrapper is used to add the video streams, and each video dock has one corresponding GraphicsWrapper, there are many helper function to tell whether the user is moderator, whether I am moderator etc to tell the user role, and we can use those function to add the video streams to the "correct" GraphicsWrapper.
The next step is to adjust the video docks layout, multiple video docks will lay on top of each other by default;
-
First, we need to enable the edit of layout in
bigbluebutton-client/src/org/bigbluebutton/modules/layout/maps/LayoutEventMapDelegate.mxmlby hardcodinglayoutComponent.enableEdit = true;, changes in the config.xml seems not working. Make the change and compile. -
Now the layout module will enable editing on the right bottom, you can adjust the video docks layout, and save it as
layout.xmlfile. Openlayout.xml, remove other unused layouts and set the one newly created layout as default, if you don't need some modules like "chat", just set its "hidden" attribute to "true", comment out some modules will not work and may cause bigbluebutton client fails to load. -
Upload the saved layout.xml to server and replace
bigbluebutton-client/resources/prod/layout.xml, then compile again, this will copy the layout.xml tobigbluebutton-client/client/conf/layout.xml. Or you can just copylayout.xmltobigbluebutton-client/client/conf/layout.xml, it will take effect immediantly, but it will be replaced bybigbluebutton-client/resources/prod/layout.xmlwhen next compilation.
- To enable debugging of bigbluebutton, you need make the following changes in
bigbluebutton-client/src/conf/config.xml
-
set
showLogButton="true"inlayoutelement -
set
enabled="true" logTarget="logwindow" level="all"inloggingelement
compile and it will replace bigbluebutton-client/client/conf/config.xml, which served finally to the client.
- Download and install debug version of flash here, this helps to identify crash issues, the log window doesn't help for such cases.