如何将流式 rtsp 媒体嵌入到 html5 页面中答案

【问题标题】：How to embed streaming rtsp media into an html5 page如何将流式 rtsp 媒体嵌入到 html5 页面中
【发布时间】：2018-02-02 18:04:55
【问题描述】：

我有一个通过 rtsp 发送的安全摄像头，我可以在 vlc 播放器上捕获它，但我想将它嵌入到我的网页中。我一直在寻找如何做到这一点的几个小时，但没有找到任何关于如何做到这一点的最新文档。

我也没有设置 vlc，所以我基本上是尝试从 cam -> rtsp -> player（如果需要）-> html embed。

任何帮助将不胜感激。我知道这是一个悬而未决的问题，但我无法在网上找到我需要的东西，所以我愿意接受任何解决方案。

话虽如此，我并不是在寻找第 3 方提供商来向我发送流。出于安全原因，溪流不会离开大院。

也请不要向我发送旧文章的旧链接。我已经搜索并且可能已经阅读了它们，我的经验是事情已经改变了。我正在寻找经历过类似问题并能够解决这些问题的人的一些答案。谢谢！

【问题讨论】：

How can I display an RTSP video stream in a web page?的可能重复
那是从 2014 年开始的，我发现从那以后情况发生了很大变化。喜欢 chrome 插件支持。
还不错；我同意更新的答案会很好。你看过这些最近的帖子吗？ stream RTSP to HTML website 和 Displaying RTSP on website。我对 rtsp 不是很熟悉，但乍一看这个过程对我来说并不简单。
第一篇很有意思，我正在尝试使用xvg，但无法连接。我不断收到 websocket 错误，所以我必须弄清楚。如果有人对此有任何经验，我将不胜感激。
@stevelacerda7 该问题的答案仍然相关。什么也没有变。在任何情况下，不要重新发布问题...悬赏现有问题，如果您认为可能有一些更新的答案，请要求更新。

【解决方案1】：

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

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

III.点击播放按钮旁边的向下箭头并选择“流”。

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

V.选中激活转码复选框并将配置文件设置为“视频 - Theora + Vorbis (OGG)。

VI. 点击螺丝刀 + 扳手图标，将封装设置为 Ogg/Ogm，将视频编解码器设置为“Theora”，然后将比特率设置为您希望在 (对于它的价值，我只是使用与相机流相同的比特率。此外，您还可以设置帧率

VII. 使用子标签“分辨率”，您可以使用“自动”来显示比例、宽度和高度。如果您的相机没有麦克风或不想播放音频，您可以禁用音频编解码器，并禁用字幕。最后点击“保存”，然后点击“下一步”。

VIII.选中“流式传输所有基本流”复选框，然后单击“流式传输”。请记住，VLC 将显示一个黑框，其中视频通常是预期的。您应该会看到视频计时器在暂停/播放按钮上方移动。

IX.然后将此代码放入您的页面：

<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 视频传输中很常见。

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

我上传了1min 46sec video 到 youtube 向您展示如何完成此过程：

【讨论】：