I was interested in learning how to stream from a browser, so I looked into stuff on the Internet and started building my own Twitch streaming website ! You can remix it and start streaming on Twitch whenever you want !
v1 -
First version, very basic, you can only stream your screen, it’s using a canvas and it’s then sent to the backend where it is sent to Twitch. It’s based off an example made by Kaaro : https://github.com/karx/kaaroStream-bridge. After that I started working on an improved version based on an other example by Mux (a streaming plateform like Twitch). The only source implemented is the screencapture without sound.
https://twitch-streaming-v1.glitch.me/
v2 -
v2 is a remix of Mux’s work (https://mux.com/blog/the-state-of-going-live-from-a-browser/) which was made in Typescript, it resembles a lot Kaaro’s Stream Bridge. Instead of forwarding the stream to Mux, it forwards it to Twitch. No screencapture, only the camera with sound.
https://twitch-streaming-v2.glitch.me/
v3 -
v3 is a Javascript port of Mux’s example with few additions. It’s the base of v4, which is the most advanced version yet. It prints all video inputs on a canvas, then it take the camera’s sound track and sends the audio and the video (taken from the canvas) to the server, which then forwards it to Twitch. Supports both screencapture (poorly) and camera with camera sound (no screencapture sound).
https://twitch-streaming-v3.glitch.me/
v4 -
v4 is the most advanced version of the project and probably the last open source version as I’ll probably take the project on a higher scale as soon as possible.
The way the canvas is printed changed, it allows “smarter” layers (v3 had no priority order when printing, it was sending stuff without a predefined order which was dumb). The back-end was changed so it can handle a stream without audio, it creates and empty track when no audio is provided (Twitch sends an error when the audio cuts and not the video). It’s now possible to adjust the size of the camera on the screen, all inputs can be activated/deactivated. This version is still in the work and is tested using a Raspberry Pi 4 B and 4 gb of RAM (and all the other versions as well). It supports camera and screencapture, as well as all sounds from all sources.
Sadly the connection is stopped if a screencapture with its sound is stopped as the coded sound tracks cannot handle this yet. It works perfectly without sound.
https://twitch-streaming-v4.glitch.me/
v5 -
v5 is not in the work yet, but will pretty much wrap things up. v4 will be the biggest addition and v5 will add even more customization (layer creation, adding pictures, Twitch API support). Its additions will heavily be based on my work on StreamNotifier which is currently in development. This Discord bot allows real-time Twitch notifications and counters. My experience with the Twitch API will allow me to bring the same services to the Twitch Streaming project in a short time before final release.
Some PCs might have difficulties when it comes to recording and playing games at the same time. If your PC is slow and cannot support a game like Valorant and Chrome at the same time, I doubt it will be possible for you to use this project at its best as its using ressources intensively when recording your screen and the camera at the same time. Camera recording should be ok for everyone and screenrecording too as long as they’re not brought together at the same time.
I recommand having the project on its own browser window as sometimes the resolution drops when screenrecording if the page loses focus for a certain amount of time (a matter of minutes, it’s not instantly dropped). If the browser (not the window) loses its focus it should be ok.
