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.

up vote 14 down vote accepted

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

  • Does this support audio? – Goot Sep 1 '15 at 18:23
  • In theory, it does. I would recommend the <video> tag solution better. – Alex Cohn Sep 2 '15 at 9:28
  • I mean does it support streaming the audio of the video, just by using the video tag ? :) – Goot Sep 2 '15 at 9:56
  • Yes, <video> tag supports both; but it is your responsibility to prepare the relevant stream. – Alex Cohn Sep 2 '15 at 11:16
  • I cant find the stream-server.js script, could you explain that further, currently I set a local httpserver with nodejs and install jsmpeg aswell, thanks – utdev Jun 23 '17 at 7:24

I need to show a streaming in different plataforms and browsers. To make that without use of any pluggins (not sure it will works on smartphones and tablets), used a approach very similar to yours. A ffmpeg crontab task creates 3 images per second, and store into a directory. Using Jquery, an ajax call to a php read the directory and get the name of the file, to change the image (only changing the 'src' attribute of <img>), every 330ms. To solve the storage problem, used other crontab task that delete the files with more than 1 minute. It´s not real streaming, but is cross browser, and solves the problem pretty well.

The ffmpeg task

ffmpeg -i "rtsp://path/to/cam" -s 320x240 -f image2 -vf fps=fps=3 cache/%04d.jpg

Example ajax call

$.ajax({
        url: '_read_dir.php',
        type: 'POST',
        dataType: 'json'
    })
    .done(function(result) {        
        $("#img_cam").prop('src',"cache/" + result.img);            
    });

The storage control task

find /var/www/path/to/dir -mmin +1 -exec rm -f {} \;

Hope can help! :)

Your Answer

 

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.