如何将流式rtsp媒体嵌入到html5页面中 [英] How to embed streaming rtsp media into an html5 page

问题描述

我有一个通过rtsp发送的安全摄像机，我可以在vlc播放器上捕获它，但是我想将其嵌入到我的网页中.我一直在寻找有关如何执行此操作的时间，但未能找到有关如何执行此操作的最新文档.

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.

我也不对vlc进行设置，因此我基本上是想从cam-> rtsp->播放器(如果需要)-> html嵌入.

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!

推荐答案

I..打开VLC并通过媒体"菜单选择打开网络流".

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

II..输入IP摄像机的RTSP字符串(包括凭据)，即 rtsp://test:test@192.168.0.37:554/cam/realmonitor?channel=1&subtype=1 这将是我的IP摄像机.

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..点击播放"按钮旁边的向下箭头，然后选择流".

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

IV..将目标设置为"HTTP"，然后选择"ADD".在端口字段中，您可以在其中设置VLC用于流式传输视频的端口.在此示例中，我使用8080.您可以将路径保留为"/".

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 .选中启用转码"复选框，并将配置文件设置为视频-Theora + Vorbis(OGG).

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

VI..单击螺丝刀+扳手"图标，将封装设置为Ogg/Ogm，将视频编解码器设置为"Theora"，然后将比特率设置为您要在以下位置向您的站点广播流对于它的价值，我只使用与摄像机流相同的比特率即可.此外，您还可以设置帧速率

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..使用分辨率"子标签，可以将自动"用于比例，宽度和高度.如果您的相机没有麦克风或不想广播音频，则可以禁用音频编解码器.禁用字幕.最后单击保存"，然后单击下一步".

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..选中流所有基本流"框，然后单击流".请记住，VLC将在通常会显示视频的位置显示一个黑框.您应该看到视频计时器正好在暂停/播放"按钮上方移动.

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.，然后将此代码放入您的页面:

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>

我的一个如下:

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

X.加载网页以查看视频的外观.如果您看到的是绿色屏幕，请不要担心.只需每5秒刷新一次页面即可强制页面更新流.这对于RTSP视频传输来说很常见.

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.

总而言之，您正在通过VLC将您的PC变成转码器，以吐出HTML5友好的RTSP视频.

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.

我将 1分钟46秒的视频上传到了youtube，向您展示了如何完成此过程:

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

这篇关于如何将流式rtsp媒体嵌入到html5页面中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！