node.jsvideo-streaminghtml5-videohttp-live-streaminglive-streaming

Node.js Video Stream WEBM Live Feed to HTML

I have a node.js server that's receiving WEBM blob binary data small packets through socket.io from a Webpage!

(navigator.mediaDevices.getUserMedia -> stream -> mediaRecorder.ondataavailable -> DATA . I'm sending that DATA back to the server. So that includes timestamp and binary data).

How do I stream those back on a http request in a never ending live stream that can be consumed by a HTML webpage simply by adding the URL in the VIDEO tag?

Like this:

<video src=".../video" autoplay></video>

I want to create a live video stream that and basically stream back my Webcam to an html page but I'm a bit lost how do I do that. Please help. Thanks

Edit: I'm using express.js to serve the app.

I just am not sure what I need to do on the Server with the coming webm binary blobs to serve it properly to be consumed by an html page on an endpoint /video

Please help :)

Solution

  • After many failed attempts I was finally able to build what I was trying to:

    Live video streaming through socket.io.

    So what I was doing was:

    1. Start getUserMedia to start the web camera
    2. Start a mediaRecorder set to record intervals of 100 ms
    3. On each available chunk emit an event through socket.io to the server with the blob converted to base64 string
    4. Server sends back base64 converted 100ms video chunk back to all connected sockets.
    5. Webpage gets the chunk and uses mediaSource and sourceBuffer to add the chunk to the buffer
    6. Attach the media source to a video element and VOILA :) the video would play SMOOTHLY. As long as you attach each chunk in order and you don't skip chunks (in which case it stops playing)

    And IT WORKED! BUT was unusable.. :(

    The problem is the mediaRecorder process is CPU intensive and the page cpu usage was jumping to 15% and the whole process was TOO SLOW.

    There was 2.5 seconds latency on the video stream passing through socket.io and virtually the same EVEN if DON'T send the blobs through socket.io but render them on the same page.

    Sooo I found out this works but DOESN'T work for a sustainable video chat service. It's just not designed for it. For recording a webcam video to playback later, mediaRecorder can work but not for live streaming.

    I guess for live streaming there's no way around WebRTC, you MUST use WebRTC to send the video stream to either a peer or a server to send to other peers. DO NOT TRY to build a live video chat service with mediaRecorder. You're only gonna waste your time. I did that for you :) so you don't have to. Just look into webRTC. You may have to use a TURN server. Twilio provide STUN, TURN servers but it costs money. BUT you can run your own TURN server with Coturn and other services but I'm yet to look into that.

    Thanks. Hope that helps someone.