DEV Community

loading...
Cover image for I've Started to Live Code on Twitch for DEV

I've Started to Live Code on Twitch for DEV

nickytonline profile image Nick Taylor (he/him) Originally published at iamdeveloper.com Updated on ・2 min read

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

Twitch Channel Settings

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.

Adding Twitch API key to OBS stream preferences

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.

OBS display source showing a black screen

It turns out it was just a setting in the Security & Privacy system preferences. Ensure that OBS has access to Screen Recording.

Grant access to Screen Recording under Security & Privacy for OBS

OBS display source working

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:

Discussion (14)

pic
Editor guide
Collapse
michaeltharrington profile image
Michael Tharrington (he/him)

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!

Collapse
shostarsson profile image
Rémi Lavedrine

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.

Collapse
nickytonline profile image
Nick Taylor (he/him) Author

It's on my TODO to get my igloo haha.

Collapse
codenutt profile image
Jared

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. 🎉

Collapse
nickytonline profile image
Nick Taylor (he/him) Author

Nice. Is it a plugin for OBS or a complete replacement for it?

Collapse
codenutt profile image
Jared

It's basically their branded version of OBS. It's a separate app

Collapse
philnash profile image
Phil Nash

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.

Collapse
nickytonline profile image
Nick Taylor (he/him) Author

Nice! I gave you a follow as well. Currently I’m building out some Preact components.

Collapse
mjyc profile image
Michael Jae-Yoon Chung

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.

Collapse
shostarsson profile image
Rémi Lavedrine

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.

And planning to do it again this thursday (2nd April 2020) about this topic. :-)

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

Collapse
nickytonline profile image
Nick Taylor (he/him) Author

Awesome and congrats on your first stream as well!

Noice!

Collapse
scrabill profile image
Shannon Crabill • Edited

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.

Collapse
nickytonline profile image
Nick Taylor (he/him) Author • Edited

I’m streaming again today at 10am Eastern if you want to the in.

Collapse
nickytonline profile image
Nick Taylor (he/him) Author

I've decided on my live coding frequency