Yesterday, I did my first official live coding on Twitch. If you're interested in following me on Twitch, I'm nickytonline there as well.
It felt very natural live-coding. I talked to my audience pretty much the whole time. Thank you to the 12 people that watched. 👏🏻 My colleague @maestromac was kind enough to jump in on the chat to say hi.
We're in the second week of our development cycle at DEV, so I was working on building out some Preact components to build out our new comment subscription component.
I haven't decided on the frequency of live-coding yet, but I'm hoping to do it at least twice a week.
The rest of this article will assume you are on macOS, but I imagine the process is pretty much the same.
If you are new to streaming like me, the defacto tool appears to be OBS Studio.
Before installing OBS, ensure that Twitch is set up correctly. Assuming you've created your Twitch account, navigate to your channel settings, e.g. https://dashboard.twitch.tv/u/nickytonline/settings/channel
Two things to note here. One, you will need to copy the Primary Stream Key. This is required for OBS so that it can stream to Twitch. The other thing to note is that Store past broadcasts should be enabled (assuming you want to save your broadcasts). I forgot to do this initially. Since most will have a free account, broadcasts are stored for up to 14 days and then scrapped.
Once OBS is installed, go to the OBS preferences and add your Twitch Primary Stream Key.
When you load up OBS you are presented with a blank scene. The scene is what you will use to place your webcam in the stream as well as your display output. You can add a lot more to it, but let's keep things simple.
If you are going to stream, you absolutely need a second monitor. I run OBS on my laptop screen and the display capture is my external monitor. If you're interested in my setup, check out my uses page.
I got everything set up but noticed my display source in the scene was completely black. I was Googling to see if it was a macOS version, a hardware issue, etc.
It turns out it was just a setting in the Security & Privacy system preferences. Ensure that OBS has access to Screen Recording.
From there as soon as you are ready to stream on Twitch, simply click the Start Streaming button in the Controls section at the bottom right of the OBS window.
Happy streaming!
UPDATE APR 3, 2020:
Top comments (14)
I'm curious — when streaming on Twitch, can you use a custom background. Not sure if it's called a green screen background, but that's how I always think of it...
In short, I'm wondering where your igloo is, haha!
Yes you can.
In OBS, you just have to add an image source behind everything and set the background image you want.
You can even change it scene by scene.
The most fun thing are stinger transitions. You can see them on big streamers, but they are very easy to set up.
And for the camera, you can use a green screen and simulate a location. Very easy to set up as well.
It's on my TODO to get my igloo haha.
Nice! Just an FYI, Streamlabs OBS is now available for Mac! It provides a considerably larger set of tools for stream overlays.
Congrats on starting the stream journey! Something I've been dabbling with recently as well. 🎉
Nice. Is it a plugin for OBS or a complete replacement for it?
It's basically their branded version of OBS. It's a separate app
This is cool! I've followed, hopefully I can check out some of your live coding and see more of how DEV is put together.
I've been live coding on Twitch recently too, playing around with various projects in React and Node.
Nice! I gave you a follow as well. Currently I’m building out some Preact components.
I've been also interested in doing live coding myself and had a time setting up a broadcasting tool my desktop screen so I'm glad to see this post! In fact, for the challenges of setting up a broadcasting tool, I thought about using YouTube live, it seems much easier to setup and seems to help me achieve similar goals, e.g., live, interactive, collaborative online coding?
Have anyone used YouTube live for live coding? Any thoughts on its pros & cons compared to twitch?
I saw other posts online:
but was curious about dev community's experience.
Love it.
I think that this moment at home makes all of us more ready to streaming, sharing, etc.
I was thinking about this for a long time now and did my first stream last Wednesday.
First Streaming Ever - Git Security
Rémi Lavedrine ・ Mar 25 ・ 1 min read
And planning to do it again this thursday (2nd April 2020) about this topic. :-)
Password Attacks CounterMeasures ⚔️
Rémi Lavedrine ・ Mar 31 ・ 6 min read
I did not have any live audience for my first stream but loved the process anyway.
I hope to have at least one more on Thursday. :-D
Awesome and congrats on your first stream as well!
Perfect timing! I've been tuning in to a lot more lifestreams recently and I was looking for more people to follow. I'm thinking about dabbling with streaming on the web design/photoshop fun side.
I’m streaming again today at 10am Eastern if you want to the in.
I've decided on my live coding frequency