Decode and display an h264 stream in browser from websocket

Viewed 842

I am trying to display the stream from a live rtp camera in a browser but I am having problems with that. The signal have to be lossless so that's why I am using a ffmpeg pipe (H264 which can be lossless), streamed to a node script which serve the signal via websocket to the javascript client. This is the pipe:

ffmpeg -i rtsp://ipofthertsp -f rawvideo -b 800k -r 30 -framerate 10 -c:v libx264 -preset ultrafast -crf 0 http://127.0.0.1:8081/supersecret/

The flow is as follows:

rtp -> ffmpeg -> (http://127.0.0.1:8081) http-To-ws (ws://127.0.0.1:8082) <- (ws) JavascriptClient

The bytes gets to the client but I don´t know how to handle it.

    function opened() { 
   
        // set up the websocket
        var url = 'ws://127.0.0.1:8082';
        ws = new WebSocket(url);
        ws.binaryType = "arraybuffer";
        ws.onmessage = function (event) {

        var view   = new Uint8Array(event.data);
        console.log('data \r\n', event.data);

            /* what to do from here to paint it*/
        };
    }

And then, I'd like to paint it either in canvas, video... whatever.

Any clue???

0 Answers
Related