{"id":5498,"date":"2021-10-28T11:10:55","date_gmt":"2021-10-28T11:10:55","guid":{"rendered":"https:\/\/getonstream.com\/?p=5498"},"modified":"2021-10-28T13:05:17","modified_gmt":"2021-10-28T13:05:17","slug":"how-to-use-browser-source-in-streamlabs-obs","status":"publish","type":"post","link":"https:\/\/getonstream.com\/how-to-use-browser-source-in-streamlabs-obs\/","title":{"rendered":"How To Use Browser Source In Streamlabs OBS"},"content":{"rendered":"\n<p>Browser sources used to be used for many different widgets in Streamlabs however we now have a lot of these features built directly into the software. Nonetheless there is still a few things that we need to use browser sources for. In this tutorial we are going to explain what browser sources are in Streamlabs and how you can use them to your advantage when streaming.<\/p>\n\n\n\n<p>Let&#8217;s jump in to the tutorial.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What Are Browser Sources In Streamlabs OBS?<\/h2>\n\n\n\n<p>Browser sources allow you to utilise third party widgets, webpages and files on your computer on stream. using browser sources is a great way to react to videos or even showcase a video file you have on your computer.<\/p>\n\n\n\n<p>In this tutorial I am going to be covering three different types of browser sources you will likely want to utilise in Streamlabs OBS. <\/p>\n\n\n\n<ul><li>URL <\/li><li>Files<\/li><li>Widgets<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Adding A URL Browser Source To Streamlabs<\/h2>\n\n\n\n<p>A URL browser source allows you to showcase a webpage on your stream. For example you can show a Youtube page and react to a certain video.<\/p>\n\n\n\n<p>To add a browser source to your stream go to<strong> Sources &#8211;&gt; + &#8211;&gt;  Browser Source &#8211;&gt; Add Source<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"570\" src=\"https:\/\/getonstream.com\/app\/uploads\/2021\/10\/e5cd14e73fdb36292bd06021a8fb2ec3-1024x570.png\" alt=\"\" class=\"wp-image-5499\" srcset=\"https:\/\/getonstream.com\/app\/uploads\/2021\/10\/e5cd14e73fdb36292bd06021a8fb2ec3-1024x570.png 1024w, https:\/\/getonstream.com\/app\/uploads\/2021\/10\/e5cd14e73fdb36292bd06021a8fb2ec3-300x167.png 300w, https:\/\/getonstream.com\/app\/uploads\/2021\/10\/e5cd14e73fdb36292bd06021a8fb2ec3-150x84.png 150w, https:\/\/getonstream.com\/app\/uploads\/2021\/10\/e5cd14e73fdb36292bd06021a8fb2ec3-768x428.png 768w, https:\/\/getonstream.com\/app\/uploads\/2021\/10\/e5cd14e73fdb36292bd06021a8fb2ec3.png 1194w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Give your source a name and then we can add our URL. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"740\" height=\"844\" src=\"https:\/\/getonstream.com\/app\/uploads\/2021\/10\/e8b09e63c2e8fa6d6f34629a96e65627.png\" alt=\"\" class=\"wp-image-5500\" srcset=\"https:\/\/getonstream.com\/app\/uploads\/2021\/10\/e8b09e63c2e8fa6d6f34629a96e65627.png 740w, https:\/\/getonstream.com\/app\/uploads\/2021\/10\/e8b09e63c2e8fa6d6f34629a96e65627-263x300.png 263w, https:\/\/getonstream.com\/app\/uploads\/2021\/10\/e8b09e63c2e8fa6d6f34629a96e65627-132x150.png 132w\" sizes=\"(max-width: 740px) 100vw, 740px\" \/><\/figure>\n\n\n\n<p>Just paste the URL of the website that you want to appear on your screen. For something like youtube they have a GDPR pop up that you will need to remove if you want to watch the video.<\/p>\n\n\n\n<p>To do this right click on the browser source &#8211;&gt; Interact. A new window will pop up where<strong> you can interact with the browser and position it perfectly for your stream.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"795\" height=\"602\" src=\"https:\/\/getonstream.com\/app\/uploads\/2021\/10\/6be8a606940be4bb130b8b6c7ba2dca7.png\" alt=\"\" class=\"wp-image-5501\" srcset=\"https:\/\/getonstream.com\/app\/uploads\/2021\/10\/6be8a606940be4bb130b8b6c7ba2dca7.png 795w, https:\/\/getonstream.com\/app\/uploads\/2021\/10\/6be8a606940be4bb130b8b6c7ba2dca7-300x227.png 300w, https:\/\/getonstream.com\/app\/uploads\/2021\/10\/6be8a606940be4bb130b8b6c7ba2dca7-150x114.png 150w, https:\/\/getonstream.com\/app\/uploads\/2021\/10\/6be8a606940be4bb130b8b6c7ba2dca7-768x582.png 768w, https:\/\/getonstream.com\/app\/uploads\/2021\/10\/6be8a606940be4bb130b8b6c7ba2dca7-87x67.png 87w\" sizes=\"(max-width: 795px) 100vw, 795px\" \/><\/figure>\n\n\n\n<p>You can also adjust the width and the height of the browser source in the settings to get the perfect aspect ratio for whatever it is you are showcasing. That&#8217;s how you showcase a website through a browser source in Streamlabs.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Adding A Third Party Widget Browser Source To Streamlabs OBS<\/h2>\n\n\n\n<p>Third Party widgets are the main usage for Browser sources in Streamlabs OBS. This allows us to add extra functionality to your stream that Streamlabs OBS doesn&#8217;t provide. If you have used OBS Studio before you will likely be familiar with this.<\/p>\n\n\n\n<p>For example I have<a href=\"https:\/\/getonstream.com\/text-to-speech-using-channel-points\/\" target=\"_blank\" rel=\"noreferrer noopener\"> text to speech using channel points enabled on my stream<\/a>. For the Text to speech to play I have to use a browser source widget.<\/p>\n\n\n\n<p>If you are using a third party app they will give you a URL to paste into the URL section of your browser source. You can see below I have a link from isaiahcreati bot as it is the bot I use to run my text to speech. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"592\" height=\"643\" src=\"https:\/\/getonstream.com\/app\/uploads\/2021\/10\/5fd2769506864142cca77f9c806b49f8.png\" alt=\"\" class=\"wp-image-5503\" srcset=\"https:\/\/getonstream.com\/app\/uploads\/2021\/10\/5fd2769506864142cca77f9c806b49f8.png 592w, https:\/\/getonstream.com\/app\/uploads\/2021\/10\/5fd2769506864142cca77f9c806b49f8-276x300.png 276w, https:\/\/getonstream.com\/app\/uploads\/2021\/10\/5fd2769506864142cca77f9c806b49f8-138x150.png 138w\" sizes=\"(max-width: 592px) 100vw, 592px\" \/><\/figure>\n\n\n\n<p>To use your third party widget paste your URL in the URL section (if you want to adjust the audio select control audio via OBS) and you are good to go.<\/p>\n\n\n\n<p>Just click done and you will see the widget added to your scene. You can then adjust the widget to fit into your scene how you please.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Adding A Local File As A Browser Source In Streamlabs OBS<\/h2>\n\n\n\n<p>The browser source widget also allows you to show local files on your computer. This can be useful for showing a video you may have saved on your computer however it can also be used for applications that run on your computer.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"592\" height=\"411\" src=\"https:\/\/getonstream.com\/app\/uploads\/2021\/10\/c65171695218efcbec4bbb03438f5ec1.png\" alt=\"\" class=\"wp-image-5505\" srcset=\"https:\/\/getonstream.com\/app\/uploads\/2021\/10\/c65171695218efcbec4bbb03438f5ec1.png 592w, https:\/\/getonstream.com\/app\/uploads\/2021\/10\/c65171695218efcbec4bbb03438f5ec1-300x208.png 300w, https:\/\/getonstream.com\/app\/uploads\/2021\/10\/c65171695218efcbec4bbb03438f5ec1-150x104.png 150w\" sizes=\"(max-width: 592px) 100vw, 592px\" \/><\/figure>\n\n\n\n<p>For example I use an application to <a href=\"https:\/\/getonstream.com\/how-to-add-a-countdown-timer-to-your-stream-streamlabs-obs\/\" target=\"_blank\" rel=\"noreferrer noopener\">run a countdown timer on my streams.<\/a> To showcase the countdown timer I need to add a local file as a browser source in Streamlabs.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"748\" height=\"262\" src=\"https:\/\/getonstream.com\/app\/uploads\/2021\/10\/33bdbbfe63f66e3745a90e5dcdf45c56.png\" alt=\"\" class=\"wp-image-5507\" srcset=\"https:\/\/getonstream.com\/app\/uploads\/2021\/10\/33bdbbfe63f66e3745a90e5dcdf45c56.png 748w, https:\/\/getonstream.com\/app\/uploads\/2021\/10\/33bdbbfe63f66e3745a90e5dcdf45c56-300x105.png 300w, https:\/\/getonstream.com\/app\/uploads\/2021\/10\/33bdbbfe63f66e3745a90e5dcdf45c56-150x53.png 150w\" sizes=\"(max-width: 748px) 100vw, 748px\" \/><\/figure>\n\n\n\n<p>For example the app I use is called Snaz and here you can see they provide me with a local url of the file on my computer (Copy Path To Clipboard). When I copy this URL I go to my browser source, select Local File and paste in the URl.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/getonstream.com\/app\/uploads\/2021\/10\/8660d9d9f49b17b1f6805581329d8f2a.png\" alt=\"\" class=\"wp-image-5508\" width=\"610\" height=\"412\" srcset=\"https:\/\/getonstream.com\/app\/uploads\/2021\/10\/8660d9d9f49b17b1f6805581329d8f2a.png 584w, https:\/\/getonstream.com\/app\/uploads\/2021\/10\/8660d9d9f49b17b1f6805581329d8f2a-300x202.png 300w, https:\/\/getonstream.com\/app\/uploads\/2021\/10\/8660d9d9f49b17b1f6805581329d8f2a-150x101.png 150w\" sizes=\"(max-width: 610px) 100vw, 610px\" \/><\/figure>\n\n\n\n<p>Click done and you will then be able to see the browser source in your scene.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"627\" height=\"395\" src=\"https:\/\/getonstream.com\/app\/uploads\/2021\/10\/f30e8b8af4648abcdc394e6880bef953-1.png\" alt=\"\" class=\"wp-image-5510\" srcset=\"https:\/\/getonstream.com\/app\/uploads\/2021\/10\/f30e8b8af4648abcdc394e6880bef953-1.png 627w, https:\/\/getonstream.com\/app\/uploads\/2021\/10\/f30e8b8af4648abcdc394e6880bef953-1-300x189.png 300w, https:\/\/getonstream.com\/app\/uploads\/2021\/10\/f30e8b8af4648abcdc394e6880bef953-1-150x94.png 150w\" sizes=\"(max-width: 627px) 100vw, 627px\" \/><\/figure>\n\n\n\n<p>Alternatively you can use the browse function which let&#8217;s you find a file on your computer that you want to showcase.<\/p>\n\n\n\n<p class=\"has-vivid-green-cyan-background-color has-background\"><strong>You may also be interested in our <a href=\"https:\/\/getonstream.com\/complete-guide-to-setting-up-streamlabs-for-twitch-youtube\/\" target=\"_blank\" rel=\"noreferrer noopener\">Complete Guide To Streamlabs OBS<\/a><\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Wrapping Up<\/h2>\n\n\n\n<p>You should now have the browser source added to your scene in Streamlabs ready to show off to your viewers. Enjoy!<\/p>\n\n\n\n<p><strong>Read More From Get On Stream:<\/strong><\/p>\n\n\n\n<ul><li><a href=\"https:\/\/getonstream.com\/how-to-add-a-countdown-timer-to-your-stream-streamlabs-obs\/\" target=\"_blank\" rel=\"noreferrer noopener\">How To Setup A Countdown Timer On Your Stream<\/a><\/li><li><a href=\"https:\/\/getonstream.com\/how-to-crop-in-streamlabs-easy-guide\/\" target=\"_blank\" rel=\"noreferrer noopener\">How To Crop In Streamlabs OBS<\/a><\/li><li><a href=\"https:\/\/getonstream.com\/how-to-setup-instant-replays-in-streamlabs\/\" target=\"_blank\" rel=\"noreferrer noopener\">How To Setup Instant Replay In Streamlabs OBS<\/a><\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Learn how to use browser sources in Streamlabs OBS for URLs, third party widgets and more.<\/p>\n","protected":false},"author":27,"featured_media":5513,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_uag_custom_page_level_css":"","ub_ctt_via":"","footnotes":""},"categories":[98],"tags":[66],"table_tags":[],"acf":[],"featured_image_src":"https:\/\/getonstream.com\/app\/uploads\/2021\/10\/Net-Worth-Template-45.png","author_info":{"display_name":"Scott Wilcox","author_link":"https:\/\/getonstream.com\/author\/dmorneaumiladreusa-com\/"},"uagb_featured_image_src":{"full":["https:\/\/getonstream.com\/app\/uploads\/2021\/10\/Net-Worth-Template-45.png",2240,1260,false],"thumbnail":["https:\/\/getonstream.com\/app\/uploads\/2021\/10\/Net-Worth-Template-45-150x84.png",150,84,true],"medium":["https:\/\/getonstream.com\/app\/uploads\/2021\/10\/Net-Worth-Template-45-300x169.png",300,169,true],"medium_large":["https:\/\/getonstream.com\/app\/uploads\/2021\/10\/Net-Worth-Template-45-768x432.png",768,432,true],"large":["https:\/\/getonstream.com\/app\/uploads\/2021\/10\/Net-Worth-Template-45-1024x576.png",770,433,true],"1536x1536":["https:\/\/getonstream.com\/app\/uploads\/2021\/10\/Net-Worth-Template-45-1536x864.png",1536,864,true],"2048x2048":["https:\/\/getonstream.com\/app\/uploads\/2021\/10\/Net-Worth-Template-45-2048x1152.png",2048,1152,true],"post-thumbnail":["https:\/\/getonstream.com\/app\/uploads\/2021\/10\/Net-Worth-Template-45-270x180.png",270,180,true],"contentberg-main":["https:\/\/getonstream.com\/app\/uploads\/2021\/10\/Net-Worth-Template-45-770x515.png",770,515,true],"contentberg-main-full":["https:\/\/getonstream.com\/app\/uploads\/2021\/10\/Net-Worth-Template-45-1170x508.png",1170,508,true],"contentberg-slider-stylish":["https:\/\/getonstream.com\/app\/uploads\/2021\/10\/Net-Worth-Template-45-900x515.png",900,515,true],"contentberg-slider-carousel":["https:\/\/getonstream.com\/app\/uploads\/2021\/10\/Net-Worth-Template-45-370x370.png",370,370,true],"contentberg-slider-grid-b":["https:\/\/getonstream.com\/app\/uploads\/2021\/10\/Net-Worth-Template-45-554x466.png",554,466,true],"contentberg-slider-grid-b-sm":["https:\/\/getonstream.com\/app\/uploads\/2021\/10\/Net-Worth-Template-45-306x466.png",306,466,true],"contentberg-slider-bold-sm":["https:\/\/getonstream.com\/app\/uploads\/2021\/10\/Net-Worth-Template-45-150x150.png",150,150,true],"contentberg-grid":["https:\/\/getonstream.com\/app\/uploads\/2021\/10\/Net-Worth-Template-45-370x245.png",370,245,true],"contentberg-list":["https:\/\/getonstream.com\/app\/uploads\/2021\/10\/Net-Worth-Template-45-260x200.png",260,200,true],"contentberg-list-b":["https:\/\/getonstream.com\/app\/uploads\/2021\/10\/Net-Worth-Template-45-370x305.png",370,305,true],"contentberg-thumb":["https:\/\/getonstream.com\/app\/uploads\/2021\/10\/Net-Worth-Template-45-87x67.png",87,67,true],"contentberg-thumb-alt":["https:\/\/getonstream.com\/app\/uploads\/2021\/10\/Net-Worth-Template-45-150x150.png",150,150,true]},"uagb_author_info":{"display_name":"Scott Wilcox","author_link":"https:\/\/getonstream.com\/author\/dmorneaumiladreusa-com\/"},"uagb_comment_info":13,"uagb_excerpt":"Learn how to use browser sources in Streamlabs OBS for URLs, third party widgets and more.","_links":{"self":[{"href":"https:\/\/getonstream.com\/wp-json\/wp\/v2\/posts\/5498"}],"collection":[{"href":"https:\/\/getonstream.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/getonstream.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/getonstream.com\/wp-json\/wp\/v2\/users\/27"}],"replies":[{"embeddable":true,"href":"https:\/\/getonstream.com\/wp-json\/wp\/v2\/comments?post=5498"}],"version-history":[{"count":5,"href":"https:\/\/getonstream.com\/wp-json\/wp\/v2\/posts\/5498\/revisions"}],"predecessor-version":[{"id":5515,"href":"https:\/\/getonstream.com\/wp-json\/wp\/v2\/posts\/5498\/revisions\/5515"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/getonstream.com\/wp-json\/wp\/v2\/media\/5513"}],"wp:attachment":[{"href":"https:\/\/getonstream.com\/wp-json\/wp\/v2\/media?parent=5498"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/getonstream.com\/wp-json\/wp\/v2\/categories?post=5498"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/getonstream.com\/wp-json\/wp\/v2\/tags?post=5498"},{"taxonomy":"table_tags","embeddable":true,"href":"https:\/\/getonstream.com\/wp-json\/wp\/v2\/table_tags?post=5498"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}