We broadcast a video stream from a web page via WebRTC to Facebook and YouTube at the same time
Facebook and YouTube provide broadcast services that allow broadcasting of live video streams to a wide audience of viewers. In this article we will describe how to capture a video stream from a web page using WebRTC technology and send this video stream to Facebook and YouTube simultaneously for a live broadcast — to two services at once.
Before you start streaming, find out which RTMP endpoints Facebook and Youtube provide for streaming. Next, we will need to send video streams to these RTMP addresses.
Facebook
Let's start with Facebook. The first step is to find the Start Live button. This button might look like this:
')
Or like this:
Next, you need to press the button In the air
And click on the link Click here to broadcast from external devices, and not from Facebook itself.
Next, click Create Stream
As a result, Facebook provides RTMP stream data:
From the screenshot it can be seen that the server address is: rtmp: //rtmp-api.facebook.com: 80 / rtmp /
And the name of an RTMP stream is a long, unique string:
1489000000111961? Ds = 1 & s_l = 1 & a = ATj9giGjaTTfgpNHBP
We need these two parameters for the broadcast. Let's put them aside and find out the RTMP parameters for YouTube.
To start streaming from YouTube, go to https://youtube.com/live and click on the Upload button.
Next, select Live Streaming and click Get Started .
The streaming panel, player and RTMP settings should appear:
From the settings, we see that the RTMP server address is rtmp: //a.rtmp.youtube.com/live2 , and the stream name is hidden and becomes visible by clicking on the Reveal button.
The name of the RTMP stream for YouTube looks like this: 8r0t-z4d-9xyj-2bcd
As a result, we know exactly where to send RTMP streams:
The server will be responsible for receiving the video stream from the webcam via WebRTC and delivering it to Facebook and YouTube via RTMP.
Do it once
First, we send to the server a video stream from a webcam from the Google Chrome browser.
For this purpose, you can download an example of an HTML page and a streaming script here and deploy three files from this archive on your web server:
flashphoner.js is an API file. Its latest version can be downloaded in the Web SDK build.
The code for the standard demo example for streaming is available here . Suppose we opened the demo. Connect to the server and send a video stream with the name 5dfd to the WebRTC server. It works like this:
The video is captured from the browser camera (in this case from the virtual one), and goes to the WCS5 server using the WebRTC technology, in VP8 + Opus or H.264 + Opus codecs, depending on the device and browser version.
The next step is to redirect this video to Facebook.
Make two
Web Call Server has a REST API, which allows, knowing the name of the stream, redirect the WebRTC video stream to RTMP.
To do this, send a request to the REST / HTTP server as follows:
Such a request can be tested from the Advanced REST Console , which looks like this:
As a result, WCS redirects the WebRTC video stream to Facebook at a long address:
rtmp: //rtmp-api.facebook.com: 80 / rtmp / 1489000000111961? ds = 1 & s_l = 1 & a = ATj9giGjaTTfgpNHBP
This address combines the RTMP URL and the name of the video stream.
After a few seconds, a video will appear on Facebook:
Do three
We send a similar request for YouTube
Or from the REST console:
The server will return 200 OK and take the stream to YouTube:
As a result, we see that the stream is broadcast and distributed to both services: on Facebook and YouTube.
Now you can request a list of all broadcast streams from the same REST API:
The server will return a list of streams that are currently being relayed to Facebook and YouTube:
Stop relaying with two calls / push / terminate
Disconnect from Facebook:
Disconnect from YouTube:
Thus, we organized a broadcast from a web page using WebRTC technology to a Web Call Server 5 server, then with one REST request / push / startup we re-broadcast the video stream to Facebook, and with the second request / push / startup we re-broadcast the stream to YouTube Live . After that, we checked the playback of video streams through standard service players and displayed a list of re-translated streams using the / push / find_all request . We finished testing, completing current translations with two / push / terminate requests.
Everyone or almost every developer had to work with the REST API. Therefore, we will not describe here the code that implements sending REST / HTTP requests.
Instead, we’ll tell you how a video stream from a webpage and a webcam comes to the server.
As we mentioned above, to create a minimal client, an exciting video, you need three scripts:
flashphoner.js is a file that is located in the Web SDK assembly and there’s no point in describing it.
streamer.html
This page contains the localVideo div element in which the capture from the camera will be displayed, and the Start button to start the broadcast.
streamer.js
The translation script works with four main API functions:
As a result, a connection is established to the server using the Websocket protocol and video capture from the browser’s webcam and then sent to the server via WebRTC.
Download the archive with streamer.html and streamer.js scripts here .
In order for the broadcast to work from Google Chrome, you need to put the broadcast scripts on a web hosting service that works on https.
Web Call Server can be installed on a separate Linux host. Download the test server here . After the server is installed and running, it will accept incoming web socket connections to the following addresses: ws: // host: 8080 and wss: // host: 8443
Thus, we showed how to capture video from a webcam and deliver the video stream to the server using three scripts. If everything was done correctly, the script should display the status PUBLISHING. This means that the WebRTC stream is successfully delivered to the server and can be re-translated to YouTube or Facebook using the REST API.
Web Call Server - WebRTC server with the ability to relay to YouTube and Facebook
Web SDK - JavaScript API for embedding translation code into a web page.
REST API - WebRTC Video Stream Relay Management
Source - the source code of the sample stream from a web page to the server.
YouTube Live - a live broadcast service from YouTube
Facebook Live - Live Broadcast Service from Facebook
Before you start streaming, find out which RTMP endpoints Facebook and Youtube provide for streaming. Next, we will need to send video streams to these RTMP addresses.
Let's start with Facebook. The first step is to find the Start Live button. This button might look like this:
')
Or like this:
Next, you need to press the button In the air
And click on the link Click here to broadcast from external devices, and not from Facebook itself.
Next, click Create Stream
As a result, Facebook provides RTMP stream data:
From the screenshot it can be seen that the server address is: rtmp: //rtmp-api.facebook.com: 80 / rtmp /
And the name of an RTMP stream is a long, unique string:
1489000000111961? Ds = 1 & s_l = 1 & a = ATj9giGjaTTfgpNHBP
We need these two parameters for the broadcast. Let's put them aside and find out the RTMP parameters for YouTube.
YouTube
To start streaming from YouTube, go to https://youtube.com/live and click on the Upload button.
Next, select Live Streaming and click Get Started .
The streaming panel, player and RTMP settings should appear:
From the settings, we see that the RTMP server address is rtmp: //a.rtmp.youtube.com/live2 , and the stream name is hidden and becomes visible by clicking on the Reveal button.
The name of the RTMP stream for YouTube looks like this: 8r0t-z4d-9xyj-2bcd
As a result, we know exactly where to send RTMP streams:
| YouTube | ||
| RTMP address | rtmp: //rtmp-api.facebook.com: 80 / rtmp / | rtmp: //a.rtmp.youtube.com/live2 |
| Stream name | 1489000000111961? Ds = 1 & s_l = 1 & a = ATj9giGjaTTfgpNHBP | 8r0t-z4d-9xyj-2bcd |
Web call server
The server will be responsible for receiving the video stream from the webcam via WebRTC and delivering it to Facebook and YouTube via RTMP.
Do it once
First, we send to the server a video stream from a webcam from the Google Chrome browser.
For this purpose, you can download an example of an HTML page and a streaming script here and deploy three files from this archive on your web server:
- streamer.html
- streamer.js
- flashphoner.js
flashphoner.js is an API file. Its latest version can be downloaded in the Web SDK build.
The code for the standard demo example for streaming is available here . Suppose we opened the demo. Connect to the server and send a video stream with the name 5dfd to the WebRTC server. It works like this:
The video is captured from the browser camera (in this case from the virtual one), and goes to the WCS5 server using the WebRTC technology, in VP8 + Opus or H.264 + Opus codecs, depending on the device and browser version.
The next step is to redirect this video to Facebook.
Make two
Web Call Server has a REST API, which allows, knowing the name of the stream, redirect the WebRTC video stream to RTMP.
To do this, send a request to the REST / HTTP server as follows:
| URL | |
| Content-Type | application / json |
| Method | POST |
| Body | |
Such a request can be tested from the Advanced REST Console , which looks like this:
As a result, WCS redirects the WebRTC video stream to Facebook at a long address:
rtmp: //rtmp-api.facebook.com: 80 / rtmp / 1489000000111961? ds = 1 & s_l = 1 & a = ATj9giGjaTTfgpNHBP
This address combines the RTMP URL and the name of the video stream.
After a few seconds, a video will appear on Facebook:
Do three
We send a similar request for YouTube
| URL | |
| Content-Type | application / json |
| Method | POST |
| Body | |
Or from the REST console:
The server will return 200 OK and take the stream to YouTube:
As a result, we see that the stream is broadcast and distributed to both services: on Facebook and YouTube.
Now you can request a list of all broadcast streams from the same REST API:
| URL | |
| Content-Type | application / json |
| Method | POST |
| Body | |
The server will return a list of streams that are currently being relayed to Facebook and YouTube:
Stop relaying with two calls / push / terminate
Disconnect from Facebook:
| URL | |
| Content-Type | application / json |
| Method | POST |
| Body | |
Disconnect from YouTube:
| URL | |
| Content-Type | application / json |
| Method | POST |
| Body | |
Thus, we organized a broadcast from a web page using WebRTC technology to a Web Call Server 5 server, then with one REST request / push / startup we re-broadcast the video stream to Facebook, and with the second request / push / startup we re-broadcast the stream to YouTube Live . After that, we checked the playback of video streams through standard service players and displayed a list of re-translated streams using the / push / find_all request . We finished testing, completing current translations with two / push / terminate requests.
We write JavaScript / HTML code
Everyone or almost every developer had to work with the REST API. Therefore, we will not describe here the code that implements sending REST / HTTP requests.
Instead, we’ll tell you how a video stream from a webpage and a webcam comes to the server.
As we mentioned above, to create a minimal client, an exciting video, you need three scripts:
- streamer.html
- streamer.js
- flashphoner.js
flashphoner.js is a file that is located in the Web SDK assembly and there’s no point in describing it.
streamer.html
This page contains the localVideo div element in which the capture from the camera will be displayed, and the Start button to start the broadcast.
<html> <head> <script language="javascript" src="flashphoner.js"></script> <script language="javascript" src="streamer.js"></script> </head> <body onLoad="init()"> <h1>The streamer</h1> <div id="localVideo" style="width:320px;height:240px;border: 1px solid"></div> <input type="button" value="start" onClick="start()"/> <p id="status"></p> </body> </html> streamer.js
The translation script works with four main API functions:
- Flashphoner.init (); // responsible for initializing the API.
- Flashphoner.createSession (); // responsible for connecting to the server
- session.createStream (); // responsible for creating a video stream
- session.createStream (). publish (); // responsible for sending the video stream
As a result, a connection is established to the server using the Websocket protocol and video capture from the browser’s webcam and then sent to the server via WebRTC.
var localVideo; function init(){ Flashphoner.init(); localVideo = document.getElementById("localVideo"); } function start() { Flashphoner.createSession({urlServer: "wss://wcs5-eu.flashphoner.com:8443"}).on(Flashphoner.constants.SESSION_STATUS.ESTABLISHED, function (session) { //session connected, start streaming startStreaming(session); }).on(Flashphoner.constants.SESSION_STATUS.DISCONNECTED, function () { setStatus("DISCONNECTED"); }).on(Flashphoner.constants.SESSION_STATUS.FAILED, function () { setStatus("FAILED"); }); } function startStreaming(session) { session.createStream({ name: "stream222", display: localVideo, cacheLocalResources: true, receiveVideo: false, receiveAudio: false }).on(Flashphoner.constants.STREAM_STATUS.PUBLISHING, function (publishStream) { setStatus(Flashphoner.constants.STREAM_STATUS.PUBLISHING); }).on(Flashphoner.constants.STREAM_STATUS.UNPUBLISHED, function () { setStatus(Flashphoner.constants.STREAM_STATUS.UNPUBLISHED); }).on(Flashphoner.constants.STREAM_STATUS.FAILED, function () { setStatus(Flashphoner.constants.STREAM_STATUS.FAILED); }).publish(); } function setStatus(status) { document.getElementById("status").innerHTML = status; } Download the archive with streamer.html and streamer.js scripts here .
In order for the broadcast to work from Google Chrome, you need to put the broadcast scripts on a web hosting service that works on https.
Web Call Server can be installed on a separate Linux host. Download the test server here . After the server is installed and running, it will accept incoming web socket connections to the following addresses: ws: // host: 8080 and wss: // host: 8443
Thus, we showed how to capture video from a webcam and deliver the video stream to the server using three scripts. If everything was done correctly, the script should display the status PUBLISHING. This means that the WebRTC stream is successfully delivered to the server and can be re-translated to YouTube or Facebook using the REST API.
Links
Web Call Server - WebRTC server with the ability to relay to YouTube and Facebook
Web SDK - JavaScript API for embedding translation code into a web page.
REST API - WebRTC Video Stream Relay Management
Source - the source code of the sample stream from a web page to the server.
YouTube Live - a live broadcast service from YouTube
Facebook Live - Live Broadcast Service from Facebook
Source: https://habr.com/ru/post/327986/
All Articles