如何将USB网络摄像头的视频流传输到远程HTML页面?

17
我想创建一个程序,可以从我的USB网络摄像头流式传输视频到网页上。目前,我使用一个WebService来触发调用fswebcam来捕获图像并保存到数据存储中,将其转换为Base64二进制,并将该数据发送到HTML页面,在那里它被呈现到'img'的'src'属性中。 HTML页面有JavaScript代码,每秒钟调用一次此服务。
如您所见,这种方法非常糟糕。如果可能的话,我更愿意拥有一个适当的流。但我不知道可用哪些技术来实现这一点。
WebService是使用nodeJS编写的。服务器运行在raspberry pi 2上。我没有把这个问题放在树莓派论坛中,因为我认为这是一个普遍的Linux / programming问题。
2个回答

3

使用像livecam这样的框架。

使用GStreamer和Node.js的网络摄像头实时流解决方案。

该模块允许您通过网络将您的网络摄像头流式传输到浏览器和/或文件中。有关更多信息,请参见文档。

用法:

// npm install livecam

const LiveCam = require('livecam');
const webcam_server = new LiveCam({
    'start' : function() {
        console.log('WebCam server started!');
    }
});

webcam_server.broadcast();

2
本文在这里用可工作的图片以最简单的方式解释了整个过程。这是Linux的方法,而不是任何node.js脚本。我在此陈述其主要部分。
  • 使用IP地址连接您的Pi。在Raspbian中,“pi”和“raspberry”是默认的“登录名”和“密码”。

  • 要更新系统,请逐个输入命令sudo apt-get updatesudo apt-get upgrade

  • 输入命令sudo apt-get install motion开始安装。

  • 现在,为确保摄像头被正确检测到,请输入命令lsusb并按回车键。您应该看到您的摄像头名称。如果没有出现,则表示您的摄像头存在问题或不支持“motion”。

  • 安装完成后,输入命令sudo nano /etc/motion/motion.conf并按回车键。

  • 然后,您需要在.conf文件中更改一些设置。有时可能很难找到设置,但可以使用 Ctrl + W 进行查找。因此,请按照以下步骤进行:

    1. 确保“daemon”打开。
    2. 将“framerate”设置在1000到1500之间。
    3. 将'Stream_port'保持在8081。
    4. 'Stream_quality'应为100。
    5. 将'Stream_localhost'更改为关闭。
    6. 将'webcontrol_localhost'更改为关闭。
    7. 将“quality”设置为100。
    8. 将“width”和“height”设置为640和480。
    9. 将'post_capture'设置为5。
    10. 按ctrl + x退出。键入y保存并输入以确认。
  • 再次输入命令sudo nano /etc/default/motion并按回车键。

  • start_motion_daemon设置为yes。保存并退出。

  • 首先,您必须重新启动motion软件。要执行此操作,请输入命令sudo service motion restart并按回车键。

  • 再次输入命令sudo motion并按回车键。现在您的服务器已准备就绪。

  • 现在打开浏览器。以以下方式输入您的树莓派IP地址和端口号:

    192.168.0.107:8081(首先是IP地址,然后是“:”,然后是端口号)。按回车键。

现在,您可以直接在笔记本电脑或移动设备上查看来自网络摄像头的实时视频。但是,这只是局域网连接。若要使其公开,请使用公共IP地址进行设置,以便全球任何地方都能访问它。

我尝试使用罗技网络摄像头,它可以工作,但是无论设置如何,图片的尺寸都只有176x144。有什么办法可以使用更高的分辨率吗?framerate的有效值为2到100,因此不可能使用建议的1000到1500之间的参数。 - Chupo_cro
这个有多快或视频流的延迟有多少,你有什么想法吗? - Sterling Butters
1
非常感谢您的回复,它对我帮助很大。然而,在使用您的建议配置系统后,我的Web服务器上的Webcap渲染只有1 FPS。然后我进行了搜索并找到了:https://ubuntuforums.org/showthread.php?t=2128049,它提供了正确的解决方案,以流式传输我的设备的最大FPS。我认为运动选项名称已更改,在我的情况下,我必须设置以下内容才能使其完全工作:stream_motion onstream_maxrate 30#您想要的最大FPS/您的设备可以产生的FPS。如果这不能解决问题,则可能与USB /网络带宽有关。 - utopman

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接