Best approach to get RTSP streaming into web browser from IP Camera?

Question

Is it possible to get the RTSP Streaming data into the web browser?

Below are some of my findings. Kindly correct me if I am wrong?

1. Only Mac OS, and Safari supports RTSP Live Streaming.

2. HTML 5 video does not support RTSP.

3. I can use the VLC plugin, but I don't want to use that.

Possibility of mixing ffmpeg and websocket?

Assume my IP camera is connected with Ethernet.

In the client machine:

1. I run ffmpeg to get the data from server (ie: IP)
2. Client machine runs websocket.
3. Once ffmpeg gets the data from RTSP Server, it decodes, and generates the raw image of any format (for example: yuv).
4. Now, i have to send this image to browser through websocket.

Question:

1. It is the right approach ?
2. How can I get the decoded image from ffmpeg into the browser ?

I might be wrong in different places. Kindly provide input.

Solution 1

Here is a blog entry, or tutorial if you will, that achieves something very similar.

Their setup slightly different, but this is the summary:

use ffmpeg to convert your input into mpeg1video:

ffmpeg  -i rtsp://whatever -f mpeg1video -b 800k -r 30 http://localhost:8082/yourpassword/640/480/

Install node.js with stream-server.js script from jsmpeg and ws ws WebSocket package.

To view the stream, use the stream-example.html and jsmpg.js from the jsmpeg. Change the WebSocket URL in stream-example.html to localhost and open it in your favorite browser.

Update an SO topic suggest two other working solutions, with <video> tag: with stream-m Java server or with ffserver.

Solution 2

If you want to stream that to only a very few clients, then you could use a cgi (or in nodejs, a child_process) that directly run ffmpeg:

NodeJS example:

app.getExpressApp().get('/camera/feed', (req, res) => {
    // Thanks to https://stackoverflow.com/q/28946904/1954789
    const child_process = require('child_process');

    res.header('content-type', 'video/webm');

    const cmd = `ffmpeg -i rtsp://user:pwd@somewhere/videoSub -c:v copy -c:a copy -bsf:v h264_mp4toannexb -maxrate 500k -f matroska -`.split(' ');

    var child = child_process.spawn(cmd[0], cmd.splice(1), {
        stdio: ['ignore', 'pipe', process.stderr]
    });

    child.stdio[1].pipe(res);

    res.on('close', () => {
        // Kill ffmpeg if the flow is stopped by the browser
        child.kill();
    });

CGI should be even more easier.

In the browser, you could just

<video autoplay=1 poster="camera.png" ><source src="/camera/feed"></video>

(Use a poster because the video may take some seconds before showing up).

Caveat: This will launch a ffmpeg for each connection to your setup, so it does not scale at all. This should be used only for a very personal website, where connections are limited (ex: to yourself only).

PS: the ffmpeg command may need a bit of tweaking.