TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

How to Run a Live Coding Stream on Twitch Using OBS

493 pointsby jordanlewisalmost 5 years ago

38 comments

nickjjalmost 5 years ago
One thing that I was surprised not to see in the post was how to deal with editing files that have secrets (such as API keys or email credentials).<p>When I set up OBS, I overlayed a full screen image that says I&#x27;m showing something secret which had nothing but a small webcam feed in the bottom right so folks could still see me but not my desktop. It was assigned to a global hotkey toggle of course.
评论 #23836852 未加载
评论 #23836931 未加载
评论 #23837912 未加载
评论 #23838614 未加载
评论 #23839045 未加载
ghjalmost 5 years ago
Watching good people&#x27;s work-in-progress and debugging process helped me a lot in getting better myself.<p>This is especially true in competitive programming where everyone is solving the same task!<p>Some competitive programming streamers:<p>William Lin: <a href="https:&#x2F;&#x2F;www.youtube.com&#x2F;channel&#x2F;UCKuDLsO0Wwef53qdHPjbU2Q" rel="nofollow">https:&#x2F;&#x2F;www.youtube.com&#x2F;channel&#x2F;UCKuDLsO0Wwef53qdHPjbU2Q</a><p>Errichto: <a href="https:&#x2F;&#x2F;www.youtube.com&#x2F;c&#x2F;Errichto" rel="nofollow">https:&#x2F;&#x2F;www.youtube.com&#x2F;c&#x2F;Errichto</a><p>SecondThread: <a href="https:&#x2F;&#x2F;www.youtube.com&#x2F;channel&#x2F;UCXbCohpE9IoVQUD2Ifg1d1g" rel="nofollow">https:&#x2F;&#x2F;www.youtube.com&#x2F;channel&#x2F;UCXbCohpE9IoVQUD2Ifg1d1g</a><p>Alex Wice: <a href="https:&#x2F;&#x2F;www.youtube.com&#x2F;channel&#x2F;UCQmrwIwzEu8MxplJw9EUcAg" rel="nofollow">https:&#x2F;&#x2F;www.youtube.com&#x2F;channel&#x2F;UCQmrwIwzEu8MxplJw9EUcAg</a><p>All youtube links because I do random old contests on leetcode&#x2F;codeforces and usually at least one of the people above would have a screencast recorded (though unfortunately not always with commentary). Some of them also have twitch.
mrkwsealmost 5 years ago
Jordan was a little vague in terms of how to get the iPad as a source. I know that QuickTime can capture i(Pad)OS devices as an input source so it might be some built in compatibility when the device is connected via lightning&#x2F;USB, but another route is NDI. [1]<p>NDI is doubly useful as it:<p><pre><code> 1. is wireless over the local network 2. allows you to use your phone&#x2F;tablet&#x27;s camera as a video source, which can be a reasonable webcam stand in (although latency will never be as good, so possibly better as a sort of secondary vanity camera) (3. definitely works on Windows) </code></pre> There are apps on iOS that will share the screen content and camera content and a quick google seems to surface the same for Android.<p>As someone who used to work in TV too, the importance of good lighting cannot be stressed enough. It doesn&#x27;t have to be expensive, but a reasonable, ideally diffuse source of light will make the biggest improvement to your stream vs an expensive camera (and some webcams may need manual adjustment via OBS to best utilise the available light).<p>[1]: <a href="https:&#x2F;&#x2F;obsproject.com&#x2F;forum&#x2F;resources&#x2F;obs-ndi-newtek-ndi%E2%84%A2-integration-into-obs-studio.528&#x2F;" rel="nofollow">https:&#x2F;&#x2F;obsproject.com&#x2F;forum&#x2F;resources&#x2F;obs-ndi-newtek-ndi%E2...</a>
评论 #23835648 未加载
评论 #23835731 未加载
评论 #23840606 未加载
ogjunkyardalmost 5 years ago
I just wanted to thank Jordan Lewis for putting this article together. It gave me enough clues on how to implement the &quot;whiteboard&quot;&#x2F;telestrator feature I&#x27;ve been trying to casually implement over the past 6-9 months. Even though I have 1,300+ hours streamed on Twitch, this still slipped through my grasp on how to get it implemented for some reason.<p>I was originally trying to implement this functionality by using NDI, but there were a few issues I ran into, namely resolution and framerate, neither of which I was happy about. Something about this article tipped me off to look up using USB to connect the iPad to the PC, which actually led me to setting up the streaming PC as an AirPlay receiver. After I made the switch over to using AirPlay, I had the whiteboard&#x2F;telestrator functionality working on my OBS setup within 10 minutes.
daenzalmost 5 years ago
Do a lot of programmers feel like they could be effective on a livestream? I might be in a minority, but my preferred coding style is very non-linear and sporadic, and wouldn&#x27;t make for an enjoyable viewing experience.
评论 #23836274 未加载
评论 #23835338 未加载
评论 #23840565 未加载
评论 #23836783 未加载
评论 #23834768 未加载
评论 #23834633 未加载
评论 #23835976 未加载
评论 #23838959 未加载
评论 #23834676 未加载
评论 #23835210 未加载
评论 #23834835 未加载
评论 #23841777 未加载
评论 #23836277 未加载
评论 #23834898 未加载
评论 #23839726 未加载
评论 #23841474 未加载
评论 #23840996 未加载
评论 #23834653 未加载
评论 #23835723 未加载
评论 #23840238 未加载
评论 #23834625 未加载
评论 #23854414 未加载
评论 #23834618 未加载
评论 #23835682 未加载
评论 #23838853 未加载
评论 #23838380 未加载
评论 #23835393 未加载
评论 #23838848 未加载
steveklabnikalmost 5 years ago
... how convenient, I am considering starting a live coding stream soon. Thanks for writing this and posting it!<p>(I have done some speedrunning livestreams, but not coding. Well, not in a Twitch setting anyway, I&#x27;ve done talks with lots of live coding and really enjoyed it.)
评论 #23835454 未加载
ethanwillisalmost 5 years ago
So I haven&#x27;t done any live coding streams in a long time. But I recently recorded a completely unfiltered version of myself coding for a co-worker who is learning to program. I wanted him to see all of the ups and downs. All I did was turn on the recording and just went about my day like I normally do, all cussing and fiddling in my terminal like I normally do. Once you&#x27;re on for 30 minutes or so you forget you&#x27;re even recording.<p>It could be interesting to take this approach then &quot;stream&quot; it as well so you can provide feedback to people watching and also laugh at yourself a little bit.
评论 #23836203 未加载
评论 #23836081 未加载
pengarualmost 5 years ago
It&#x27;s unlikely I&#x27;d ever share livestreams of my coding, but I do think there&#x27;s value for any craftsman to watch recordings of their work.<p>Programmers have it especially easy in this regard since it doesn&#x27;t require any cameras&#x2F;lighting&#x2F;tripods&#x2F;line of sight whatever. Just record your desktop for a day and watch it in down time. I think you&#x27;ll be surprised to see what deficiencies stand out as an observer that you&#x27;ve probably come to just live with due to complacency&#x2F;habit. It helps prioritize areas to improve, and you can do this iteratively.
Uehrekaalmost 5 years ago
I’d love to do a live stream of my coding work with me explaining my process. Even if few&#x2F;no people watched live, they might make for useful tutorials or at the very least a sort of video journal.<p>My main hitch is that I’m concerned about getting to comfortable and accidentally bringing up a config file that contains secrets, and then once those are streamed they’re out of my control.
评论 #23835488 未加载
评论 #23835320 未加载
评论 #23835327 未加载
wtallisalmost 5 years ago
Does anyone know of a good presentation system that does <i>not</i> consist of compressing raw pixels and sending that to the audience? It&#x27;s a huge waste of bandwidth that I&#x27;d rather see used to provide reliable low-latency audio.<p>I&#x27;d love to be able to teach programming in a way that lets the students explore the live state of my working directory and follow along with file edits, but rendered locally on their machines at native resolution and with at least some degree of interactivity. Most collaborative editors I&#x27;m aware of are ill-suited for code, or don&#x27;t seem to work well for more than one file at a time. Ideally, I&#x27;d like students to be able to open a read-only view of my entire IDE workspace, but exporting it over a network filesystem isn&#x27;t quite live enough even with a short auto-save interval.
评论 #23835678 未加载
评论 #23835698 未加载
评论 #23835751 未加载
评论 #23863028 未加载
评论 #23835812 未加载
nickysielickialmost 5 years ago
I love live coding streams. It&#x27;s my personal opinion that the best programmers are the best debuggers, and that&#x27;s something that&#x27;s often language&#x2F;domain specific and gets significantly more difficult as the codebase grows larger. In other words, it&#x27;s hard to learn how to debug if you don&#x27;t already work on a large project or within a certain language.<p>Watching people debug on twitch has definitely changed the way that I approach bughunting.<p>You guys should definitely check out Jordan&#x27;s stream if you like the idea of watching someone fight the good fight against the dark-side of Go&#x27;s opinionation.
bdzalmost 5 years ago
If you are using Streamlabs for the alerts then why not use it for streaming too? And it&#x27;s available on Mac aswell <a href="https:&#x2F;&#x2F;blog.streamlabs.com&#x2F;streamlabs-is-live-on-mac-ff543b7f4a35" rel="nofollow">https:&#x2F;&#x2F;blog.streamlabs.com&#x2F;streamlabs-is-live-on-mac-ff543b...</a> or <a href="https:&#x2F;&#x2F;github.com&#x2F;stream-labs&#x2F;streamlabs-obs&#x2F;" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;stream-labs&#x2F;streamlabs-obs&#x2F;</a><p>Personally I like it more than OBS because all the integrated stuff inside the client, it&#x27;s just a better fork really.
评论 #23835081 未加载
评论 #23844149 未加载
byefruitalmost 5 years ago
Love the bokeh on his video feed. Hard to justify a $900 camera for that alone though, anyone using anything else they&#x27;d recommend?
评论 #23839677 未加载
评论 #23835076 未加载
评论 #23835046 未加载
dry_soupalmost 5 years ago
The &quot;We&#x27;ll Be Right Back&quot; sound is from The Eric Andre Show. It&#x27;s usually used to cut right as something really chaotic happens. Here&#x27;s a very tame example by the standards of the show: <a href="https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=SVhme1eb8SI" rel="nofollow">https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=SVhme1eb8SI</a>
agentultraalmost 5 years ago
Nice to see more! I started doing a live coding stream as well. It&#x27;s an interesting medium.<p>I still get a bit nervous before I start streaming. I spend time rehearsing what I&#x27;m going to say and work on and how I&#x27;m going to present it... but I&#x27;m finding that is not very sustainable and am doing it more to have a dedicated couple of hours to hack on side projects and share my discoveries and knowledge with folks.<p>The interactive nature of it is neat and not as difficult as I had anticipated it would be but my audience is still only a handful of folks each week.<p>Give a try if you&#x27;re thinking about it. You don&#x27;t need pro equipment to get started with live coding. I use my phone for the camera and I pulled out my old 4-track and mic to record audio but it can be done with a headset and a webcam no problem.<p><i>update</i>: Link to my stream: <a href="https:&#x2F;&#x2F;twitch.tv&#x2F;agentultra" rel="nofollow">https:&#x2F;&#x2F;twitch.tv&#x2F;agentultra</a>
numlock86almost 5 years ago
Well, truth is, you need to code something &quot;mainstream&quot; to make it even worth it. (read as: have at least like 2 people watching or even just visit your channel once, not including yourself ...) Program some &quot;Unity game prototype&quot;, some Java or JavaScript web dev, frontend or backend, put in buzzwords like Postgres and NodeJS and what else is relevant to people right now. You know, Twitch has a specific target audience after all. No one is gonna come for some bootloader programming on a STM32F0 (no vector table offset register after all!) or integration of a secure element from NXP including some crypto basics about ECC because people simply don&#x27;t care there.<p>There was a twitch-like platform for live coding once, but obviously it flopped.
评论 #23842078 未加载
StavrosKalmost 5 years ago
I use OBS to stream my maker sessions on <a href="https:&#x2F;&#x2F;m.youtube.com&#x2F;c&#x2F;StavrosKorokithakis&#x2F;" rel="nofollow">https:&#x2F;&#x2F;m.youtube.com&#x2F;c&#x2F;StavrosKorokithakis&#x2F;</a> and it works great. I really like how I can switch between scenes with hotkeys, and it&#x27;s really easy to set up scenes to look like whatever you want.<p>I&#x27;d very much recommend it if you want to stream something. I&#x27;d also recommend just getting started, I&#x27;ve been wanting to stream for a while but was always embarrassed that it&#x27;d look like crap, but better something that looks like crap than nothing.
Sodmanalmost 5 years ago
I love live coding streams but I don&#x27;t understand why you&#x27;d stream a video of your keyboard at all times? From the screenshots it doesn&#x27;t look like you&#x27;d be able to pick up on things like hotkeys when watching in real-time, but as mentioned in the article it does open the possibility for somebody to watch replays and figure out your passwords.<p>Keyboard cameras make sense to me if somebody is streaming eg starcraft where they&#x27;re hitting 300 APM and it&#x27;s impressive to watch, but I just don&#x27;t see the appeal of it for coding.
评论 #23836358 未加载
评论 #23835667 未加载
rubatugaalmost 5 years ago
If you’re looking to bring HDMI content into OBS easily and cheaply, check out my review on the $15 HDMI capture card that recently made the rounds here on Hacker News. Essentially this card has a native resolution of 1280x720, which is a good target if you’re trying to make text legible.<p><a href="https:&#x2F;&#x2F;www.naut.ca&#x2F;blog&#x2F;2020&#x2F;07&#x2F;09&#x2F;cheap-hdmi-capture-card-review&#x2F;" rel="nofollow">https:&#x2F;&#x2F;www.naut.ca&#x2F;blog&#x2F;2020&#x2F;07&#x2F;09&#x2F;cheap-hdmi-capture-card-...</a>
评论 #23838933 未加载
AlchemistCampalmost 5 years ago
That looks like an Ergodox keyboard! I really want to get one of those...<p>It&#x27;s not just that they&#x27;re great ergonomically (which I truly need), but they&#x27;re also highly programmable. I can imagine how a large set of macros could improve screencasts quite a bit.<p>More related to the article, I&#x27;ve used OBS for nearly all of 150+ screencasts and it&#x27;s been fantastic. I tend to use Streamlabs OBS for Twitch and the fully open source OBS for all my YouTube videos. The plugin ecosystem is great.
roland35almost 5 years ago
Are there any line streams of hardware development? I&#x27;m getting into Kicad circuit design and it would be good to see how an experienced user works with it!
评论 #23840170 未加载
cdelsolaralmost 5 years ago
I&#x27;ve streamed coding a few times on Twitch at my channel (14domino). My setup is much more similar to my coding setup so the font can definitely look small. Does anyone know a good way to advertise coding streams in general? I mostly get 2-3 viewers who are already my friends, and I doubt they&#x27;re very engaged, but I do like streaming coding and would love it if people could learn something out of it. :)
评论 #23838003 未加载
评论 #23849336 未加载
评论 #23837793 未加载
BookPagealmost 5 years ago
I&#x27;ve livestreamed coding before. It turned into a pretty cool multi-peer programming type of environment. I learned a lot from the viewers
xmprtalmost 5 years ago
I&#x27;d also add a section about editing your OBS layout to include views for Chat and Activity Log. Those have been super useful to me.
xiaodaialmost 5 years ago
Cool. I use streamlabs and I have a much simpler set up for coding challenges. I wish I can make some commands for interacting with users though. Eg. A command for uses to point out mistakes in my code.<p>Here is my stream: <a href="https:&#x2F;&#x2F;twitch.tv&#x2F;evalprase" rel="nofollow">https:&#x2F;&#x2F;twitch.tv&#x2F;evalprase</a>
r32a_almost 5 years ago
I&#x27;ve made a project that you can sell your live stream for btc. totally distributed using hypercore and Lightning network<p><a href="https:&#x2F;&#x2F;github.com&#x2F;rbndg&#x2F;Bitstation" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;rbndg&#x2F;Bitstation</a>
评论 #23839794 未加载
mdoliwaalmost 5 years ago
What do you think about running live coding stream on YT vs Twitch? I&#x27;m about to start streaming myself, but not sure what platform should I use. Last time I checked Twitch it looked a little bit overwhelming.
评论 #23835236 未加载
评论 #23863103 未加载
评论 #23836050 未加载
Kaze404almost 5 years ago
For the people on Linux using ultrawides, I recomment Xephyr at 1080p. You can put whatever you want to stream in there, and still have the real estate of the rest of your screen. It&#x27;s super nice :)
ladyofcodealmost 5 years ago
Thank you for writing this! I&#x27;m preparing to stream and I&#x27;m swimming in all this new tech I haven&#x27;t used before - everything is laid out so clearly in the post, it&#x27;s awesome.
2bitencryptionalmost 5 years ago
technical question -- I&#x27;m really impressed how OBS is able to abstract the &quot;screen recording&quot; functionality across different OSs (it works the same in Linux, Windows and OSX, with no difference in behavior that I&#x27;ve noticed).<p>How does screen recording work? Is it easy for OBS to just capture the video output buffer and start encoding it, regardless of the OS? Or do different OSs have very different strategies for this? What about hardware-level cursors? (I think that&#x27;s a thing?)
评论 #23839530 未加载
评论 #23839405 未加载
icpmacdoalmost 5 years ago
watch the best in the business do it live currently <a href="https:&#x2F;&#x2F;www.twitch.tv&#x2F;georgehotz" rel="nofollow">https:&#x2F;&#x2F;www.twitch.tv&#x2F;georgehotz</a>
fcanelaalmost 5 years ago
I would love to know how to do it with Linux&#x2F;Ubuntu. I tried with OBS and always run into a bunch of issues when trying to create something beyond a basic scene.
评论 #23835059 未加载
Brushfirealmost 5 years ago
A much easier option would be to use Lightstream. <a href="https:&#x2F;&#x2F;golightstream.com" rel="nofollow">https:&#x2F;&#x2F;golightstream.com</a>.
almogalmost 5 years ago
Audio-input-wise, I fail to understand why anyone whose objective is to capture their own voice, would choose a condenser over a dynamic microphone. Dynamic microphone hardly those fan&#x2F;AC&#x2F;room nearby phone calls that the author had to reduce using software filters. Farther more, dynamic mics can deliver your voice with a touch of radiophonic note. What&#x27;s more, they&#x27;re usually more durable and cost less (you can get a very good dynamic mic like ATR2100 or Q2U for less than $100).
评论 #23839428 未加载
评论 #23839645 未加载
评论 #23843169 未加载
tsumniaalmost 5 years ago
Shameless promotion of my own video on setting up OBS; I created this for some of my friends and colleagues when we first started moving to all online teaching: <a href="https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=n5KGeiw3KV4" rel="nofollow">https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=n5KGeiw3KV4</a> I will note that toward the end of the video on some finer tweaks, my scene was not correctly showing OBS cropping.<p>That said, this article does a great explaining the Twitch integrations. If you aren&#x27;t looking into Twitch streaming, that portion can be ignored.<p>I&#x27;ve been using OBS for creating lecture videos for years. I use it mostly because when I started, it was one of the only free quality stream capture tools out there and I&#x27;d seen a few of the early Twitch streamers using it. Since I was teaching, I wanted to imitate the Khan Academy style drawings. The article uses an iPad, but I&#x27;ve gotten pretty comfortable with GIMP and a small Wacom tablet.<p>My setup (my equipment is a bit old, so it doesn&#x27;t look like they are still sold):<p>* Samson Meteorite microphone: <a href="https:&#x2F;&#x2F;www.trustedreviews.com&#x2F;reviews&#x2F;samson-meteorite" rel="nofollow">https:&#x2F;&#x2F;www.trustedreviews.com&#x2F;reviews&#x2F;samson-meteorite</a><p>* Wacom Small Pen Tablet: <a href="https:&#x2F;&#x2F;www.amazon.com&#x2F;Wacom-Intuos-Touch-Tablet-Version&#x2F;dp&#x2F;B00EN27U9U" rel="nofollow">https:&#x2F;&#x2F;www.amazon.com&#x2F;Wacom-Intuos-Touch-Tablet-Version&#x2F;dp&#x2F;...</a><p>* GIMP: <a href="https:&#x2F;&#x2F;www.gimp.org&#x2F;" rel="nofollow">https:&#x2F;&#x2F;www.gimp.org&#x2F;</a><p>Your two most absolutely crucial components are your sound and your lighting. The sound should get picked up well so the viewer doesn&#x27;t need to adjust their volume to listen. I know some of my videos have fallen short in this quality because of the mic&#x27;s positioning.<p>Also, think about your voice and enunciating your words. Since my lectures are public, 20% of my channel&#x27;s traffic comes from India and Germany. You don&#x27;t need to necessarily slow your words (like I did when I started), but you want to make sure each word can be heard cleanly. You may not realize you have a hard to understand accent because it just seems natural to you. You can also mitigate this with subtitles (I&#x27;ve used rev.com for ADA compliance).<p>Lighting is the other important aspect because if you are going to stream your face, it needs to look presentable. You don&#x27;t want the lights shooting directly on your face though because that can wash out you texture and color. Like in the article, you want to bounce your lights off a white surface for a softer illumination. I&#x27;d recommend reading some indoor filming techniques to get a good setup, since you are effectively on camera.<p>Likewise, know your eye line. I like to have my camera at just above eye level so when I&#x27;m lecturing it looks like I&#x27;m talking to my students, rather than looking down&#x2F;up wherever your webcam is. This was also a tip I gave to a friend last week before he presented at a conference. Acting for the Camera is a nice book you can peruse for small tips like understanding your frame.<p>Finally, you&#x27;re going to be very clunky when you start, even if you are at extroverted person. You&#x27;ll need to become comfortable performing in front of the camera no different than in front of a classroom or audience.<p>Here are three videos illustrating this point:<p>[1] One of my first videos <a href="https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=PEYOixCgGHg" rel="nofollow">https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=PEYOixCgGHg</a><p>[2] Literally two months later, notice my increase in cadence <a href="https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=ltav5tp43RY" rel="nofollow">https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=ltav5tp43RY</a><p>[3] Five years later <a href="https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=Dggl0fJJ81k" rel="nofollow">https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=Dggl0fJJ81k</a><p>Once you start, watch some of your videos to see what you think is wrong or weird with them and try to improve.
ericzawoalmost 5 years ago
Thanks so much for this guide!!!
seastonATccsalmost 5 years ago
I find twitch to be an unholy amalgamation of a NPR pledge drive and a Las Vegas slot machine.
bzb3almost 5 years ago
[deleted]
评论 #23834577 未加载
评论 #23834539 未加载
评论 #23834522 未加载