Stream to Twitch from your browser!

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.

5 Likes

Yeah, attempting to live stream with this made windows not to respond with the browser freezing, and made stuff slow to very slow on my pc. I had to wait for windows to respond and I had to close down the browser due to this, and then stuff became normal again. I checked the CPU, it was at 100%.

Twitch Test Stream Link: https://www.twitch.tv/videos/660870829

After pressing start streaming after I stopped screen sharing, almost all my memory is being used.

Is your PC recent? Any game/application running at the same time ? Slow connection ? Enough RAM ?

My PC is a old Alienware laptop (ALIENWARE m17xr3 with 16GB of RAM, and Intel Core i7-2760QM @ 2.4GHz (up to 3.3GHz with intel turbo), I had no applications running at the same time. I have fast connection (350MBPS Download, and 10 MBPS Upload, I know that my upload speed sucks and I have XFINITY), and I have enough RAM, it’s 16GB. My PC was able to handle streaming until 2-3 weeks ago, it got capped to 2.39GHz, and the games that I play lags badly due to the CPU Speed using OBS Studio and 100% CPU too.

I tried this the second time, it worked and no issues until I stopped screen sharing and then screen sharing again, and stopping and restarting the stream, and then the 4th time, I started having the memory problem with chrome when starting to stream.

The screensharing issue is a known issue, it’s because you ran into the error I explained

As it groups the sound track and the video track when a stream is started, if one is missing it will stop working on the client side. The server side is still working but it doesn’t get any picture so it sends an empty sound track which makes the stream still run, without any picture.

i faced this problem when my valorant boosting service tried to stream the ranking progress . So we’d tried a lod of apps , until we’d found the twitch . Really useful software for streaming

2 Likes

Sounds like we have a memory leak or something with variables not being cleaned up

I think so too. Try using Developer Tools in your Browser.

Thank you, I’ll look into that asap (working on something else first, will get back to it in few days)