{"id":2706,"date":"2022-11-28T20:38:49","date_gmt":"2022-11-28T20:38:49","guid":{"rendered":"http:\/\/liongate.cherry.agency\/?post_type=news&#038;p=2706"},"modified":"2025-12-08T19:50:40","modified_gmt":"2025-12-08T19:50:40","slug":"wie-die-virtuelle-hintergrundfunktion-in-bigbluebutton-implementiert-wurde","status":"publish","type":"news","link":"https:\/\/www.liongate.de\/de\/news\/wie-die-virtuelle-hintergrundfunktion-in-bigbluebutton-implementiert-wurde\/","title":{"rendered":"Wie die virtuelle Hintergrundfunktion in BigBlueButton implementiert wurde"},"content":{"rendered":"\t\t\t<section class=\"simple-description\">\n\t\t\t<div class=\"container \">\n\t\t\t\t\t\t\t\t\t<div class=\"description\"><p style=\"line-height: 1.6; color: #000000; text-align: justify; hyphens: auto;\">Als wir alle begannen, unsere Arbeits- und Kommunikationsweise zu \u00e4ndern, mussten die meisten von uns Online-Kommunikationstools wie Zoom, Skype, Microsoft Teams, Jitsi oder BigBlueButton verwenden. Die Teilnahme an einer Videokonferenz im B\u00fcro ist nicht dasselbe wie die Teilnahme an einer Videokonferenz von zu Hause aus, da wir vielleicht private Gegenst\u00e4nde haben, die wir anderen nicht zeigen m\u00f6chten. Dabei kann es sich um Familienfotos oder pers\u00f6nliche Gegenst\u00e4nde handeln, oder auch nur darum, dass der Raum ein wenig unordentlich ist und wir nicht m\u00f6chten, dass man das sieht.<\/p>\n<p style=\"line-height: 1.6; color: #000000; text-align: justify; hyphens: auto;\"><strong>Einf\u00fchrung von virtuellen Hintergr\u00fcnden<\/strong><\/p>\n<p style=\"line-height: 1.6; color: #000000; text-align: justify; hyphens: auto;\">Die meisten der oben genannten Videokonferenzplattformen bieten einen \u201evirtuellen Hintergrund\u201c oder eine \u201eBlur\u201c-Funktion. Diese Funktion erm\u00f6glicht es den Nutzern, ihren Hintergrund zu \u00e4ndern, ohne dass ein Greenscreen erforderlich ist. Um dies zu erreichen, werden Algorithmen des maschinellen Lernens eingesetzt, um Menschen vom Hintergrund zu unterscheiden.<\/p>\n<p style=\"line-height: 1.6; color: #000000; text-align: justify; hyphens: auto;\">Bei LionGate verwenden wir BigBlueButton f\u00fcr unsere Online-Lehrplattform \u201evicole\u201c, und leider fehlte BigBlueButton die Funktion des virtuellen Hintergrunds, die sowohl von unseren Kunden als auch von anderen Nutzern stark nachgefragt wurde. Daher haben wir angeboten, das Projekt zu unterst\u00fctzen und die Funktion selbst zu entwickeln. Au\u00dferdem trugen wir zu dem Projekt bei, indem wir einen Open-Source-Beitrag leisteten, den jeder nutzen kann, sobald er\/sie dem Projekt hinzugef\u00fcgt wurde.<\/p>\n<p style=\"line-height: 1.6; color: #000000; text-align: justify; hyphens: auto;\"><strong>Die ersten Schritte und das Verst\u00e4ndnis der Technologie<\/strong><\/p>\n<p style=\"line-height: 1.6; color: #000000; text-align: justify; hyphens: auto;\">Nachdem wir uns bereit erkl\u00e4rt hatten, die Funktion f\u00fcr BigBlueButton bereitzustellen, mussten wir herausfinden, welche Schritte notwendig waren. Als Open-Source- und webbasierte Plattform haben wir uns zun\u00e4chst Jitsi und deren Implementierung der Funktion angeschaut. Der Quellcode zeigte, dass sie von einem anderen Open-Source-Projekt eines Github-Benutzers namens \u201eVolcomix\u201c inspiriert wurden. Dies war entscheidend f\u00fcr unser Verst\u00e4ndnis, da Volcomix die Schritte gut dokumentiert und mit einer funktionierenden Demo unterst\u00fctzt hatte.<\/p>\n<p style=\"line-height: 1.6; color: #000000; text-align: justify; hyphens: auto;\">Wir folgten den Schritten von Volcomix und Jitsi und verwendeten das Google Meet Segmentation Model, das Anfang Januar unter der Apache-Lizenz Version 2 ver\u00f6ffentlicht wurde. Das Modell wurde nur als TFLite-Datei bereitgestellt, sodass wir es in Web Assembly einbinden mussten. Danach wurde die Funktion an die Verfahren von BigBlueButton angepasst.<\/p>\n<p style=\"line-height: 1.6; color: #000000; text-align: justify; hyphens: auto;\"><strong>Anpassen des Features an BigBlueButton<\/strong><\/p>\n<p style=\"line-height: 1.6; color: #000000; text-align: justify; hyphens: auto;\">Der Web-Client von BigBlueButton verwendet React und Meteor. Es musste ein Meteor-Web-Handler erstellt werden, um die Web-Assembly-Dateien zu laden, wenn sie vom Benutzer angefordert werden. Nach dem Laden des Modells wird der Videostream des Benutzers entweder durch ein vom Benutzer gew\u00e4hltes Hintergrundbild oder durch einen Unsch\u00e4rfeeffekt ersetzt und an ein HTML-Canvas-Element \u00fcbergeben. Das MediaStream-Objekt wird dann verwendet, um den Stream in der WebRTC RTCPeerConnection zu ersetzen, sodass alle Teilnehmer den virtuellen Hintergrund sehen k\u00f6nnen, ohne dass es zu Leistungseinbu\u00dfen auf den Endger\u00e4ten kommt.<\/p>\n<p style=\"line-height: 1.6; color: #000000; text-align: justify; hyphens: auto;\"><strong>Schlussbemerkungen<\/strong><\/p>\n<p style=\"line-height: 1.6; color: #000000; text-align: justify; hyphens: auto;\">Obwohl die Funktion bereits funktioniert, wird sie weiter verfeinert. Ein gro\u00dfartiger Aspekt von Open-Source-Projekten ist, dass jeder Probleme identifizieren und zum Projekt beitragen kann. Dies war f\u00fcr uns eine tolle Gelegenheit, einem Projekt etwas zur\u00fcckzugeben, das wir selbst gerne nutzen. Eine Live-Demonstration finden Sie auf <a href=\"https:\/\/www.vicole.de\" target=\"_blank\" rel=\"noopener\">www.vicole.de<\/a>.<\/p>\n<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t","protected":false},"excerpt":{"rendered":"","protected":false},"featured_media":9994,"parent":0,"menu_order":0,"template":"","news-category":[36],"class_list":["post-2706","news","type-news","status-publish","has-post-thumbnail","hentry","news-category-artikel-de"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.3 (Yoast SEO v27.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Wie die virtuelle Hintergrundfunktion in BigBlueButton implementiert wurde - Liongate<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.liongate.de\/de\/news\/wie-die-virtuelle-hintergrundfunktion-in-bigbluebutton-implementiert-wurde\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Wie die virtuelle Hintergrundfunktion in BigBlueButton implementiert wurde\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.liongate.de\/de\/news\/wie-die-virtuelle-hintergrundfunktion-in-bigbluebutton-implementiert-wurde\/\" \/>\n<meta property=\"og:site_name\" content=\"Liongate\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-08T19:50:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.liongate.de\/wp-content\/uploads\/2025\/12\/abstract-blue-turquoise.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data1\" content=\"1\u00a0Minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.liongate.de\\\/de\\\/news\\\/wie-die-virtuelle-hintergrundfunktion-in-bigbluebutton-implementiert-wurde\\\/\",\"url\":\"https:\\\/\\\/www.liongate.de\\\/de\\\/news\\\/wie-die-virtuelle-hintergrundfunktion-in-bigbluebutton-implementiert-wurde\\\/\",\"name\":\"Wie die virtuelle Hintergrundfunktion in BigBlueButton implementiert wurde - Liongate\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.liongate.de\\\/de\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.liongate.de\\\/de\\\/news\\\/wie-die-virtuelle-hintergrundfunktion-in-bigbluebutton-implementiert-wurde\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.liongate.de\\\/de\\\/news\\\/wie-die-virtuelle-hintergrundfunktion-in-bigbluebutton-implementiert-wurde\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.liongate.de\\\/wp-content\\\/uploads\\\/2025\\\/12\\\/abstract-blue-turquoise.jpg\",\"datePublished\":\"2022-11-28T20:38:49+00:00\",\"dateModified\":\"2025-12-08T19:50:40+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.liongate.de\\\/de\\\/news\\\/wie-die-virtuelle-hintergrundfunktion-in-bigbluebutton-implementiert-wurde\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.liongate.de\\\/de\\\/news\\\/wie-die-virtuelle-hintergrundfunktion-in-bigbluebutton-implementiert-wurde\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.liongate.de\\\/de\\\/news\\\/wie-die-virtuelle-hintergrundfunktion-in-bigbluebutton-implementiert-wurde\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.liongate.de\\\/wp-content\\\/uploads\\\/2025\\\/12\\\/abstract-blue-turquoise.jpg\",\"contentUrl\":\"https:\\\/\\\/www.liongate.de\\\/wp-content\\\/uploads\\\/2025\\\/12\\\/abstract-blue-turquoise.jpg\",\"width\":1920,\"height\":1080,\"caption\":\"Abstrakte Komposition mit blauen und t\u00fcrkisen Farben.\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.liongate.de\\\/de\\\/news\\\/wie-die-virtuelle-hintergrundfunktion-in-bigbluebutton-implementiert-wurde\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.liongate.de\\\/de\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Wie die virtuelle Hintergrundfunktion in BigBlueButton implementiert wurde\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.liongate.de\\\/de\\\/#website\",\"url\":\"https:\\\/\\\/www.liongate.de\\\/de\\\/\",\"name\":\"Liongate\",\"description\":\"Liongate - Make every interaction a win\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.liongate.de\\\/de\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Wie die virtuelle Hintergrundfunktion in BigBlueButton implementiert wurde - Liongate","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.liongate.de\/de\/news\/wie-die-virtuelle-hintergrundfunktion-in-bigbluebutton-implementiert-wurde\/","og_locale":"de_DE","og_type":"article","og_title":"Wie die virtuelle Hintergrundfunktion in BigBlueButton implementiert wurde","og_url":"https:\/\/www.liongate.de\/de\/news\/wie-die-virtuelle-hintergrundfunktion-in-bigbluebutton-implementiert-wurde\/","og_site_name":"Liongate","article_modified_time":"2025-12-08T19:50:40+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/www.liongate.de\/wp-content\/uploads\/2025\/12\/abstract-blue-turquoise.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Gesch\u00e4tzte Lesezeit":"1\u00a0Minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.liongate.de\/de\/news\/wie-die-virtuelle-hintergrundfunktion-in-bigbluebutton-implementiert-wurde\/","url":"https:\/\/www.liongate.de\/de\/news\/wie-die-virtuelle-hintergrundfunktion-in-bigbluebutton-implementiert-wurde\/","name":"Wie die virtuelle Hintergrundfunktion in BigBlueButton implementiert wurde - Liongate","isPartOf":{"@id":"https:\/\/www.liongate.de\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.liongate.de\/de\/news\/wie-die-virtuelle-hintergrundfunktion-in-bigbluebutton-implementiert-wurde\/#primaryimage"},"image":{"@id":"https:\/\/www.liongate.de\/de\/news\/wie-die-virtuelle-hintergrundfunktion-in-bigbluebutton-implementiert-wurde\/#primaryimage"},"thumbnailUrl":"https:\/\/www.liongate.de\/wp-content\/uploads\/2025\/12\/abstract-blue-turquoise.jpg","datePublished":"2022-11-28T20:38:49+00:00","dateModified":"2025-12-08T19:50:40+00:00","breadcrumb":{"@id":"https:\/\/www.liongate.de\/de\/news\/wie-die-virtuelle-hintergrundfunktion-in-bigbluebutton-implementiert-wurde\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.liongate.de\/de\/news\/wie-die-virtuelle-hintergrundfunktion-in-bigbluebutton-implementiert-wurde\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.liongate.de\/de\/news\/wie-die-virtuelle-hintergrundfunktion-in-bigbluebutton-implementiert-wurde\/#primaryimage","url":"https:\/\/www.liongate.de\/wp-content\/uploads\/2025\/12\/abstract-blue-turquoise.jpg","contentUrl":"https:\/\/www.liongate.de\/wp-content\/uploads\/2025\/12\/abstract-blue-turquoise.jpg","width":1920,"height":1080,"caption":"Abstrakte Komposition mit blauen und t\u00fcrkisen Farben."},{"@type":"BreadcrumbList","@id":"https:\/\/www.liongate.de\/de\/news\/wie-die-virtuelle-hintergrundfunktion-in-bigbluebutton-implementiert-wurde\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.liongate.de\/de\/"},{"@type":"ListItem","position":2,"name":"Wie die virtuelle Hintergrundfunktion in BigBlueButton implementiert wurde"}]},{"@type":"WebSite","@id":"https:\/\/www.liongate.de\/de\/#website","url":"https:\/\/www.liongate.de\/de\/","name":"Liongate","description":"Liongate - Make every interaction a win","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.liongate.de\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/www.liongate.de\/de\/wp-json\/wp\/v2\/news\/2706","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.liongate.de\/de\/wp-json\/wp\/v2\/news"}],"about":[{"href":"https:\/\/www.liongate.de\/de\/wp-json\/wp\/v2\/types\/news"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.liongate.de\/de\/wp-json\/wp\/v2\/media\/9994"}],"wp:attachment":[{"href":"https:\/\/www.liongate.de\/de\/wp-json\/wp\/v2\/media?parent=2706"}],"wp:term":[{"taxonomy":"news-category","embeddable":true,"href":"https:\/\/www.liongate.de\/de\/wp-json\/wp\/v2\/news-category?post=2706"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}