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

问题描述 投票:0回答:2

我有一个通过 rtsp 发送的安全摄像头,我可以在 vlc 播放器上捕获它,但我想将其嵌入到我的网页中。我已经搜索了几个小时来了解如何执行此操作,但未能找到任何有关如何执行此操作的最新文档。

我也没有设置vlc,所以我基本上尝试从cam - > rtsp - >播放器(如果需要) - > html嵌入。

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

话虽如此,我并不是在寻找第三方提供商将流发送给我。出于安全原因,溪流不会退出大院。

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

html video-streaming media vlc
2个回答
15
投票

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

II. 输入您的网络摄像机的 RTSP 字符串(包括凭据),即

rtsp://test:[email protected]:554/cam/realmonitor?channel=1&subtype=1
这将用于我的网络摄像机。

III. 单击“播放”按钮旁边的向下箭头,然后选择“流”。

IV. 对于目标,将其设置为“HTTP”,然后选择“ADD”。在端口字段中,您可以设置 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 视频。

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


0
投票

项目名称:连续央视直播集成

我需要一位具有实时视频流专业知识的专业人士,将连续的闭路电视摄像机实时直播嵌入到网站仪表板上。直播需要加入某些安全功能,即 IP 限制。

主要职责:

  • 将连续的闭路电视源嵌入到网站仪表板上
  • 对直播实施IP限制

理想的技能和经验:

  • 拥有闭路电视直播集成的丰富经验
  • 拥有丰富的网络开发和直播视频流知识
  • 具有在视频源中实施安全功能的经验
  • 良好的更新和查询沟通能力
© www.soinside.com 2019 - 2024. All rights reserved.