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???