11

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!

stevenlacerda
  • 1,187
  • 2
  • 9
  • 21
  • 1
    Possible duplicate of [How can I display an RTSP video stream in a web page?](https://stackoverflow.com/questions/2245040/how-can-i-display-an-rtsp-video-stream-in-a-web-page) – showdev Feb 02 '18 at 18:12
  • 5
    That's from 2014, and what I've found is that things have changed a bunch since then. Like chrome plugin support. – stevenlacerda Feb 02 '18 at 18:22
  • Fair enough; I agree an updated answer would be nice. Have you checked out these more recent posts? [stream RTSP to HTML website](https://stackoverflow.com/questions/42598475/stream-rtsp-to-html-website) and [Displaying RTSP on website](https://stackoverflow.com/questions/39643437/displaying-rtsp-on-website). I'm not very familiar with rtsp, but the process does not look trivial to me at first glance. – showdev Feb 02 '18 at 19:04
  • The first article is interesting, I'm trying with xvg, but failing to connect. I keep getting a websocket error, so I'll have to figure that out. If anyone has any experience with this, I would much appreciate it. – stevenlacerda Feb 02 '18 at 20:38
  • @stevelacerda7 The answers on that question are still relevant. Nothing has changed. In any case, don't re-post questions... put a bounty on an existing one and ask for updated answers if you feel there might be some. – Brad Feb 04 '18 at 05:56

1 Answers1

15

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:

B.DeWitt
  • 159
  • 4