在Web浏览器中嵌入IP摄像机

Question

在Web浏览器中嵌入IP摄像机

5

我目前正在开发一个智能家居项目，连接传感器等设备。主服务器运行在树莓派上，并使用Node JS进行设计。在本地网络中，您可以访问系统网页并查看日志、用户以及管理传感器。

我还想添加一个摄像头流功能。我有一个IP摄像头，想将其连接到同一网络，并能够在网页上实时查看。我不介意有些延迟或延迟，并且不需要在家庭网络之外访问服务。

我搜索了一下，但没有找到任何简单的解决方案。我了解了RTSP和RTMP协议，并且它们可能对这些情况有帮助。我还了解到有一些可用的插件，如VLC和Quick Time，但我更喜欢不需要它们的解决方案。显然，HTML5支持此功能，但我无法推进。浏览器支持不应该是问题，因为我打算仅使用Google Chrome及其最新版本。因此，如果有易于集成且与Chrome兼容的插件，那就没问题！

我还发现了一些类似以下的服务：

他们似乎提供了一些免费服务，但我不确定这是否是最佳解决方案。

那么，有人能帮助解决这个问题吗？我怎样才能在本地网络中轻松地从IP摄像头流式传输视频到Web浏览器（即使有延迟或卡顿）？

谢谢，Igor！

- user3735796

5个回答

5

我使用了 Node.js 中的 RTSP 流从一个 RTSP URL 中进行流媒体传输。

Stream = require('node-rtsp-stream')
stream = new Stream({
name: 'name',
streamUrl: 'rtsp://username:password@IP Address/h265/ch1/main/av_stream',
wsPort: 9999,
ffmpegOptions: { // options ffmpeg flags
  '-stats': '', // an option with no neccessary value uses a blank string
  '-r': 30 // options with required values specify the value after the key
}
})

https://www.npmjs.com/package/node-rtsp-stream

同时在系统中通过输入以下命令安装FFmpeg：

sudo apt-get install ffmpeg

以上代码位于后端，而在前端或视图部分，我们输入一个简单的index.html文件。

<!DOCTYPE html>
<html>
<head>
 <title>JSMpeg Stream Client</title>
 <style type="text/css">
    html, body {
        background-color: #111;
        text-align: center;
    }
  </style>

 </head>
 <body>
 <canvas id="video-canvas"></canvas>
 <script type="text/javascript" src="jsmpeg.min.js"></script>
 <script type="text/javascript">
 var canvas = document.getElementById('video-canvas');
 console.log(document.location.hostname);
    var url = 'ws://localhost:9999/';
    var player = new JSMpeg.Player(url, {canvas: canvas});
</script>
</body>
</html>

文件加载到浏览器后，我们可以获取实时流媒体。

- Jojo Joseph

1

它也可以很容易地在React JS中实现。 - Jojo Joseph

可以不使用RTSP吗？ - J.K

1

我在Github上发布了一个项目，可以帮助您实时将IP/网络摄像机流式传输到Web浏览器而无需插件。我将其贡献给了MIT许可下的开源项目，这可能符合您的需求。如果您想尝试，请查看此链接：

使用NodeJS在Web浏览器上流式传输IP/网络摄像机

目前还没有完整的框架包，但这是一个起点，可能会为您提供进一步的方向。作为一名学生，我希望这对您有所帮助，并请为该项目做出贡献。

- Chanrithisak Phok

1

几乎所有相机都支持可以使用IMG标签轻松在Web上显示的MJPEG流。但是，MJPEG流需要非常高的带宽（例如，百万像素分辨率需要20-30mbps）。如果带宽消耗很重要，您需要H264/H265视频流。

问题是IP摄像机使用RTSP协议进行H264/H265流传输。不幸的是，这与Web不兼容。这意味着您需要转换/转码此流才能在Web上播放。而且，如果您想在Internet上发布视频，则需要为每个观众提供带宽。

幸运的是，有一些基于云的提供商（如ipcamlive.com）可以为您完成此工作。您只需要注册您的相机，然后复制+粘贴片段到您的网页即可。

<iframe src="http://ipcamlive.com/player/player.php?alias=mycameraalias" width="1280px" height="960px"/>

- xxxbence

0

IP摄像头的视频流传输到哪里了？我好像找不到流媒体服务器。

你需要RTMP服务器，但有些IP摄像头内置了RTMP服务器。
ipcamlive是一个流媒体服务，但你需要带宽来发送视频流。
你不想安装任何插件，但RTMP需要插件，例如Flash、VLC。你需要转换为HTTP协议，例如HLS、Mpeg-DASH。
你可以使用nginx-rtmp模块进行转换。

- Patrickz

{btsdaf} - user3735796

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user3735796 · Accepted Answer

我解决了这个问题。如果其他人遇到了类似的问题，希望这能有所帮助！

要像我一样实现这一点，很大程度上取决于你使用的摄像头。我使用的是一个rg-ip01相机。某些相机将使用不同的协议和技术。因此，我安装了这个相机并访问了它的IP地址。我检查了网页（在Chrome上）并开始寻找一些线索。一些视图需要ActiveX或Internet Explorer，但移动视图不需要，并且其HTML如下：

<img name="main" id="main" border="0" width="640" height="480" src="http://192.168.1.109:8080/videostream.cgi?loginuse=admin&amp;loginpas=">

我将它插入了我的HTML中，在Chrome上效果非常好！将IP更改为您的摄像头IP并检查是否没有定义密码（如果有，请将其添加到链接字段中，还要检查用户！）。

我认为这可能因相机而异，但显然许多相机使用相同的软件，所以也许它会起作用！

谢谢，Igor！