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,

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:test@192.168.0.37: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: