RTMP Live Streaming to Facebook

Here’s an easy guide to live streaming from your computer directly to Facebook.

6 min readJul 23, 2016

Recently, I’ve been “live streaming” movies and videos to the Cirque du Twerque group on Facebook, where we’ve begun having movie nights and watch videos together. It can be incredibly fun to watch a movie remotely with your friends, especially when you aren’t able to physically be with them, and Facebook’s live streaming service is perfect for this, with awesome live commenting features. Otherwise, for events that I run like CodeDay Bay Area, Facebook could serve as an awesome place to live stream our opening and closing ceremonies — but using a smartphone camera just won’t cut it for us.

Facebook doesn’t normally let you stream from your computer, leaving you with just a (usually crappy) smartphone camera to stream from. Here’s how you can get past that restriction and stream video files, live output from a good camera, and more directly from your computer.

Here’s what you need:

RTMP-compatible live streaming software: for this process, we’ll need a streaming software that’s compatible with the RTMP protocol. If you’ve got cash to burn, I’d recommend Xsplit for an easy-to-use experience. Otherwise, OBS Studio is also an amazing, free option. Since OBS is more accessible to most, I’ll be using OBS for this tutorial.
Computer with decent graphics: if you want to avoid massive frame drops (which essentially cause choppy streaming and lots of lag), you’ll need a decent graphics card in your computer. An AMD APU or any recent discrete graphics card should do the trick.
USB Camera OR Capture card (only needed for camera streams): if you want to stream real video from a good camera (as opposed to your smartphone camera), you’ll need either a USB camera or a capture card that converts HDMI signal to USB. I’d recommend the Logitech C920 as a USB camera, but getting a Razer Ripsaw or Elgato Game Capture HD60 capture card and using it with your current video camera is a much higher-quality (albeit a bit more complicated) option.
Decent uplink: go to Speedtest.net to check your internet. You’ll need at least around 1.5Mbps upload speed to be able to stream well, but the higher it is the smoother your stream will be.

After you’ve got everything listed above, you’re ready to get started!

Facebook Developers — Registering an App for Live Streaming

To get started with RTMP streaming, you’ll need to create a Facebook for Developers account and make a dummy app. It’s a pretty easy process:

Make sure you’re logged in to Facebook.
Head over to the Facebook for Developers site.
Click the ‘Register’ button at the top right. Toggle the agreement checkbox, and click the Register button.
You’ll now be asked to add a new app. Click the giant ‘www’ icon to create a web app.
Enter whatever name you want for the app. It really doesn’t matter at all. Then, click ‘Create Facebook App ID’.
Enter a contact email, and select a category. The contact email doesn’t have to be real.
Find the app ID in the ‘Setup the Facebook SDK for Javascript’ section.
Scroll down, and enter http://htmlpad.org as your Site URL.

Keep that app ID aside, and we’re ready to go to the next step!

Getting your stream-starting app ready

The next part is mostly copy and pasting. We’ll be using HTMLpad for this section, which is essentially creating a Start Stream button.

Start a new HTMLpad. Use an obscure name, but one you can remember, like <yourname>-live-<randomword>. If someone finds your URL, it is publicly editable, but this site is so rarely used that nobody’s really going to find it :)
Note your URL: http://htmlpad.org/<name-you-entered-earlier>. This is where you’ll need to go to start a Live Stream at any point in the future. You can add `/edit` to the end of that url to edit your HTMLpad at any time.
Paste the following code in your new HTMLpad, replacing <app-id> with your actual app id:

<html><body><script>window.fbAsyncInit = function() {FB.init({appId      : '<your-app-id>',xfbml      : true,version    : 'v2.6'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = "http://connect.facebook.net/en_US/sdk.js";fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script><button id="liveButton">Start Stream</button><script>document.getElementById('liveButton').onclick = function() {FB.ui({display: 'popup',method: 'live_broadcast',phase: 'create',}, function(response) {if (!response.id) {alert('dialog canceled');return;}alert('stream url:' + response.secure_stream_url);FB.ui({display: 'popup',method: 'live_broadcast',phase: 'publish',broadcast_data: response,}, function(response) {alert("video status: \n" + response.status);});});};</script></body></html>

Now go to your HTMLpad URL, and click the Start Stream button. You should see a dialog like this:

Now you’re almost ready to go! Let’s just get our streaming software ready.

Setting up OBS Studio

OBS Studio is fairly simple to set up with a video.

Install and open OBS Studio.
Create a second scene to use as a placeholder, which will be streamed until you are ready to play the video. You can do this by clicking the ‘+’ at the bottom of Scenes (the first white box at the bottom left), and creating a new scene named whatever you want.
In ‘Sources’ (the second white box at the bottom left), click the ‘+’ button at the bottom.
Click ‘Media Source’, and click OK at the bottom of the dialog box that pops up.
Next to the ‘Local File’ box, click Browse and find the video you want to use. Click OK to add the source.
You’ll notice the video immediately begins playing. Switch to the other scene that we made by clicking it in the Scenes box for now.
Click on Settings at the bottom right.
Click on ‘Video’.
Change the Canvas and Scaled resolution to 1280x720, and use 30fps or below. These are the maximum allowed by Facebook live streams.
Press ‘OK’ to save and close settings.

OBS is now set up and ready to go!

Starting the Live Stream

It’s time for the fun part! Let’s start the live stream.

Go to your HTMLpad page from earlier, and click the Start Stream button.
Choose where you want the live stream to be shared.
Click ‘OK’ on the dialog box that pops up, and wait for the screen below to show.
Switch over to OBS, and click ‘Settings’ at the bottom right. Then, go to the Stream menu and select ‘Custom Streaming Server’ as the stream type. Paste the Server URL and Stream key from the HTMLpad popup here, and click OK to save and close settings.
Click ‘Start Streaming’ at the bottom left of OBS.
Switch back to the HTMLpad popup. You should see your stream pop up in the preview window, and when it’s ready, you can ‘Go Live’! Your live stream should start.
Switch to the other scene in OBS to start playing the video, and you should be good to go!

Entering the Facebook stream URL and key.

… and that’s it!

That’s all it takes to get started with streaming on Facebook from your computer. To learn more about more advanced streaming, including switching between scenes, you can look up advanced usage of OBS Studio. They’ve got some pretty good forums with lots of information on how to do cool things with it.

Thanks for reading, hope I helped :)

Feel free to message me or email me if you have any questions, or just want some personal assistance in setting this up. I’m happy to help!