Overlay is a web app for designing and controlling graphics which can be overlaid on a video live stream using software such as OBS.
Built using sveltekit, prisma, tailwind and lucia, overlay is designed to be deployed to serverless environments such as vercel and communicate with corresponding websocket server overlay-server using socket-io.
Currently deployed on vercel in the UK so may be a bit sluggish if you are further afield!
overlay.mp4
DATABASE_URL mysql:// address to database
WS_URL http:// address for server function to communicate with socket.io websocket server
PUBLIC_WS_URL wss:// address for client javascript to communicate with socket.io websocket server
GITHUB_CLIENT oauth github client id
GITHUB_SECRET oauth github secret
The basic foundation is built but the ability to customise the graphics is seriously lacking!
Still to do:
-
Add font, position, rounded corner options to graphics
-
Allow multiple text fields per graphic for job title etc
-
Make better use of svelte's transition api and have multiple transition options
-
Add dynamic graphic types such as countdown timers
-
Have a play with lottie-web to try integrating some advanced animations