broadcast a web-cam to (YouTube, Twitch , facebook) using HTML5 and WebRTC

Question

I'm working on a project where i need to broadcast a live video on youtube, twitch , Facebook or other platforms from my website using HTML5 , rtmp , webrtc, nodejs....

so instead of going to youtube and start a live video, i want to start the video from my website

but im new to webrtc and live streaming and i don't know what to do or how to start this so please if anyone have any ideas or suggestions about how to do this please contact me or leave a comment here

this is what i did

SERVER SIDE (NodeJs)


io.on('connection', (socket) =>{

    socket.on('stream', stream =>{
        console.log(stream)
        socket.broadcast.emit('stream', stream);
      
            
    });

})

Client Side

Html (video.html)


<div id="videos">
    <video id="video" autoplay>

    </video>

</div>
 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>
<script src="js/video.js"></script>

Javascript (video.js)

var socket = io();
navigator.mediaDevices.getUserMedia({
    video  : true,
    audio: true
})
.then(stream =>{
    document.getElementById('video').srcObject = stream
    socket.emit("stream", stream);
})

socket.on('stream', stream=>{

    video = document.createElement("video")
    video.srcObject = stream
    video.setAttribute('autoplay')
    document.getElementById("videos").appendChild(video)
})

This is indeed a great question for newbies like me. Did you find out a good solution for Node.js? — 0xh8h, Jul 28 '20 at 01:58
If you accept answers on time, people will be more glad to assist you : ) — Jason Pan, Feb 19 '21 at 01:27
Duplicated to https://stackoverflow.com/questions/56238148/how-to-use-webrtc-to-stream-video-to-rtmp — Winlin, Mar 08 '23 at 10:46

score 5 · Accepted Answer · answered May 28 '20 at 20:54

5

You will need to do a WebRTC to RTMP bridge on your backend.

There are a lot of things to consider, but this is a common question so I threw together twitch. It is an example of doing this.

answered May 28 '20 at 20:54

Sean DuBois

3,972
1
11
22

thank you for your answer and yeah this what im trying to do but i dont know how , do you have any code examples please – abderrahmane Mustapha May 28 '20 at 21:16
1

Yes it is linked in the answer. It is a Go program that uses `pion/webrtc` and ffmpeg – Sean DuBois May 28 '20 at 22:05
yes thank you, do you know any nodejs or python examples – abderrahmane Mustapha May 29 '20 at 04:38
3

Sean is correct.- Here is my example in Node, using FFMPEG to convert the WebRTC to RTMP: https://github.com/dougsillars/browserLiveStream – Doug Sillars May 30 '20 at 16:40
1

@DougSillars: your demo works very well. Thank you. – 0xh8h Jul 28 '20 at 02:16
1

@DougSillars i am also using your demo which is working very well with custom RTMP server. Same script isn't working when trying to use it with Facebook broadcast api's RTMP server. Do you have any idea what may be the reason ? – Ravi Roshan Oct 06 '20 at 11:05
@RaviRoshan - The demo uses RTMP, but for Facebook, you need RTMPS (secure RTMP): https://developers.facebook.com/docs/live-video-api/ – Doug Sillars Oct 07 '20 at 09:48

broadcast a web-cam to (YouTube, Twitch , facebook) using HTML5 and WebRTC

SERVER SIDE (NodeJs)

Client Side

1 Answers1