https://github.com/dacurse/league-ranked-overlay

Web app that allows you to create a dynamic overlay in OBS showing your League of Legends' ranked stats.
https://github.com/dacurse/league-ranked-overlay

league-of-legends obs overlay reactjs remix-run streaming tailwindcss typescript

Last synced: about 1 month ago
JSON representation

Web app that allows you to create a dynamic overlay in OBS showing your League of Legends' ranked stats.

• Host: GitHub
• URL: https://github.com/dacurse/league-ranked-overlay
• Owner: DaCurse
• License: mit
• Created: 2022-03-28T18:30:55.000Z (almost 3 years ago)
• Default Branch: master
• Last Pushed: 2022-06-11T21:34:32.000Z (over 2 years ago)
• Last Synced: 2024-11-07T20:40:58.018Z (3 months ago)
• Topics: league-of-legends, obs, overlay, reactjs, remix-run, streaming, tailwindcss, typescript
• Language: TypeScript
• Homepage: https://overlay.dacurse.xyz/
• Size: 3.54 MB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# League Ranked Overlay

[![🚀 Deploy](https://github.com/DaCurse/league-ranked-overlay/actions/workflows/deploy.yml/badge.svg)](https://github.com/DaCurse/league-ranked-overlay/actions/workflows/deploy.yml)

**Try it live: **

![Full Example](/images/example.png)

![Compact Example](/images/example_compact.png)

This web app allows you to create a dynamic Browser Source overlay to display your League of Legends ranked stats.

After generating a link via the form, create a Browser Source in OBS and set the URL to the generated link.

## Creating a Browser Source

To use the overlay in OBS, head on to the website to generate a link and copy it.

Then, in OBS, click on the '+' under the "Sources" panel, and pick "Browser":

![Adding a new browser source](/images/obs1.png)

Create the browser source, and then paste the generated link in the URL field:

![Setting the URL](/images/obs2.png)

You can also change the width and the height to crop the size of the browser, 300x100 seems like a good size.

Now just click OK, and you're done! You can move/resize the browser source in the scene, and the overlay will refresh it's information every 20 minutes.