stream.py: include logo in video

Introduces new flags to include a logo by an URL into the video. The
logo will be placed in a corner, by default the top right one, as this
does not collide with the list of current speakers. However, one can
override this, e.g., when the bar of current speakers was disabled.

The logo's style attribute places it in the background and limits its
height to a tenth of the visible screen size. This prevents distorting
other elements, e.g., when lots of webcams are in use.

README.md

@@ -36,6 +36,8 @@ You need to set some environment variables to run the container.
 * BBB_HIDE_MEETING_TITLE - hide the meeting title in the top bar (Default: false)
 * BBB_HIDE_WHO_TALKS - hide the annotation who is currently talking (Default: false)
 * BBB_BACKGROUND_COLOR - override background color by a CSS color, e.g., "black" or "#ffffff"
+* BBB_LOGO_URL - add a logo to the video, passed as an image URL (Default: none/disabled)
+* BBB_LOGO_POS - corner where to place the logo: "top/left", "top/right", "bottom/left" or "bottom/right" (Default "top/right")
 * TZ - Timezone (Default: Europe/Vienna)
 
 #### Chat settings

stream.py

@@ -92,6 +92,16 @@
     help='override background color by a CSS color, e.g., "black" or "#ffffff" (can be set using env)',
     default=os.environ.get('BBB_BACKGROUND_COLOR', '')
 )
+parser.add_argument(
+    '--logo',
+    help='add a logo to the video, passed as an image URL (can be set using env)',
+    default=os.environ.get('BBB_LOGO_URL', '')
+)
+parser.add_argument(
+    '--logo-position',
+    help='corner where to place the logo: "top/left", "top/right" (default), "bottom/left" or "bottom/right" (can be set using env)',
+    default=os.environ.get('BBB_LOGO_POS', 'top/right')
+)
 
 args = parser.parse_args()
 # some ugly hacks for additional options
@@ -242,6 +252,19 @@ def bbb_browser():
         document.head.appendChild(hideDecoratorsStyle);
     """)
 
+    if args.logo != '':
+        [logo_pos_vertical, logo_pos_horizontal] = args.logo_position.split('/')
+        browser.execute_script("""
+            const navbarHeader = document.querySelector('[class^="navbar"]');
+
+            const logoImg = document.createElement("img");
+            logoImg.style = "position: absolute; %s: 5px; %s: 5px;";
+            logoImg.src = "%s";
+            logoImg.height = 0.1 * window.innerHeight;
+
+            navbarHeader.appendChild(logoImg);
+        """ % (logo_pos_vertical, logo_pos_horizontal, args.logo))
+
     try:
         browser.execute_script("document.getElementById('container').setAttribute('style','margin-bottom:30px');")
     except JavascriptException: