问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

社区维基
1
新手上路，请多包涵

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

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

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

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

  1. https://www.ipcamlive.com/
  2. http://rtsp.live/#login

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

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

谢谢，伊戈尔！

原文由 user3735796 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译node.jshtmlrtsprtmpip-camera
阅读 503
2 个回答
得票最新
社区维基
1
✓ 已被采纳

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

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

我相信这可能因相机而异，但很明显他们中的很多人都使用相同的软件，所以也许它有效！

谢谢，伊戈尔！

原文由 user3735796 发布，翻译遵循 CC BY-SA 3.0 许可协议

社区维基
1

我从 RTSP URL 使用了 Node js 节点 RTSP 流。

 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

上面的代码在后台，同样在前端或者view部分我们打一个简单的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 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题