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

Posted

技术标签:

【中文标题】如何将流式 rtsp 媒体嵌入到 html5 页面中【英文标题】:How to embed streaming rtsp media into an html5 page 【发布时间】: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 向您展示如何完成此过程:

【讨论】:

有没有在 linux 机器上实现这个的命令行方式? VLC 有一个命令行版本,cvlc,可用于重新流式传输和转码

以上是关于如何将流式 rtsp 媒体嵌入到 html5 页面中的主要内容,如果未能解决你的问题,请参考以下文章

在 HTML5 中通过 RTSP 或 RTP 流式传输

在 HTML5 中通过 RTSP 或 RTP 流式传输

如何通过 nginx 将 rtsp 网络摄像机流式传输到网站

如何将多媒体 HTML/JavaScript 应用程序嵌入到 C++ 代码中

从 FFmpeg 流式传输 RTSP 需要哪些步骤?

如果我的计算机在 NAT 之后,如何通过 UDP 使用 RTSP 流式传输视频?