Disclaimer: When I say twitch-like I'm referring to the core functionality of allowing an user to make an RTMP stream available to others. There's limited chat and explore functionality builtin to this app though.
Before I go into the coding aspects, I want to answer one question: Is this even possible?
In a typical streaming set up you'd use something like Open Broadcaster Software, XSplit, or even pure ffmpeg to capture and manipulate video. You would configure that software to send video over the RTMP protocol to whatever platform you were using.
My approach is slightly more complicated, instead of sending video to an external RTMP server which cannot be run over HTTP(s) in many PaaS, we run a local RTMP server on the streamer's computer that receives and turns the video into m3u8 and ts files (video files not to be confused with typescript which uses the same extension). These files can then be uploaded to a server accessible to the public during the stream and now all you need to do is embed something like video.js on the receiving page that will retrieve and decode the m3u8 playlist and ts chunks from the centralized server.
I actually went this far in a previous project, with two problems
- I didn't really care much for the ui so the color scheme and responsiveness was really annoying to some people.
- I forgot to optimize to reduce latency.
I started out with frontend first. I wanted to learn some new things this time, so I took next.js out for a spin. Integrating it with material ui the ui framework I choose for the project wasn't too hard.
For now, I managed to create some pages navigable through a drawer.
Now it's time to integrate some basic authentication using Netlify Identity! I like using identity because all you need to do is put a div for the sign in/sign up button and login status to appear in and boom, you can now get a jwt to attach to your requests. If you don't care for the premade widget, then you also get the flexibility of rolling your own login components. After you get the frontend part of this done, in your netlify function you can get the user's email, full name in some cases and identifier.
Another simple app of mine using the netlify identity's widget
However the simplicity of the identity widget can also come with some drawbacks. For example, to test user account creation I had to deploy to netlify a lot in order and then logout and log back in to trigger a webhook associated with identity. I had to do this so much that github made me reauthorize the application because the activity looked suspicious.
After that I spent quite a lot of time figuring out how supabase my persistent database of choose worked. I finished the day feeling accomplished because I had managed to finish the portion of the code that generates an account for people who sign up.
From here, the user interface was smooth sailing with nextjs. The user experience is a bit uncomfortable for most people but it's functional for now
Now we're moving on to the fun part, getting an actual live stream to work through netlify. The idea is to use redis to store video chunks because this would offer both
- Speed
Cost-efficiency as we can get redis servers with enough storage for our needs easily.
Afterwards I was able to complete the core-functionality of the project, streaming video with acceptable delay.
The thing that hackathons teach the most for me is probably time management. My first hackathon project for a 2-day hackathon was the result of really rushed scheduling. This project originally started more ambitious but I overestimated how much time I could allocate it. However a nice thing that happens is I work to improve projects I start from hackathons so eventually this might become a useful application for some people. That's all for now, I don't want to bore readers with too much technical specifics :)
Thanks to #Netlify for creating a wonderful platform.
#NetlifyHackathon
Things to improve on:
- Clean the code to not make it look like a nightmare/mess to people with more experience
- Implement chat via supabase realtime
- Write a self-hosting guide
- Optimize for higher bitrates
- Write a load balancing guide, netlify functions are stateless so scaling them is a piece of cake (well until the database dies)
By the way good luck to the about hundred other devs on their entries :)