在网络浏览器中嵌入网络摄像机

Question

我目前正在从事一个智能家居项目，它连接传感器和其他东西。主服务器运行在 Raspberry Pi 上，并使用 Node JS 设计。在本地网络上，您可以访问系统网页并查看日志、用户和管理传感器。

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

我搜索了一下，但找不到任何简单的解决方案。我阅读了 RTSP 和 RTMP 协议，它们在这些情况下可能会有所帮助。我也读到有一些插件可用，例如 VLC 和 Quick Time，但我更喜欢不需要它们的解决方案。显然，HTML5 支持这一点，但我无法继续推进。浏览器支持应该不是问题，因为我假装只使用 Google Chrome 和它的最新版本。所以如果有什么容易集成兼容的插件Chrome，应该没问题吧！

我还发现了一些像这样的服务：

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

所以，有人可以帮助解决这种情况吗？如何轻松地将视频从 IP 摄像机流式传输到本地网络中的 Web 浏览器（即使有延迟或滞后）？

谢谢，伊戈尔！

Answer 1

网络摄像机流向哪里？好像没找到流媒体服务器。

您需要RTMP服务器，但有些网络摄像机内置RTMP服务器。
ipcamlive 是一种流媒体服务。但是发送需要带宽。
你不会安装任何插件，但RTMP需要插件，即flash，vlc。您需要转换为 HTTP 协议。例如 HLS、Mpeg-DASH
可以使用nginx-rtmp模块进行转换

Answer 2

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

要像我尝试的那样实现这一点，很大程度上取决于您使用的相机。我用的是 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 并检查是否没有定义任何密码（如果是，请将其也添加到 link 中的字段，同时检查用户！）。

我相信这可能因相机而异，但显然很多相机都使用相同的软件，所以也许可行！

谢谢，伊戈尔！

Answer 3

我已经在 Github 上发布了一个项目，可以帮助您将 ip/network 摄像头实时传输到 Web 浏览器而无需插件，我在 MIT 许可下为可能匹配的开源项目做出了贡献根据您的需要，如果您需要尝试检查一下：

Streaming IP/Network Camera on web browser using NodeJS

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

Answer 4

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

问题在于 IP 摄像机使用 RTSP 协议进行 H264/H265 流式传输。不幸的是，这与网络不兼容。这意味着您需要 convert/transcode 此流才能在网络上播放。更重要的是，如果你想在互联网上发布视频，那么你需要为每个观众提供带宽。

幸运的是，有一些基于云的提供商（例如 ipcamlive.com）可以为您完成这项工作。您需要做的就是注册您的相机，然后将代码段复制并粘贴到您的网页：

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

Answer 5

我使用了来自 RTSP 的 Node js 节点 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>

然后文件加载到浏览器我们就可以得到直播了

在网络浏览器中嵌入网络摄像机

Embed IP camera in web browser

html

rtmp

rtsp

ip-camera

node.js