Developer Livestreams

Since January, I’ve occasionally live streamed Loose Leaf iOS development to YouTube. I even took some time in April to stream and open source a 2D physics game from scratch! It’s been a challenging and fun experience personally, and has more broadly grown into quite a subculture – sites like Watch People Code, Livecoding.tv, and even articles by CNN and Wired show the trend’s recent growth.

When I first started to stream, it was surprisingly difficult to get started. I wasn’t quite sure what software to use or how to set things up. This post aims to help new streamers and be a quick and easy way to get streaming quickly.

What do I need?

You only need a few tools to get started:

1. Open Broadcast Software: https://obsproject.com/download
2. Live Video Display: http://www.zachpoff.com/software/live-video-delay/ (optional)
3. Your own Youtube channel

Step 1: Schedule a Live Event on YouTube

OBS is the key to your streaming puzzle – it’s the piece that streams your desktop to YouTube, so step one is to configure it with your personal YouTube settings. First, login to your YouTube channel and go to your “Creator Studio.”

Next, expand the Video Manager and select “Live Events” from the sidebar. Then click to add a new Live Event – don’t worry, it won’t go live without your say-so later on.

Fill out any title you’d like, pick a date far in the future, and click “Create Event”. Next, in the Ingestion Settings section, you’ll be telling YouTube how you’ll be sending it your stream. For this, I have it set to 500-2000Kb (480p).

Once you’ve selected your bitrate, YouTube will show you your personal stream settings. This is what we’ll use to configure OBS:

Step 2: Configure OBS

Open OBS and click on the Settings button. Then, select the Stream settings option and select YouTube as your stream type, and then copy your “Stream Name” from the above strep into the “Stream key” field in OBS.

Next, we’ll need to make sure your stream bitrate etc are setup properly – click on the Output tab and set your bitrate to 1500.

Last but not least, go to your Video settings and set your scaled resolution to 854 x 480. My internet plan only allows up to 3Mb/s upload speed, so 480p is as much as I can stream before maxing out my bandwidth.

Now OBS is configured properly, but we still need to tell it exactly which window / screen to stream! On to Step 3….

Step 3: Creating a Scene

OBS lets you easily switch between multiple independent “Scenes” while you stream – convenient for switching between a static “Setting up” image to your live video stream, etc. For now, we’ll just setup a single video stream source: create a new scene in OBS with the little green plus icon , and name it anything you like. With that scene selected, add a new Source to the list with its green plus icon  and choose “Display Capture.” If you have multiple monitors, pick your display, then click “Ok”.

Step 4: Test the Stream!

Now you’re setup and ready to go! Switch back over to YouTube and click into your Live Control Room.

You should see a red bar across the top saying that YouTube is not receiving any data. Switch over to OBS and click on the Start Streaming button. After a few seconds, you should see that red bar disappear and the Preview button will enable. Click that Preview button to see how your stream is doing, then go live when you’re ready!

Step 5: Setup your Webcam (optional)

OBS has support for adding your webcam as a video source, but I found that it lagged considerably behind the stream of the desktop. Instead, I suggest installing Live Video Display. After it’s launched, we’ll need to select your iSight as it’s camera source. Select the Video Settings button, choose your iSight camera from the list, and pick the smallest capture resolution:

We’re only using Live Video Display for the webcam, not for anything else, so turn off its audio settings:

Last but not least, set it to have zero frames of delay – this’ll force it to push your webcam to OBS as fast as it can capture it:

Now that your webcam source is setup, we need to configure OBS to know about it. In OBS, click the green plus icon  to add another source to your scene. Choose Game Capture (Syphon) and name it anything you like. When its properties window opens, check the Inject box and launch SyphonInject, then choose Live Video Display from the list – you should see your webcam pop into the preview window. Click OK to confirm, and that’s it! Now you should see your webcam on top of your desktop screen!

Step 6: Enjoy!

I’ve really enjoyed live streaming some of my iOS development – I’ve met new people, learned new things, and enjoyed it all from start to finish! If you’d like to follow along on any of my dev streams – either for Loose Leaf, Spare Parts, Remotely, or others – head on over to my YouTube or LiveCoding.tv pages 🙂