{"id":422,"date":"2022-09-26T12:48:07","date_gmt":"2022-09-26T12:48:07","guid":{"rendered":"https:\/\/blog.rackemapp.com\/?p=422"},"modified":"2024-04-03T14:57:43","modified_gmt":"2024-04-03T14:57:43","slug":"streaming","status":"publish","type":"post","link":"https:\/\/blog.rackemapp.com\/?p=422","title":{"rendered":"Streaming"},"content":{"rendered":"\n<p>RackEmApp has some functionality built in which allows streamers to add an &#8220;overlay&#8221; to their streams. These overlays can be used in many types of stream software that support a web page\/URL overlay, but we have tested and proven it working in in <a href=\"https:\/\/streamlabs.com\/\">StreamLabs <\/a>and <a href=\"https:\/\/obsproject.com\/\">OBS<\/a>. <\/p>\n\n\n\n<p>Additionally, we also support the use of <a href=\"https:\/\/blog.rackemapp.com\/?p=739\">StreamDeck <\/a>via configured Hotkeys in <a href=\"https:\/\/blog.rackemapp.com\/?p=443\">Referee <\/a>mode.<\/p>\n\n\n\n<p>Our streaming overlay displays and automatically updates based upon score and changes in frames relating to:<\/p>\n\n\n\n<ul>\n<li>League logo<\/li>\n\n\n\n<li>Competition Round\/Division Name<\/li>\n\n\n\n<li>Shot Clock<\/li>\n\n\n\n<li>Match Clock<\/li>\n\n\n\n<li>Sponsor Banners<\/li>\n\n\n\n<li>Breaker<\/li>\n\n\n\n<li>Venue<\/li>\n\n\n\n<li>Table<\/li>\n\n\n\n<li>Best Of\/Race To<\/li>\n\n\n\n<li>Home and Away Entries<\/li>\n\n\n\n<li>Avatars<\/li>\n\n\n\n<li>Colour of ball in play<\/li>\n<\/ul>\n\n\n\n<p>And it updates this via whatever method the match is using to score. That could be via the <a href=\"https:\/\/blog.rackemapp.com\/?p=629\">Scoreboard\/Tablet Scoring<\/a>, it could be through the Dashboard (Fixtures or Competition Management), or it could be through  <a href=\"https:\/\/blog.rackemapp.com\/?p=443\">Referee <\/a>mode.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"534\" src=\"https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2023\/04\/Stream-Overlay-1024x534.jpg\" alt=\"\" class=\"wp-image-728\" srcset=\"https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2023\/04\/Stream-Overlay-1024x534.jpg 1024w, https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2023\/04\/Stream-Overlay-300x156.jpg 300w, https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2023\/04\/Stream-Overlay-768x400.jpg 768w, https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2023\/04\/Stream-Overlay-1536x801.jpg 1536w, https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2023\/04\/Stream-Overlay-1200x626.jpg 1200w, https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2023\/04\/Stream-Overlay.jpg 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Getting Your Stream Overlay URL<\/h2>\n\n\n\n<p>Stream overlays are operated by table. This is because typically a camera is setup for a specific table in a specific venue. <\/p>\n\n\n\n<p>Each table has a specific stream link that you can use to plumb into your stream software. These can be found in <strong>League Management &gt; Venues<\/strong> and then click the venue you want to see the tables for.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"518\" height=\"465\" src=\"https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2023\/04\/image-33.png\" alt=\"\" class=\"wp-image-729\" srcset=\"https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2023\/04\/image-33.png 518w, https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2023\/04\/image-33-300x269.png 300w\" sizes=\"(max-width: 518px) 100vw, 518px\" \/><\/figure>\n\n\n\n<p>The URL is constructed from https:\/\/www.rackemapp.com\/stream\/{tablecode} where you replace {tablecode} with the code of the table. For ease of use this is suggested to you below the table and you can press the button to copy the link to the clipboard.<\/p>\n\n\n\n<p>The table can also be put in Test Mode to assist you in postitioning your overlay without a need to assign a match.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"470\" height=\"302\" src=\"https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2023\/05\/image-2.png\" alt=\"\" class=\"wp-image-767\" srcset=\"https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2023\/05\/image-2.png 470w, https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2023\/05\/image-2-300x193.png 300w\" sizes=\"(max-width: 470px) 100vw, 470px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Using Shot and Match Clocks<\/h3>\n\n\n\n<p>Shot and match clocks can be displayed if the match is configured to do so by adding these URL parameters to the end of your stream URL. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"501\" height=\"557\" src=\"https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2023\/04\/image-35.png\" alt=\"\" class=\"wp-image-731\" srcset=\"https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2023\/04\/image-35.png 501w, https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2023\/04\/image-35-270x300.png 270w\" sizes=\"(max-width: 501px) 100vw, 501px\" \/><\/figure>\n\n\n\n<p>If you plan on using these at all, we recommend including them, as if the match is not configured to use them it will omit these anyway.<\/p>\n\n\n\n<ul>\n<li><strong>Shot Clock Only:<\/strong> ?shotclock=true<\/li>\n\n\n\n<li><strong>Match Clock Only: <\/strong>?matchclock = true;<\/li>\n\n\n\n<li><strong>Shot and Match Clock: <\/strong>?shotclock=true&amp;matchclock=true<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Set a Match To Stream<\/h2>\n\n\n\n<p>Before you configure the overlay in your stream software, you need to set a match to stream there (Otherwise you won&#8217;t see the overlay).<\/p>\n\n\n\n<p>This is done in various places of the Admin Dashboard. Either in Fixtures and Results, or any competition match. Basically, anywhere you see this symbol.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"772\" height=\"111\" src=\"https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2022\/09\/image-45.png\" alt=\"\" class=\"wp-image-436\" srcset=\"https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2022\/09\/image-45.png 772w, https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2022\/09\/image-45-300x43.png 300w, https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2022\/09\/image-45-768x110.png 768w\" sizes=\"(max-width: 772px) 100vw, 772px\" \/><figcaption class=\"wp-element-caption\">Look for the Cast icon<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"53\" src=\"https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2023\/04\/image-36-1024x53.png\" alt=\"\" class=\"wp-image-732\" srcset=\"https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2023\/04\/image-36-1024x53.png 1024w, https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2023\/04\/image-36-300x16.png 300w, https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2023\/04\/image-36-768x40.png 768w, https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2023\/04\/image-36-1200x62.png 1200w, https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2023\/04\/image-36.png 1307w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>This will open you a box showing you your presentation options.<\/p>\n\n\n\n<p>You can get a link for &#8220;Big Screen Mode&#8221; which is a URL\/screen you can display on a TV. <\/p>\n\n\n\n<p>But to set a match to be streamed, simply choose the table you want to stream the match to and press <strong>Stream Match<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"486\" height=\"632\" src=\"https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2023\/04\/image-37.png\" alt=\"\" class=\"wp-image-733\" srcset=\"https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2023\/04\/image-37.png 486w, https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2023\/04\/image-37-231x300.png 231w\" sizes=\"(max-width: 486px) 100vw, 486px\" \/><\/figure>\n\n\n\n<p>This match is the one that will be displayed for this table until the next one is streamed to the table. So in order to stream the next match, simply identify the next match and set it to the relevant table, and the overlay will auto-update with the match you change it to!<\/p>\n\n\n\n<p><strong>Note<\/strong>: Doing this will also push any configured Scoreboard assigned to that table, so you have a fully integrated experience. using the scoreboard is a supported method for live scoring and updating the stream overlay.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Stream a Standalone Match<\/h2>\n\n\n\n<p>If you want to stream a standalone match, create a <a href=\"https:\/\/blog.rackemapp.com\/?p=691\">Challenge Match<\/a>.<\/p>\n\n\n\n<p>This will give you the same streaming options and ability to use <a href=\"https:\/\/blog.rackemapp.com\/?p=443\">Referee <\/a>mode to drive the stream overlay as with any other match.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Configuration in Stream Software<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">OBS Project<\/h3>\n\n\n\n<p>In your Sources list, add a new source from Browser.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"375\" height=\"563\" src=\"https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2022\/09\/image-40.png\" alt=\"\" class=\"wp-image-424\" srcset=\"https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2022\/09\/image-40.png 375w, https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2022\/09\/image-40-200x300.png 200w\" sizes=\"(max-width: 375px) 100vw, 375px\" \/><figcaption class=\"wp-element-caption\">Add source<\/figcaption><\/figure>\n\n\n\n<p>Give your course a name. As this is a unique URL for a table, it makes sense to name it something that makes it obvious which table it is for, so you can quickly reuse it later.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"363\" height=\"357\" src=\"https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2022\/09\/image-41.png\" alt=\"\" class=\"wp-image-425\" srcset=\"https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2022\/09\/image-41.png 363w, https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2022\/09\/image-41-300x295.png 300w\" sizes=\"(max-width: 363px) 100vw, 363px\" \/><figcaption class=\"wp-element-caption\">Name the source<\/figcaption><\/figure>\n\n\n\n<p>Paste your URL into the URL box and assign the height and width of the overlay, which is different depending on your screen setup.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"728\" height=\"622\" src=\"https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2022\/09\/image-43.png\" alt=\"\" class=\"wp-image-427\" srcset=\"https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2022\/09\/image-43.png 728w, https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2022\/09\/image-43-300x256.png 300w\" sizes=\"(max-width: 728px) 100vw, 728px\" \/><figcaption class=\"wp-element-caption\">Source setup<\/figcaption><\/figure>\n\n\n\n<p>You can then drag\/resize the window if you need to. You usually want this to fill the screen.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"587\" src=\"https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2022\/09\/image-44-1024x587.png\" alt=\"\" class=\"wp-image-432\" srcset=\"https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2022\/09\/image-44-1024x587.png 1024w, https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2022\/09\/image-44-300x172.png 300w, https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2022\/09\/image-44-768x440.png 768w, https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2022\/09\/image-44.png 1157w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>This is all you need to do! You just need to ensure the sequence of your layers is correct, but thats outside the scope of this tutorial.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">StreamLabs OBS<\/h3>\n\n\n\n<p>Firstly, select the scene you want the overlay to appear on, and press the <strong>Add Source<\/strong> button.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2023\/04\/image-38-1024x640.png\" alt=\"\" class=\"wp-image-734\" srcset=\"https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2023\/04\/image-38-1024x640.png 1024w, https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2023\/04\/image-38-300x187.png 300w, https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2023\/04\/image-38-768x480.png 768w, https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2023\/04\/image-38-1536x960.png 1536w, https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2023\/04\/image-38-1200x750.png 1200w, https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2023\/04\/image-38.png 1602w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>You then get the ability to add something to your scene. Select the <strong>Browser Source<\/strong> button and press <strong>Add Source<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"918\" height=\"714\" src=\"https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2023\/04\/image-39.png\" alt=\"\" class=\"wp-image-735\" srcset=\"https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2023\/04\/image-39.png 918w, https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2023\/04\/image-39-300x233.png 300w, https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2023\/04\/image-39-768x597.png 768w\" sizes=\"(max-width: 918px) 100vw, 918px\" \/><\/figure>\n\n\n\n<p>Make sure you toggle the<strong> Add a new source<\/strong> option and give your source a name &#8211; we recommend naming it after the table you are positioning the camera for. Thn press <strong>Add Source<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"609\" height=\"333\" src=\"https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2023\/04\/image-40.png\" alt=\"\" class=\"wp-image-736\" srcset=\"https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2023\/04\/image-40.png 609w, https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2023\/04\/image-40-300x164.png 300w\" sizes=\"(max-width: 609px) 100vw, 609px\" \/><\/figure>\n\n\n\n<p>You then get the configuration options to set the size. This will be unique for everyone, but it you aren&#8217;t sure, then a width of 1920 and a height of 1080 is fairly standard for widescreens. Then press <strong>Close<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"597\" height=\"802\" src=\"https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2023\/04\/image-41.png\" alt=\"\" class=\"wp-image-737\" srcset=\"https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2023\/04\/image-41.png 597w, https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2023\/04\/image-41-223x300.png 223w\" sizes=\"(max-width: 597px) 100vw, 597px\" \/><\/figure>\n\n\n\n<p>The overlay then appears on your screen. make sure it is set to first on the list of sources to ensure it is on top of your camera feed.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2023\/04\/image-42-1024x640.png\" alt=\"\" class=\"wp-image-738\" srcset=\"https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2023\/04\/image-42-1024x640.png 1024w, https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2023\/04\/image-42-300x188.png 300w, https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2023\/04\/image-42-768x480.png 768w, https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2023\/04\/image-42-1536x960.png 1536w, https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2023\/04\/image-42-1200x750.png 1200w, https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2023\/04\/image-42.png 1603w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">StreamLabs Mobile<\/h3>\n\n\n\n<p>In StreamLabs, the default screen has nothing setup. Click the <strong>Layers <\/strong>button, followed by <strong>Add <\/strong>in order to add the Overlay.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"473\" src=\"https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2022\/09\/IMG_5364-1024x473.jpg\" alt=\"\" class=\"wp-image-428\" srcset=\"https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2022\/09\/IMG_5364-1024x473.jpg 1024w, https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2022\/09\/IMG_5364-300x139.jpg 300w, https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2022\/09\/IMG_5364-768x355.jpg 768w, https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2022\/09\/IMG_5364-1536x710.jpg 1536w, https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2022\/09\/IMG_5364-1200x554.jpg 1200w, https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2022\/09\/IMG_5364.jpg 1792w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Layers<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"473\" src=\"https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2022\/09\/IMG_5365-1024x473.jpg\" alt=\"\" class=\"wp-image-429\" srcset=\"https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2022\/09\/IMG_5365-1024x473.jpg 1024w, https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2022\/09\/IMG_5365-300x139.jpg 300w, https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2022\/09\/IMG_5365-768x355.jpg 768w, https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2022\/09\/IMG_5365-1536x710.jpg 1536w, https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2022\/09\/IMG_5365-1200x554.jpg 1200w, https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2022\/09\/IMG_5365.jpg 1792w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Add Layer<\/figcaption><\/figure>\n\n\n\n<p>You need to add a <strong>Custom Item<\/strong> and then <strong>Add URL<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"473\" src=\"https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2022\/09\/IMG_5366-1024x473.jpg\" alt=\"\" class=\"wp-image-430\" srcset=\"https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2022\/09\/IMG_5366-1024x473.jpg 1024w, https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2022\/09\/IMG_5366-300x139.jpg 300w, https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2022\/09\/IMG_5366-768x355.jpg 768w, https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2022\/09\/IMG_5366-1536x710.jpg 1536w, https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2022\/09\/IMG_5366-1200x554.jpg 1200w, https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2022\/09\/IMG_5366.jpg 1792w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Custom Item<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"473\" src=\"https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2022\/09\/IMG_5367-1024x473.jpg\" alt=\"\" class=\"wp-image-431\" srcset=\"https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2022\/09\/IMG_5367-1024x473.jpg 1024w, https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2022\/09\/IMG_5367-300x139.jpg 300w, https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2022\/09\/IMG_5367-768x355.jpg 768w, https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2022\/09\/IMG_5367-1536x710.jpg 1536w, https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2022\/09\/IMG_5367-1200x554.jpg 1200w, https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2022\/09\/IMG_5367.jpg 1792w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Add URL<\/figcaption><\/figure>\n\n\n\n<p>Paste the URL into the box and save it.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"473\" src=\"https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2022\/09\/IMG_5368-1024x473.png\" alt=\"\" class=\"wp-image-433\" srcset=\"https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2022\/09\/IMG_5368-1024x473.png 1024w, https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2022\/09\/IMG_5368-300x139.png 300w, https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2022\/09\/IMG_5368-768x355.png 768w, https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2022\/09\/IMG_5368-1536x710.png 1536w, https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2022\/09\/IMG_5368-1200x554.png 1200w, https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2022\/09\/IMG_5368.png 1792w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Paste in your URL<\/figcaption><\/figure>\n\n\n\n<p>Resize it in the screen as appropriate &#8211; you want to make it full screen really, and then <strong>Save<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"473\" src=\"https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2022\/09\/IMG_5369-1024x473.png\" alt=\"\" class=\"wp-image-434\" srcset=\"https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2022\/09\/IMG_5369-1024x473.png 1024w, https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2022\/09\/IMG_5369-300x139.png 300w, https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2022\/09\/IMG_5369-768x355.png 768w, https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2022\/09\/IMG_5369-1536x710.png 1536w, https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2022\/09\/IMG_5369-1200x554.png 1200w, https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2022\/09\/IMG_5369.png 1792w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Drag the sizes<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"473\" src=\"https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2022\/09\/IMG_5370-1024x473.jpg\" alt=\"\" class=\"wp-image-435\" srcset=\"https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2022\/09\/IMG_5370-1024x473.jpg 1024w, https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2022\/09\/IMG_5370-300x139.jpg 300w, https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2022\/09\/IMG_5370-768x355.jpg 768w, https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2022\/09\/IMG_5370-1536x710.jpg 1536w, https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2022\/09\/IMG_5370-1200x554.jpg 1200w, https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2022\/09\/IMG_5370.jpg 1792w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Don&#8217;t forget to save<\/figcaption><\/figure>\n\n\n\n<p>Your overlay is running and you can start streaming.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"473\" src=\"https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2022\/09\/IMG_5371-1024x473.png\" alt=\"\" class=\"wp-image-439\" srcset=\"https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2022\/09\/IMG_5371-1024x473.png 1024w, https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2022\/09\/IMG_5371-300x139.png 300w, https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2022\/09\/IMG_5371-768x355.png 768w, https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2022\/09\/IMG_5371-1536x710.png 1536w, https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2022\/09\/IMG_5371-1200x554.png 1200w, https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2022\/09\/IMG_5371.png 1792w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Additional Overlays<\/h2>\n\n\n\n<p>We&#8217;ve added some additional overlays that can enrich your streaming experience for your audience.<\/p>\n\n\n\n<p>On a League Table screen, you can access a simplified league table and live scores list. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"953\" height=\"245\" src=\"https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2023\/01\/image-18.png\" alt=\"\" class=\"wp-image-567\" srcset=\"https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2023\/01\/image-18.png 953w, https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2023\/01\/image-18-300x77.png 300w, https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2023\/01\/image-18-768x197.png 768w\" sizes=\"(max-width: 953px) 100vw, 953px\" \/><\/figure>\n\n\n\n<p>They look odd in a broswer, but adjust the window size in OBS in order to give them a narrow look.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"356\" height=\"328\" src=\"https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2023\/01\/image-19.png\" alt=\"\" class=\"wp-image-568\" srcset=\"https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2023\/01\/image-19.png 356w, https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2023\/01\/image-19-300x276.png 300w\" sizes=\"(max-width: 356px) 100vw, 356px\" \/><\/figure>\n\n\n\n<p>You can also get the live scores for a competition round from the Competition page.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"788\" height=\"450\" src=\"https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2023\/01\/image-20.png\" alt=\"\" class=\"wp-image-569\" srcset=\"https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2023\/01\/image-20.png 788w, https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2023\/01\/image-20-300x171.png 300w, https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2023\/01\/image-20-768x439.png 768w\" sizes=\"(max-width: 788px) 100vw, 788px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"340\" height=\"682\" src=\"https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2023\/01\/image-21.png\" alt=\"\" class=\"wp-image-570\" srcset=\"https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2023\/01\/image-21.png 340w, https:\/\/blog.rackemapp.com\/wp-content\/uploads\/2023\/01\/image-21-150x300.png 150w\" sizes=\"(max-width: 340px) 100vw, 340px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>RackEmApp has some functionality built in which allows streamers to add an &#8220;overlay&#8221; to their streams. These overlays can be used in many types of stream software that support a web page\/URL overlay, but we have tested and proven it working in in StreamLabs and OBS. Additionally, we also support the use of StreamDeck via [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[],"_links":{"self":[{"href":"https:\/\/blog.rackemapp.com\/index.php?rest_route=\/wp\/v2\/posts\/422"}],"collection":[{"href":"https:\/\/blog.rackemapp.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.rackemapp.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.rackemapp.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.rackemapp.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=422"}],"version-history":[{"count":10,"href":"https:\/\/blog.rackemapp.com\/index.php?rest_route=\/wp\/v2\/posts\/422\/revisions"}],"predecessor-version":[{"id":768,"href":"https:\/\/blog.rackemapp.com\/index.php?rest_route=\/wp\/v2\/posts\/422\/revisions\/768"}],"wp:attachment":[{"href":"https:\/\/blog.rackemapp.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=422"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.rackemapp.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=422"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.rackemapp.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=422"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}