How to embed streaming rtsp media into an html5 page

Question

I have a security cam that sends via rtsp, which I'm able to capture on vlc player, but I want to embed that into my webpage. I've been searching for hours on how to do this, but have failed to find any recent documentation on how to do this.

I am not set on vlc either, so I'm basically trying to go from cam -> rtsp -> player (if required) -> html embed.

Any help would be appreciated. And I know this is an open question, but I'm failing to find what I need on the net, so I'm open to any solutions.

With that said, I'm not looking for 3rd party providers to send the stream to me. For security reasons, the stream will not exit the compound.

Please do not send me old links to old articles either. I have scoured and probably read them already, and my experience is that things have changed. I'm looking for some answers from people who have experienced similar issues and been able to resolve them. Thanks!

Answer 1

I. Open VLC and select "Open Network Stream" via the Media menu.

II. Input your IP camera's RTSP string (credentials included) i.e rtsp://test:[email protected]:554/cam/realmonitor?channel=1&subtype=1 which would be for my IP camera.

III. Click the down arrow next to the Play button and select "Stream".

IV. For the destination set it to "HTTP" then select "ADD". In the port field this is where you can set what port VLC uses to stream the video. In this example I used 8080. The path you can leave as "/".

V. Check the box for Activate Transcoding and set the profile to "Video - Theora + Vorbis (OGG).

VI. Click the Screwdriver + Wrench icon, set encapsulation to Ogg/Ogm, the video codec to "Theora" then set the bitrate to what you want to broadcast the stream to your site at (for what its worth I simply use the same bit rate as I am having the camera stream at. In addition you can also set your framerate

VII. Using the sub tab "Resolution" you can use "Auto" for scale, width, and height. You can disable the audio codec if you camera does not have a mic or do not want to broadcast the audio, & disable subtitles. Finally click "Save" then "Next".

VIII. Check the box for "Stream all elementary streams" and then click "Stream". Keep in mind VLC will show a black box where video would normally be which is intended. You should see the video timer moving just above the Pause/Play button.

IX. Then drop this code into your page:

<video id="video" src="http://IP_of_VLC_computer:VLC_Port" autoplay="autoplay" width="videowidth" height="videoheight"></video>

One of mine is as follows:

<video id="video" src="http://192.168.0.4:8080" autoplay="autoplay" width="704" height="480"></video>

X. Load your web page to see what the video looks like. Do not be concerned if you see what looks like a green screen. Just refresh the page every 5 secs or so to force the page to update the stream. That is common with RTSP video transport.

To sum it up you are turning your PC into a transcoder by way of VLC to spit out RTSP video that is HTML5 friendly.

I uploaded a 1min 46sec video to youtube to show you how to complete this process: