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

Whoami picture Whoami · Apr 11, 2014 · Viewed 42.3k times · Source

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.

Answer

Alex Cohn picture Alex Cohn · Apr 11, 2014

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.