使用JavaScript将Raspberry Pi相机流式传输到VR

最新推荐文章于 2024-09-13 08:33:26 发布

dingshi7798

最新推荐文章于 2024-09-13 08:33:26 发布

阅读量195

点赞数

文章标签： javascript raspberry pi git ViewUI

我花了整整一周的时间对Raspberry Pi相机进行修改，并探索将其流式传输到Web浏览器的方法。在本文中，我们将探索我发现的将图像流式传输到客户端JavaScript的最简单，最有效的方法。最后，我们将这些图像流式传输到我在上一篇文章“使用JavaScript和Google Cardboard过滤现实”中构建的Virtual Reality查看器中。

您需要什么

对于此演示，您当前需要一个安装了Raspbian的Raspberry Pi（我使用Raspberry Pi 2 Model B ）（此处已介绍了NOOBS ），具有Internet连接（建议您使用Wi-Fi适配器，以便您的Pi可以相对便携）和相机模块。

如果您的Pi是全新的并且尚未设置，请按照Raspberry Pi NOOBS设置页面上的说明进行操作，以准备好使用Pi。

如果您的Pi上已经有很多东西，请确保备份所有内容，因为安装过程将替换各种文件。希望一切都可以很好地进行，但是安全起见总是很重要的！

编码

我们的使用相机数据的演示代码可在GitHub上访问，以供那些渴望下载并试用的人使用。

连接您的Pi相机

如果您是Raspberry Pi的新用户并安装了相机，我将在这里快速介绍它。基本上，您要轻轻打开的开口周围有一个塑料容器（称为柔性电缆连接器）。为此，将连接器顶部的卡舌向上并朝以太网端口拉。松开它之后，就可以插入相机的柔性电缆了。电缆的一侧上有一条蓝色长条，连接该电缆时，应使其一侧朝向以太网端口。注意保持电缆笔直（不要以一定角度将其放入插槽中，它应笔直插入）。这是我的相机柔性电缆正确连接的照片，以显示我们在这里寻找的东西：

树莓派相机已连接

RPi Cam Web界面

我发现从Pi相机流式传输图像的最简单方法是使用RPi Cam Web界面。您运行一些基本的终端命令进行安装，然后将其设置在可以使用的Apache服务器上。

如果您已经从头开始安装Raspbian，则可能已经在随后出现的配置屏幕中启用了摄像机。如果没有，您可以通过输入以下命令来实现：

sudo raspi-config

在该屏幕上，您将能够选择“启用相机”，单击该选项，然后从出现的屏幕中选择“启用”。

Raspberry Pi摄像头启用屏幕

接下来，请确保您的Raspberry Pi是最新的（在此之前，我要重申–将其备份以确保安全）。我们首先下载最新的存储库软件包列表：

sudo apt-get update

然后，我们可能会发现对Pi上现有存储库的任何更新：

sudo apt-get dist-upgrade

最后，我们也更新了Raspberry Pi软件本身：

sudo rpi-update

然后，我们从GitHub存储库中安装RPi Cam Web Interface本身。转到您的Pi上您想要将存储库克隆到的位置，然后运行git clone命令：

git clone https://github.com/silvanmelchior/RPi_Cam_Web_Interface.git

这将创建一个RPi_Cam_Web_Interface文件夹，并已安装了bash安装程序。首先，转到该目录：

cd RPi_Cam_Web_Interface

更新bash文件的权限，以便您可以运行它：

chmod u+x RPi_Cam_Web_Interface_Installer.sh

然后运行bash安装程序：

./RPi_Cam_Web_Interface_Installer.sh install

安装程序具有更多的可视界面。我是通过Apache服务器选项（第一个选项）亲自安装的，因此以下所有内容均将重点放在该方法上。如果您喜欢使用Nginx服务器，则可以。我以为很多过程都相对相似。

Raspberry Pi Cam安装屏幕

然后，您将指定RPi Cam Web Interface放置在服务器的/var/www目录中的位置。如果未列出任何内容，它将安装在根目录/var/www文件夹中。我将其安装在名为picam的文件夹中，以使其分开。

凸轮安装位置屏幕

在下一个屏幕上，对于是否要让相机在启动时自动启动，我选择了“是”。

在启动提示下启动相机

然后，安装程序将询问您要在哪个端口上运行。我将其保留为默认端口80。

相机选择端口画面

然后将提示您是否需要Web服务器安全性。这将为您的服务器创建一个htaccess用户名和密码。我说“不”是出于测试目的，因为我已经将其放在子文件夹中。在此演示中，我们将在其他子文件夹中创建其他功能，因此，如果您担心有人在监视Pi的服务器，则建议在根目录上为整个服务器提供安全性！

在Apache服务器上启用网络安全

程序将询问您是否要重新启动系统，输入y并让您的Pi自行备份。当它重新打开时，相机上的灯应亮起，表明它正在监视周围的环境。

要查看您的相机看到的内容，您可以访问RPi Cam Web界面提供的预建相机界面。为此，您首先需要知道Pi的IP地址。不确定如何？为此，您可以输入：

ifconfig

这将是该列表中为数不多的实际IP地址之一。根据您本地网络的设置，它应该相对简单一些，例如192.168.0.3 。对我来说，这是192.168.0.12因为我的网络上还有很多其他设备。

