ffmpegwebsocketactivexwebbrowser-controlrtsp

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


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

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