{"id":31962,"date":"2023-03-10T15:22:37","date_gmt":"2023-03-10T14:22:37","guid":{"rendered":"https:\/\/mimolive.com\/?post_type=user-manual&#038;p=31962"},"modified":"2025-08-08T16:29:25","modified_gmt":"2025-08-08T14:29:25","slug":"webbrowser-erfassung","status":"publish","type":"user-manual","link":"https:\/\/mimolive.com\/de\/user-manual\/sources-input\/screen-sources\/web-browser-capture\/","title":{"rendered":"Web Browser Capture Quelle"},"content":{"rendered":"<h3 class=\"wp-block-heading\">Die Webbrowser-Erfassungsquelle<\/h3>\n\n\n\n<p>Die <strong>Webbrowser-Erfassung<\/strong> Quelle k\u00f6nnen Sie ein Internet-Browser-Fenster oder einen Teil davon erfassen und das, was dort angezeigt wird, als Video zur Verwendung in jeder Ebene bereitstellen, die eine Videoquelle unterst\u00fctzt.<\/p>\n\n\n\n<p>Dies kann n\u00fctzlich sein, wenn Sie eine Webseite pr\u00e4sentieren m\u00f6chten. Oder Sie k\u00f6nnen ein transparentes Grafik-Overlay mit Live-Daten erstellen, die \u00fcber das Internet aktualisiert werden, indem Sie <span class=\"caps\">HTML<\/span> und <span class=\"caps\">CSS<\/span> f\u00fcr die Formatierung.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Hinzuf\u00fcgen der Webbrowser-Erfassungsquelle<\/h3>\n\n\n\n<p>Um die Web Browser Capture-Quelle zu Ihrem mimoLive-Dokument hinzuzuf\u00fcgen, klicken Sie auf den \"+\"-Button oben im <a href=\"https:\/\/mimolive.com\/de\/benutzerhandbuch\/quellen-und-das-quellen-repository\/\">Quellen-Repository<\/a> um eine Liste der verf\u00fcgbaren Quellentypen anzuzeigen. Suchen Sie die Quelle \"Web Browser Capture\" und ziehen Sie sie in das Quell-Repository.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img fetchpriority=\"high\" decoding=\"async\" width=\"920\" height=\"302\" src=\"https:\/\/mimolive.com\/wp-content\/uploads\/2023\/03\/bcc8868b-ce29-486c-971a-cd5c117748aa.png\" alt=\"\" class=\"wp-image-31964\" style=\"width:460px;height:151px\" srcset=\"https:\/\/mimolive.com\/wp-content\/uploads\/2023\/03\/bcc8868b-ce29-486c-971a-cd5c117748aa.png 920w,  https:\/\/mimolive.com\/wp-content\/uploads\/2023\/03\/bcc8868b-ce29-486c-971a-cd5c117748aa-300x98.png 300w,  https:\/\/mimolive.com\/wp-content\/uploads\/2023\/03\/bcc8868b-ce29-486c-971a-cd5c117748aa-768x252.png 768w,  https:\/\/mimolive.com\/wp-content\/uploads\/2023\/03\/bcc8868b-ce29-486c-971a-cd5c117748aa-18x6.png 18w\" sizes=\"(max-width: 920px) 100vw, 920px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Die Eingabe einer <span class=\"caps\">URL<\/span> Zum Erfassen<\/h3>\n\n\n\n<p>Klicken Sie im <span class=\"caps\">URL<\/span> Feld und geben Sie die <span class=\"caps\">URL<\/span> die Sie erfassen m\u00f6chten.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img decoding=\"async\" width=\"478\" height=\"252\" src=\"https:\/\/mimolive.com\/wp-content\/uploads\/2023\/03\/559f4e3c-64fe-4bcf-be74-982d9556dd2b.png\" alt=\"\" class=\"wp-image-31965\" style=\"width:239px;height:126px\" srcset=\"https:\/\/mimolive.com\/wp-content\/uploads\/2023\/03\/559f4e3c-64fe-4bcf-be74-982d9556dd2b.png 478w,  https:\/\/mimolive.com\/wp-content\/uploads\/2023\/03\/559f4e3c-64fe-4bcf-be74-982d9556dd2b-300x158.png 300w,  https:\/\/mimolive.com\/wp-content\/uploads\/2023\/03\/559f4e3c-64fe-4bcf-be74-982d9556dd2b-18x9.png 18w\" sizes=\"(max-width: 478px) 100vw, 478px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n<section class=\"boinx_exclamation\">\n    <div class=\"main_div_exclamation\">\n        <div class=\"left_div_icon_exclamation\">\n                <i class=\"icon_exclamation\">\u2757<\/i>\n        <\/div>\n\n        <div class=\"right_div_text_exclamation\">\n                <div><p class=\"text_exclamation_headline\">Sie k\u00f6nnen auch Dateien von Ihrem lokalen Computer angeben<\/p><\/div>\n                <div><p class=\"text_exclamation\">Wenn Sie ein HTML-Dokument von Ihrem Computer erfassen m\u00f6chten, m\u00fcssen Sie die URL angeben, die mit \"file:\/\/\/\" beginnt, gefolgt von dem vollst\u00e4ndigen Pfad zu diesem Dokument. Bitte beachten Sie die drei \"\/\" nach \"file:\"! Z.B. file:\/\/\/Benutzer\/mimolivestation\/Desktop\/MeineHTML-Seite.html<\/p><\/div>\n        <\/div>    \n    <\/div>\n<\/section>\n\n\t\t<style>.boinx_exclamation {\n    margin:30px 0;\n    padding:10px;\n    background-color:rgb(242,222,222);\n    border-radius: 8px;\n}\n.icon_exclamation {\n    display:block;\n    padding:5px;\n    font-size:80px;\n    color:rgb(184,74,72);\n    line-height:60px;\n}\n.text_exclamation {\n    color:rgb(184,74,72);\n}\n\n.text_exclamation_headline{\n    font-weight:bold;\n    color:rgb(184,74,72);\n}\n\n\n.main_div_exclamation\n{\n    display:flex !IMPORTANT;\n    flex-wrap: wrap;\n    flex-direction: row;\n    justify-content : flex-start;\n    align-items : flex-start\n    align-content : flex-start;\n    \n}\n\n.left_div_icon_exclamation{\n    display:flex !IMPORTANT;\n    width:80px;\n    padding:10px;\n    margin:20px 20px 20px 0;\n    height:40px;\n}\n.right_div_text_exclamation{\n    display:flex !IMPORTANT;\n    flex-direction: column;\n    flex-grow: 1;\n    width:200px;\n    padding:10px;\n    margin:0;\n}<\/style>\n\t\t\n\n\n<h3 class=\"wp-block-heading\">Kontrolle des Inhalts<\/h3>\n\n\n\n<p>Um den Inhalt Ihrer Webbrowser-Capture-Quelle zu kontrollieren, m\u00fcssen Sie das Browser-Fenster \u00f6ffnen, indem Sie auf die Schaltfl\u00e4che \"Webbrowser anzeigen\" unterhalb des <span class=\"caps\">URL<\/span> Feld. Es \u00f6ffnet sich ein neues Browserfenster, das den Inhalt Ihres <span class=\"caps\">URL<\/span>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1000\" height=\"150\" src=\"https:\/\/mimolive.com\/wp-content\/uploads\/2023\/03\/20d2c6db-6ba6-4f0d-94e0-7a4d3f0cb920.png\" alt=\"\" class=\"wp-image-31966\" srcset=\"https:\/\/mimolive.com\/wp-content\/uploads\/2023\/03\/20d2c6db-6ba6-4f0d-94e0-7a4d3f0cb920.png 1000w,  https:\/\/mimolive.com\/wp-content\/uploads\/2023\/03\/20d2c6db-6ba6-4f0d-94e0-7a4d3f0cb920-300x45.png 300w,  https:\/\/mimolive.com\/wp-content\/uploads\/2023\/03\/20d2c6db-6ba6-4f0d-94e0-7a4d3f0cb920-768x115.png 768w,  https:\/\/mimolive.com\/wp-content\/uploads\/2023\/03\/20d2c6db-6ba6-4f0d-94e0-7a4d3f0cb920-18x3.png 18w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<p>Es stehen mehrere Bedienelemente zur Verf\u00fcgung:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">R\u00fcckw\u00e4rts und vorw\u00e4rts<\/h4>\n\n\n\n<p>Mit den ersten beiden Schaltfl\u00e4chen k\u00f6nnen Sie durch den Browserverlauf springen, wenn Sie \u00fcber Links auf den Webseiten navigiert haben.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"caps\">URL<\/span> Feld<\/h4>\n\n\n\n<p>In das Textfeld in der Mitte k\u00f6nnen Sie einen neuen <span class=\"caps\">URL<\/span> f\u00fcr den Webinhalt.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Neu laden<\/h4>\n\n\n\n<p>Mit der runden Schaltfl\u00e4che k\u00f6nnen Sie ein Neuladen der aktuellen Webseite erzwingen.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Beschneiden<\/h4>\n\n\n\n<p>Wenn Sie nur einen bestimmten Teil des Webbrowser-Inhalts erfassen m\u00f6chten, k\u00f6nnen Sie mit dieser Schaltfl\u00e4che den Ausschnitt aktivieren. Es wird ein roter Rahmen angezeigt, mit dem Sie den zu erfassenden Bereich durch Ziehen der roten Griffe festlegen k\u00f6nnen. Am unteren Rand des Webbrowser-Fensters werden numerische Felder angezeigt, in die Sie bei Bedarf genaue Parameter eingeben k\u00f6nnen.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Transparenter Hintergrund<\/h4>\n\n\n\n<p>Manchmal m\u00f6chten Sie nur den Textinhalt einer Webseite als Overlay f\u00fcr Ihre Videoproduktion haben, aber der Inhalt der Webseite hat eine definierte Hintergrundfarbe. In diesem Fall k\u00f6nnen Sie versuchen, die Transparenz zu entfernen, indem Sie auf diese Schaltfl\u00e4che klicken. Da dies eine Manipulation der <span class=\"caps\">HTML<\/span> Dokumentenstruktur \u00fcber eingeschleusten JavaScript-Code funktioniert dies m\u00f6glicherweise nicht bei allen Webseiten.<\/p>\n\n\n\n<p>Der folgende JavaScript-Code wird ausgef\u00fchrt, um den Hintergrund transparent zu machen:<\/p>\n\n\n\n<pre class=\"wp-block-code\" data-no-translation=\"\"><code>document.body.style = document.body.style.cssText + \\\u201c;background: transparent !important;\\\u201c;<\/code><\/pre>\n\n\n<section class=\"boinx_exclamation\">\n    <div class=\"main_div_exclamation\">\n        <div class=\"left_div_icon_exclamation\">\n                <i class=\"icon_exclamation\">\u2757<\/i>\n        <\/div>\n\n        <div class=\"right_div_text_exclamation\">\n                <div><p class=\"text_exclamation_headline\">Verwenden Sie den Chromakey-Filter, wenn die Funktion zum Entfernen des Hintergrunds nicht funktioniert!<\/p><\/div>\n                <div><p class=\"text_exclamation\">Sie k\u00f6nnen sich noch bewerben <a href=\"\/de\/benutzerhandbuch\/chroma-keying-basic\/\">Chroma Keying Basic<\/a> um den Hintergrund transparent zu machen! Erfahren Sie, wie man <a href=\"\/de\/benutzerhandbuch\/filtert\/\">einen Filter hinzuf\u00fcgen<\/a> zur Webbrowser-Quelle.<\/p><\/div>\n        <\/div>    \n    <\/div>\n<\/section>\n\n\n\n\n<h4 class=\"wp-block-heading\">Mauszeiger<\/h4>\n\n\n\n<p>Vor allem, wenn Sie Ihrem Publikum Webseiten zeigen wollen, m\u00f6chten Sie vielleicht, dass es den Mauszeiger sieht, damit es Ihren Ausf\u00fchrungen folgen kann. Verwenden Sie diese Schaltfl\u00e4che, um den Mauszeiger ein- und auszuschalten.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Einrichten der Pixelma\u00dfe<\/h3>\n\n\n\n<p>Es ist wichtig zu wissen, dass die Pixelabmessungen der aufgenommenen Webseite die gleichen sind wie das Fenster des Webbrowsers. Standardm\u00e4\u00dfig hat das Fenster die Abmessungen Ihrer Videoproduktion. Wenn Sie die Gr\u00f6\u00dfe des Fensters \u00e4ndern, werden auch die Pixelma\u00dfe des aufgenommenen Bildes ge\u00e4ndert.<\/p>\n\n\n\n<p>Um ein bestimmtes Pixelma\u00df f\u00fcr Ihre Quelle festzulegen, k\u00f6nnen Sie auf das Aktionsrad in der oberen rechten Ecke klicken, um ein Popup-Men\u00fc mit vordefinierten Videoformaten zu \u00f6ffnen, oder Sie k\u00f6nnen zu einem benutzerdefinierten Ma\u00df wechseln.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"788\" height=\"382\" src=\"https:\/\/mimolive.com\/wp-content\/uploads\/2023\/03\/04d4b9c6-9221-44c0-a213-70f2614b8044.png\" alt=\"\" class=\"wp-image-31967\" style=\"width:591px;height:287px\" srcset=\"https:\/\/mimolive.com\/wp-content\/uploads\/2023\/03\/04d4b9c6-9221-44c0-a213-70f2614b8044.png 788w,  https:\/\/mimolive.com\/wp-content\/uploads\/2023\/03\/04d4b9c6-9221-44c0-a213-70f2614b8044-300x145.png 300w,  https:\/\/mimolive.com\/wp-content\/uploads\/2023\/03\/04d4b9c6-9221-44c0-a213-70f2614b8044-768x372.png 768w,  https:\/\/mimolive.com\/wp-content\/uploads\/2023\/03\/04d4b9c6-9221-44c0-a213-70f2614b8044-18x9.png 18w\" sizes=\"(max-width: 788px) 100vw, 788px\" \/><\/figure>\n\n\n\n<p><strong>Aufzeichnung von Computer-Audio<\/strong><br>Wie Sie Computer-Audio aufnehmen k\u00f6nnen, erfahren Sie unter <a href=\"https:\/\/mimolive.com\/de\/benutzerhandbuch\/computer-audio\/\">Quellen (Eingang) \/ Computer-Audio<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Zur\u00fccksetzen der Webbrowser-Erfassungsquelle<\/h3>\n\n\n\n<p>MacOS speichert die Caches, Cookies und andere Daten im Zusammenhang mit der Webansicht, die von der Web Browser Capture Source verwendet wird, unter:<br><br><code>~\/Library\/WebKit\/com.boinx.mimoLive\/WebsiteData\/<\/code><\/p>\n\n\n\n<p>Wenn es notwendig wird, den Webinhalt der Quelle zur\u00fcckzusetzen, l\u00f6schen Sie diesen Ordner.<\/p>\n\n\n\n<p><\/p>","protected":false},"excerpt":{"rendered":"<p>The Web Browser Capture Source The Web Browser Capture source lets you capture an internet browser window or a part of it and provide what\u2019s displayed there as video for use in any layer that supports a video source. This can be useful if you want to show off a web page. Or you can [&hellip;]<\/p>","protected":false},"author":3,"featured_media":0,"parent":40839,"menu_order":2,"template":"","meta":{"_acf_changed":false,"_angie_page":false,"_lmt_disableupdate":"no","_lmt_disable":"","footnotes":""},"categories":[258],"tags":[],"class_list":["post-31962","user-manual","type-user-manual","status-publish","hentry","category-manual"],"acf":[],"_links":{"self":[{"href":"https:\/\/mimolive.com\/de\/wp-json\/wp\/v2\/user-manual\/31962","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mimolive.com\/de\/wp-json\/wp\/v2\/user-manual"}],"about":[{"href":"https:\/\/mimolive.com\/de\/wp-json\/wp\/v2\/types\/user-manual"}],"author":[{"embeddable":true,"href":"https:\/\/mimolive.com\/de\/wp-json\/wp\/v2\/users\/3"}],"version-history":[{"count":4,"href":"https:\/\/mimolive.com\/de\/wp-json\/wp\/v2\/user-manual\/31962\/revisions"}],"predecessor-version":[{"id":41617,"href":"https:\/\/mimolive.com\/de\/wp-json\/wp\/v2\/user-manual\/31962\/revisions\/41617"}],"up":[{"embeddable":true,"href":"https:\/\/mimolive.com\/de\/wp-json\/wp\/v2\/user-manual\/40839"}],"wp:attachment":[{"href":"https:\/\/mimolive.com\/de\/wp-json\/wp\/v2\/media?parent=31962"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mimolive.com\/de\/wp-json\/wp\/v2\/categories?post=31962"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mimolive.com\/de\/wp-json\/wp\/v2\/tags?post=31962"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}