webrtcbroadcastrtmpyoutube-livestreaming-api

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


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)
})

Solution

  • 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.