On 12 april Facebook announced the ability to stream live video on Facebook Live from a drone. The company has already conducted a demonstration with a Phantom drone DJI. The news does not stop there because the Facebook Live API is now public.
I am happy to show you how to start your first live stream via API.
In this tuto i will explain to two method to start your live via your own facebook app or i will provide link for a ready app that you can use it.
UPDATE 27-04-2016 :
-
New version of OBS Studio 0.14.1 :Fixed an issue with chroma key not working at all
-
Facebook live map that show the current live in the world : https://www.facebook.com/livemap
-
Tips + Tricks Use these techniques to create exciting, effective Live video : https://live.fb.com/tips/
Let your Facebook app ready to post
After you create your Facebook applications (you can google it , is easy to do) and get you app-id.here’s a sample code that you need just to upload in a .html file to your server. Your only need your to change “YOURAPPIDHERE” with your APP ID that you get it from Facebook.
<html>
<head>
</head>
<body>
<script>
//Connect to the app via the facebook sdk 2.6
window.fbAsyncInit = function() {
FB.init({
appId : 'YOURAPPIDHERE',
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 = "//connect.facebook.net/de_DE/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<button id="liveButton">Live API activator</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>
Use a ready app
As i say , here is a link http://houssem.dbira.tn/testlive.html i created in my website that you can use it to test the Facebook live api you will find the same when you follow the steps above.
When test the code or enter the link that i provide you will find a sample button ,
The magic happens when you click. A long-known Share dialog appears and you can choose where the Live Stream to appear. Your own timeline, the timeline of a friend, a group or your pages.
After you choose and click next you will get a page which now gives you the stream URL and the Key .It looks like a normal video share post, But what stands out are the two fields where actually had the video: Server URL and Stream Key.
The server URL is always the same: rtmp://rtmp-api.facebook.com:80/rtmp, in general is the same and don’t change .
The key is something special. This key is valid only once and you can used it after generating only for 24 hours and for one single post Anyone who knows this key can go live and post in your place.
That was it! Well so half. Now, Facebook has delivered you everything need to stream it.
Preparation of the Stream Software.
I spend two day in searching the best software to stream, There are many tools that support RTMP streaming but most of them is paid. I want to show you one that i think is the excellent free version – “Open Broadcaster Software”. You can download it from here https://obsproject.com/download be sure to chose the studio version.
let us start the goals of this post,
After the tool is installed, you go to Settings and choose Stream.
select the Custom server option and there are exactly the fields that you receiveed from Facebook. fill data and press OK.
Now you can choose the source of media from camera ,video or picture ! let’s add some text or no you want a screen capture !? is the best right haha ! just play around a bit with the options i let this missions to you.
Now you can start the live stream . Do not worry, he is not yet published on Facebook. Look back now to posting window. MAGIC !!!! the preview of your stream and the “Go Live” button is clickable. Select it and your stream is live!
Finally, a few specs for the stream:
720p at 30 frames / s
1 keyframe every 2 seconds
The bit rate should not exceed 2500Kbps
The video length is limited to 90 minutes
Thats it! …
… But that’s just the Quicky “How do I Live”. The API has many more great features. Just check out the rest in Facebook Live API documentation.
Don’t hesitate to comment below if you have any questions/problems 🙂
Awesome post! However I can’t seem to get past the offline message despite trying out both OBS and wirecast to stream.
it’s easy to solve it ,juste use Microsoft edge/other browser 🙂
Thanks! Tried it and it worked!
Hi there,
i have problem when click the button, it response an error : “Given URL is not allowed by the Application configuration: One or more of the given URLs is not allowed by the App’s settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App’s domains.”
Do you have any ideal about this case?
Btw, Thanks for this very much! 😀
Hi ,
this problem is related to the Facebook apps setting ,
go to https://developers.facebook.com/apps/ select you app and then Settings and now verify the “App Domains” due to your exemple it must be justabcto.xyz and in Website>Site URL must be http://justabcto.xyz/ and then click Save, it’s should work if not please let me know 🙂
it totaly worked, many many thanks, h0s!
Hi, I tried to stream on Facebook using OBS studio but it mentioned failed to connect server and I already key in to the URL server and stream key to the setting. But it still can’t work.
Hi ,
please can you take a screenshot! is a strong problem please verify your key espace be sure from what you copy !
I have read your post and I managed to make it work 🙂
In addition I would like to publish and not create a live facebook video. My code below works (creates a pop-up window with the rtmp specified below) but I am keep getting the following message.
OFFLINE
If your video stream isn’t working, make sure you copied the contents of these fields into your video streaming software’s settings.
Hi Kostas,
Do you try changing the browser ?
Try Microsoft edge ?.
Keep me in touch with result 🙂
Thankyou so much
Hi Tseng and thank you for your comment ,
i will search for you some apps on mobile similar to OBS Studio, but if you want make a live video Facebook enable this feature for all people try it.