Hi! I’m Ben Greenier — I’m an engineer at Microsoft working to create awesome open source projects with our partners. We get to create software to help solve really tricky problems, and share our stories as we go. This means that as part of my job I get to play with lots of new technologies, learn how to use them, and help other folks do the same.
What is Overlayed
Recently I've been thinking about how we might create tools that can enable broadcasters to interact with their viewers in new ways. I spend a lot of time watching broadcasters on platforms like twitch, and feel pretty strongly that today's tools for interaction aren't where they could be. I'd like to experiment with some ways I think this interaction could be improved. Overlayed is the first meaningful step toward this experimentation.
Overlayed is a tool that enables streamers to see their overlays atop their desktop. I built it to interact more seamlessly with my viewers. If you want to interact in faster, more interesting ways it may be built for you too. ❤️
I'll be honest, I haven't done much work on this project over the last year. Part of that is due to some big life changes (international moves are time consuming 🎉). However, part of that is because I wasn't quite sure where I wanted the project to go. That last bit has changed - now I think I know what I want Overlayed to become.
React-powered
At it's core, Overlayed is a platform for running small visualizations that are surfaced as a part of a 2D video feed. An explicit goal of the project is for those small visualizations to be easy to create as well as consume. React seems like a logical choice for this creation, given it's adoption numbers and (in my opinion) it's ease of use.
In Overlayed, broadcasters pull in React components, align them on a grid, and get streaming. That means creation of new overlays, is as simple as writing a new React component. For instance, take a look at this clock overlay. This also means that if something already exists as a React component (say, on NPM, for instance) then it's already a valid overlay.
Okay okay - Nothing is ever that simple. Of course there's configuration to consider. Balancing broadcaster use-ability and developer-like options (sometimes your component just needs 2129 props 😉) is quite a trick. So far, my approach is to use a contribution model, just like VS Code. Consider the clock example from above - it supports a configurable locale to render time in. From a developer perspective, the author simply demands that this configuration be contributed. Once that's in place, Overlayed knows to prompt the broadcaster for such configuration. It does so using contributes-form a small module that generates a webform using the json-schema content from the contributes entry. For the clock example, the end result that the broadcaster sees looks like this:
I think this is a pretty solid model, but there's definitely work to be done, and room for feedback.
Electron-support
One of the value propositions of Overlayed (in my opinion) is that it leverages electron to create full-screen overlays that can be embedded in your desktop, atop all your windows, or behaving like normal windows. This means that as a broadcaster, you're able to see the content your overlays provide, in exactly the same way your viewers can. Electron makes this possible, giving us a cross-platform way to create these os-specific windows (and behaviors) as well as enumerate overlays (remember, these are react components) from disk.
The experience this enables is pretty cool. On my dev machine right now I have a folder in my user directory of overlays, and when I start up overlayed, electron loads them into a transparent full screen window on top of all my other stuff.
Again, there's still work to be done (especially with regard to the interaction model - ie: can you type into an overlay? Always? Sometimes?) but I'm pretty excited about where things are headed.
Roadmap
I've never come up with a roadmap for a side project before, so I fully expect this to be a bit off. That said, here's the stuff that I'd like to focus on, to improve Overlayed in the near future. If you'd like to help, starting a conversation with me about one of these things is probably the best place to begin.
-
New product site(Live at overlayed.app) - Find reliable cross-platform testers
- Prettier configuration UI
- Support running in browser (without electron)
- Better dev environment
- Better overlay alignment options
- Layout management (different, loadable layouts)
- Camera example
- Audio example
- WebGL example
- Testing. There is currently no testing. There should be testing. 😓
- Overlay "store"
That's all for now
Phew - looks like a lot of stuff ahead, better get off DEV and go write some actual code. Thanks for reading! In the future, I'll post deeper dives into the technology choices (and hurdles) that made Overlayed into what it is today. As we add new stuff going forward, I'll be sure to post about that too (this post is part of a series just for this kind of thing).
If you'd like to support this work financially, buy me a coffee. If you'd like to support it with love, follow me on twitch and/or twitter.
💙🌈
-Ben
Top comments (0)