I always enjoyed the idea of live streaming. A few years ago I toyed with the idea of streaming playing games. It never panned out, I liked to use my spare time making things with code.
Roll forwards a couple of years and the subject cropped up again.
Well, there's an idea. Now, I can continue to make demos and things. But, stream it all at the same time and engage with other people. Now that's rad!
There are a few quirks with creating content and not sharing the process. In ye olden days, people would frown upon sharing their secrets.
"Why would you tell them how you moved that div across the screen????!!!! Everyone will start doing it!"
But, we live in a digital age and for the most part, sharing is caring.
With many demos, people often ask "How?". Often there's an opportunity to spin a blog post out of it or even a tutorial. That takes time though. A happy medium is being able to share the process, the result, and then supplement with other material.
And this is where streaming can hit that sweet spot. To hit "Go Live" and let others see the process feels like doing two things at once. I'd be making those things anyway! But now viewers can see the process or even ask questions as it's happening.
A good example would be some of my CSS illustration demos. Peopled asked "How?", I streamed a bunch of them, released them, and then came the CSS Tricks article.
Jhey π@jh3yy
π¨ It's here! π¨
It's the article that I've been asked many times for. I have finally sat down and written it! π€
Want to draw things with CSS? Read this π
css-tricks.com/advice-for-comβ¦17:01 PM - 18 Jun 2020
If you'd tuned into the streams, you were one step ahead of the article.
So where are we going with this? It's a collection of my thoughts and tips for getting started. Along with my set up for those who it interests.
Do it!
If you're even considering it in the slightest, do it!
That' my biggest advice here and why I've started with it. If you close the tab now and go do something else (start streaming?), I've done what I intended.
There is of course a slight caveat here with regards to hardware limitations and we will talk about that.
No one will watch my content
Stream something you want to stream, not what you think you should stream. Want to stream games today? Do it! Want to stream creating Tic Tac Toe in JavaScript? Do it! Want to stream creating a newsletter template? Do it!
You never know who might be watching. And you never know what might inspire someone else. Also, don't assume you're audience will all be like you. I've met people on stream who are from completely different walks of life.
Surprise yourself.
It's worth noting that people enjoy relatable content. Don't worry if you get stuck on a problem for five minutes or can't spot a typo for ten. People love seeing that, it shows you're human too!
Remember everyone is on their own journey/trajectory. It's not a race. Embrace the experience.
Let's dig into the fun stuff, the setup!
I'm still learning and that's one thing I love about picking up something new, there's loads to learn. This is what I'm currently doing and I'm sure there are things I will improve and change as I go on.
Broadcast settings
Most of us will be reaching for OBS or Streamlabs OBS here. The auto-configuration wizard for both will get you most of the way in my experience.
After that, there are some things to consider. How you output to your viewers. My advice? Set your display resolution to 1080P(1920x1080) and output at 720P(1280x720). It's no good using an ultrawide screen and streaming that to your users who are viewing at a 16:9 aspect ratio. Believe me, I did it! I was streaming a 3440x1440 screen and it did not look good.
Once the screens are set up, bump up the font sizes in your editor and dev tools for people to see. We have a cool reference on Egghead for font size and removing distractions in VSCode.
Setting the scene
I've got a bunch of scenes set up but I'll go over the most important ones that you'll likely need to start.
Live coding, etc.
This scene will be a window capture of the screen you're working on. I didn't start with my webcam on, but, I recommend it. People seem to relate and engage more when they see the face behind the bear! As opposed to when I first started and didn't show anything. You can also put other things in your scenes such as your social handles or an avatar. I'll touch on that later. You can also add alert boxes for when someone follows, etc. Or you can get a little creative and allow users to interact through chat. I allow users to fire air horns and show party corgis ha.
Privacy
This is a scene that shows something to your viewers whilst you do things you don't want them to see. For example, putting in a password, filling out API keys, etc. This can be anything you like. Even some text like "This isn't for you!" ha. This is very important if you don't have a second monitor handy.
As for other scenes. When you're comfortable, you can start adding other scenes to your stream setup. I have one for loading/waiting for example too.
Music
Play some background music in your streams. This makes your stream a little less awkward for viewers when you're sitting there in silence trying to work something out!
Remember though, you can't play the latest chart hits, etc. Your saved broadcasts will all be muted...
I highly recommend StreamBeats from Harris Heller.
Hardware
This is the real fun part.
Jhey π@jh3yyCables π
Capture card set up works π₯³ I'm amazed I can pass through 3440 x 1440 with a capture card that cost less than $20. Technology π€―15:17 PM - 20 Jun 2020
Before we dig in though, let's be clear, you don't need my set up to make a great stream. But, I have a soft spot for getting things set up the way I want them so I do my research and play around with things.
I'll go through the two setup styles I've used and list hardware at the bottom.
Streaming from one machine
You should be able to stream from your machine in some way. I kinda feel like there's a little stigma here that you need a business-grade 12 core CPU and SLI GPUs to get started ha.
That said, it's hard to tell if things will work for you. There are things to consider such as network, hardware specifics. The best way to know? Try. You can even try local recording first to test out the different scenes and get a feel for the software.
Dual monitors are ideal so you can keep OBS on a separate screen.
The majority of my streaming journey so far has been all done from one machine. An i7 Mac Mini with an ethernet connection. It was straightforward to set up. The only trick was capturing desktop audio for music and any sound I'm using for my work.
The line in loop trick for Mac
This deserves its own little section as it might help someone else out. If you don't want to use software to capture your desktop audio in OBS, you can do it with hardware.
If you can get a hardware line-in and a headphone splitter cable, you're golden. I have a CalDigit TS3+, but, you can get USB audio line-in for Mac. The trick is to use the splitter with one AUX cable looping back to the line-in and the other for headphones.
Thank me later if this helps you out! I found this super useful when I worked it out ha.
A dedicated streaming rig
This is the ideal set up. Use your coding machine capturing the output and streaming that from another machine.
This offloads a bunch of the heavy lifting that streaming entails to that second machine.
That second machine will run OBS and stream the output from your work machine. It can also run any other things you might need.
There are two key components in this setup. The USB capture card and a USB switch.
A capture card does what it sounds like, captures output from a machine, and sends it to another. Search for capture cards and you'll see various options costing hundreds of dollars. But that might not be necessary. The capture card I'm using costs a fraction of that. We'll see how well it holds up. I've left an escape hatch in my cable management in case ha.
The USB switch allows us to share peripherals between two machines. For example, I'm using my webcam on both machines and when I switch machine, I hit the switch.
Budget capture cards!
So I picked up two different options here thinking that neither of them would work as a solution ha. To my surprise, both work!
The first is a very basic HDMI capture card featured on EposVox. It's great and does what it says.
But, how do you capture that output and still see it on your monitor so you can use it? You'll need an HDMI splitter. I had mixed results here. But, it does work! I can only ever have 1080P output on my monitor though. That's not ideal on a 3440x1440 screen when I'm not streaming ha. The option here might be an HDMI switch to hot-swap when I'm not streaming.
But no, it's not necessary. Let me introduce option number two. Whilst hunting for the first option, I came across this option and thought "Why not?". These cards are less than $20 on eBay. It's very much like the first but this one has a loop through feature too! Plugged it in and got it all set up. It supports my full resolution for the loop through! Wow. A USB capture card that can capture at 1080P and supports 4K on the loop. Technology is amazing.
I can't say how long it will work for but I'm optimistic. I've left that escape hatch in the cables if I need it. I'd likely get another one ha.
What I'm using
So what have I got going on? Here's a diagram of how my set up works. If you think that's confusing, you should see the cables!
I'm also using three monitors. The two large are for work. And then a much smaller 10" monitor is a reference monitor. Both machines are connected to the big monitors so I can switch between. But, when I stream code, the little 10" becomes a dedicated OBS screen plugged into my streaming rig.
Jhey π@jh3yyYes! π₯³ All set up. Little 10 inch monitor is the streaming rig and the other two are the Mac π
Rad! Will try a test steam later π€18:09 PM - 20 Jun 2020
- Mac Mini (3.2GHz i7, 32GB RAM)
- Dell U3415W 34" monitor
- Dell U2515H 25" monitor
- 10" reference monitor
- CalDigit TS3+ Dock
- Bose companions 2 speakers
- UGREEN 4 port USB switch
The streaming rig.
- Silverstone SG13
- AMD Ryzen 5 3600
- EVGA KO RTX 2060
- Corsair 32GB Vengeance RAM
- 1TB M.2 WD SSD
- NZXT Kraken M22
And that's it! Any questions, don't hesitate! Reach out on Twitter and say "Hey!"
Top comments (9)
I started (sporadically) streaming some of my CSS art as well, but with a very basic setup using just my MacBook (for audio, video and screen sharing) and my phone or iMac next to it to read the chat. π
Great CSS work btw! I should try to catch one of your next streams
That's a heavyduty setup! Good luck with the streaming. Your stuff on codepen is awesome, so I'm sure you will grow an audience quickly! π
Thank you Rob! Appreciate that π
Fingers crossed! π€
One of the few streams I try to catch a bit of every time. Keep it up!
Thank you Alex! Appreciate you dropping by! π
This thorough guide is great for anyone to get started.
As someone that's been wanting to get into streaming, this is the push I needed to finally make that happen. Thank you for sharing this information, I'm going to do it!
Awesome! Very happy to hear that.
Don't forget to share your handle here when you do! π
Wow, thanks for sharing dude.
--LawrenceDCodes from Twitter
twitter.com/LawrenceDCodes/status/...