Потоковая камера Raspberry Pi в VR с JavaScript

Биты, которые изменились из моей статьи «Фильтрация реальности с помощью JavaScript и Google Cardboard», заключаются в том, что все биты, вовлеченные в фактический процесс фильтрации, были удалены. Вы могли бы очень хорошо держать их там и фильтровать изображения с вашей камеры Pi тоже! Однако, чтобы наш пример был простым, а код — относительно чистым, я удалил их.

В нашей функции init() я изменил ширину и высоту холста, чтобы соответствовать входному размеру по умолчанию, который предоставляет программное обеспечение RPi Cam:

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

Тем не менее, когда он запускает nextPowerOf2() чтобы убедиться, что она работает лучше всего в качестве текстуры Three.js, он получится как холст 512 × 512 (только с черным сверху и снизу из моего опыта).

Я PlaneGeometry размер нашей 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 и его сервер Apache, папка /var/www не позволит вам копировать в нее файлы, поскольку вы не являетесь владельцем папки. Чтобы иметь возможность вносить изменения в папку, вам нужно либо использовать команду sudo либо изменить владельца папки и файлов, используя:

 sudo chown -R pi www 

Затем вы можете подключить FTP к вашему Pi в качестве пользователя по умолчанию «pi» и скопировать файлы в каталог или добавить свой проект в удаленное Git-репо и клонировать его в папку (я сделал второй вариант и, таким образом, мог сделать это только через sudo git clone https://mygitrepo без необходимости смены владельца папки или файлов).

Я добавил их в папку с именем piviewer в папке /var/www .

В бою

Если мы добавим этот код на наш сервер, а затем перейдем на наш сервер из мобильного браузера Chrome с IP-адресом нашего Pi и именем папки нашего пользовательского кода (например, у меня было http://192.168.0.12/piviewer ), вы должны увидеть VR настроить, что вы можете просматривать в Google Cardboard!

Вывод

Теперь у нас есть вид виртуальной реальности нашей камеры Raspberry Pi, готовый присоединить этот Pi абсолютно везде, где мы хотим! Виртуальная реальность — забавный вариант для данных камеры, но вы можете использовать их в любом количестве JavaScript или веб-приложений. Так много возможностей, так мало времени! У меня есть свои планы на некоторые дополнения к этой установке, которые будут рассмотрены в будущей статье, если они удастся.

Если вы попробуете этот код и сделаете с ним что-то интересное, оставите заметку в комментариях или свяжитесь со мной в Twitter ( @thatpatrickguy ), я бы с удовольствием посмотрел!