在同一本地网络上的计算机上打开Web浏览器，然后输入Pi的IP地址，然后输入您将Pi摄像机Web东西安装到的文件夹名称（例如http://192.168.0.12/picam ）。它应该打开您相机的网络视图！这是显示键盘令人难以置信的沉闷景象的视图：

Raspberry Pi相机正在运行

如果要删除日期和时间在顶部的文本，请打开“摄像机设置”，然后在“注释”中删除文本：

从相机中删除注释

通过JavaScript访问相机图像

尽管这个界面可以做很多非常漂亮的事情，包括远程图像捕获，视频记录，运动检测等，但作为一个喜欢修补和构建自己的东西的开发人员，我想将这些图像插入自己的作品中。特别是，我想尝试将其引入我在上一篇文章“使用JavaScript和Google Cardboard过滤现实”中创建的Google Cardboard VR / AR设置中。这样，我们可以戴上Google Cardboard耳机并远距离观看相机。将Raspberry Pi连接到家用宠物，遥控车上，将其放置在鱼缸或仓鼠围栏旁边，然后享受实时VR体验，从新角度坐下来观看事物！

要从JavaScript远程访问摄像机中的图像，我们需要以下URL结构（用IP地址和文件夹替换您环境中的IP地址和文件夹）：

"http://192.168.0.12/picam/cam_pic.php?time=" + new Date().getTime()

我们通过new Date().getTime()附加当前时间戳，以确保获取最新图像。

为了在JavaScript和HTML5画布中访问这些图像而不会遇到跨域资源共享错误，我们也将在Pi上运行此JavaScript。它使事情变得轻松简单。如果要从其他服务器访问图像，请阅读跨域资源共享和同源策略。

我们不会在本文中介绍所有的VR和Three.js理论，因此，请阅读我以前的文章，其中有关使用JavaScript和Google Cardboard过滤现实以及使用Google Cardboard和Three.js将VR引入网络的更多信息。如果您不熟悉这些。

与我的JavaScript和Google Cardboard筛选现实文章相比，这些内容已更改为已删除了实际过滤过程中涉及的所有位。您可以将它们放在那里并过滤您的Pi摄像机图像！但是，为了使我们的示例简单且代码相对简洁，我删除了这些内容。

在我们的init()函数中，我已经调整了画布的宽度和高度，以匹配RPi Cam软件提供的默认传入尺寸：

canvas.width = 512;
  canvas.height = 288;

但是，当它确实运行nextPowerOf2()函数以确保它作为Three.js纹理最有效时，它将最终成为512×512的画布（根据我的经验，顶部和底部均为黑色）。

我也将PlaneGeometry调整为512×512：

var cameraPlane = new THREE.PlaneGeometry(512, 512);

我还将相机移到更靠近我们的飞机的位置，以确保它覆盖了视野：

cameraMesh.position.z = -200;

animate()函数有很大的不同，因为我们不再看设备的摄像头，而是在每个动画帧上将图像从HTTP请求中拉到我们的Pi摄像头。该函数如下所示：

function animate() {
    if (context) {
      var piImage = new Image();

      piImage.onload = function() {
        console.log('Drawing image');
        context.drawImage(piImage, 0, 0, canvas.width, canvas.height);

        texture.needsUpdate = true;
      }

      piImage.src = "http://192.168.0.12/picam/cam_pic.php?time=" + new Date().getTime();
    }

    requestAnimationFrame(animate);

    update();
    render();
  }

我们将Pi的相机图像存储在名为piImage的变量中。我们将其src设置为前面提到的URL。当我们的浏览器加载图像后，它会触发piImage.onload()函数，该函数将该图像绘制到我们网页的canvas元素上，然后告诉我们Three.js纹理它需要更新。然后，我们的Three.js PlaneGeometry纹理将更新为来自Pi相机的图像。

添加到我们的服务器

有多种方法可以将其传输到我们Pi的服务器上。默认情况下，如果您刚刚设置了Pi及其Apache服务器，则/var/www文件夹将不允许您将文件复制到其中，因为您不拥有该文件夹。为了能够更改文件夹，您需要使用sudo命令或使用以下命令更改文件夹和文件的所有者：

sudo chown -R pi www

然后，您可以作为默认的“ pi”用户通过FTP进入Pi，然后将文件复制到目录中，或者将您的项目添加到远程Git存储库中，然后将其克隆到文件夹中（我做了第二个选择，因此可以通过sudo git clone https://mygitrepo而无需更改文件夹或文件的所有者）。

我将它们添加到/var/www文件夹中名为piviewer的文件夹中。

行动中

如果我们将此代码添加到服务器上，然后使用Pi的IP地址和自定义代码的文件夹名称（例如，我的网站为http://192.168.0.12/piviewer ）从移动Chrome浏览器转到服务器，您应该会看到一个您可以在Google Cardboard中查看的VR设置！

我们的Raspberry Pi Cam在行动！

结论

现在，我们有了Raspberry Pi相机的虚拟现实视图，可以随时将Pi附加到我们想要的任何位置！尽管虚拟现实是摄影机数据的有趣选择，但您也可以将其引入任何数量的JavaScript或Web应用程序中。这么多的可能性，那么少的时间！我对此计划有一些自己的计划，如果他们能解决的话，将在以后的文章中介绍。

如果您尝试使用此代码并使之有趣，请在注释中留下注释，或在Twitter（ @thatpatrickguy ）上与我联系，我很乐意看一下！

From: https://www.sitepoint.com/streaming-a-raspberry-pi-camera-into-vr-with-javascript/