Небольшая предыстория

Я занимаюсь разработкой роботов (как хобби) уже долгое время, и столкнулся с проблемой передачи видео через интернет со своего Raspberry PI 4 и Raspberry PI zero.

Сначала идея была в реализации WebRTC на node js, про что я написал в этой статье. Как было написано, проблема заключалась в высокой загрузке процессора.

WebRTC и Ghrome.

Chrome имеет высокую производительность, особенно его реализация WebRTC это что то.

В какое то время мне попалась статья на медиуме, в которой поднимался такой же вопрос, который меня мучает уже несколько лет — ссылка.

Довольно странный способ, но если перфоманс действительно такой, то почему бы и нет?

Реальная ситуация

После проверки этого способа возникла уже другая проблема - хромиум не видит камеру. так как версия ОС другая, плюс прошло уже немало времени. В добавок ко всему этому, способ, описанный у linux-project уже не работает так как поменялась апи камеры в Raspberian.

Но и тут можно решить эту проблему - создав виртуальную камеру, используя gststreamer, про это хорошо написано в этом топике.

Пример рабочего решения

Итак, решение, которое я собрал воедино, следующее:

• Создаем виртуальную камеру, используя gststreamer

• Запускаем localhost, который будет отдавать только веб страницу (можно также в нем реализовать сокет подключение и для передачи сигналов WebRTC и т. п.). Для тестирования буду использовать этот сервис и для передачи веб страницы для тестирования

• Запускаем chromium-browser который будет переходить на страницу сервиса, создающего WebRTC

• Тестируем и радуемся!

Создание виртуальной камеры

Для начала, устанавливаем gststreamer:

sudo apt-get install -y gstreamer1.0-tools gstreamer1.0-plugins gstreamer1.0-libcamera

Далее необходимо установить сервис v4l2loopback-dkms и активировать его:

sudo apt-get install -y v4l2loopback-dkms

Открываем файл

sudo nano /etc/modules-load.d/v4l2loopback.conf

И добавляем в него v4l2loopback

Теперь необходимо создать виртуальную камеру. Для этого открываем файл

sudo nano /etc/modprobe.d/v4l2loopback.conf

и добавляем туда

options v4l2loopback video_nr=8
options v4l2loopback card_label="Chromium device"
options v4l2loopback exclusive_caps=1

где video_nr=8 это номер видео девайса. Если в системе используется, укажите другой

Перезагружаем систему и проверяем ls /dev/ - тут в списке должна быть камера под указанным номером.

Для запуска виртуальной камеры используем команду:

gst-launch-1.0 libcamerasrc ! "video/x-raw,width=1280,height=1080,format=YUY2",interlace-mode=progressive ! videoconvert ! v4l2sink device=/dev/video8

И теперь можем получить Raspberry PI камеру из под хромиума.

Создание сервиса WebRTC

Для создания сервиса я так же буду использовать node js.

Мне также понадобится сокет соединение для передачи сигналов между пирами.

Код сервиса:

const path = require("path");
const express = require("express");
const app = express();
const server = require("http").createServer(app);

const { Server } = require("socket.io");

const io = new Server(server, {
    cors: {
        origin: true,
        methods: ["GET", "POST"],
        transports: ["polling", "websocket"],
    },
    allowEIO3: true,
    path: "/api/socket/",
});

const port = process.env.PORT || 3001;
//Здесь отдаем скрипты
app.use('/static', express.static(path.join(__dirname, 'src/public')))
app.use('/static_web', express.static(path.join(__dirname, 'src_web/public')))
// Отдаем страницу сервиса, которая запусукается в хромиуме
app.get("/service", function (req, res) {
    console.log('service')
    res.sendFile(path.join(__dirname, './src/index.html'));
});

//Отдаем тестовую страницу
app.get("/main", function (req, res) {
    console.log('main')
    res.sendFile(path.join(__dirname, './src_web/index.html'));
});

server.listen(port);
let serviceSocketId = null;
let webSocketId = null;

io.on("connection", (socket) => {
    //Эта часть для инициализации коммуникации сервис - клиент
    console.log("connect");
    socket.on("init_service", (message) => {
        serviceSocketId = socket.id;
    });
    socket.on("init_web", (message) => {
        webSocketId = socket.id;
    });
    socket.on("message_from_service", (message) => {
        console.log('message_from_service', message);
        socket.to(webSocketId).emit("signal_to_web", message);
    });

    socket.on("message_from_web", (message) => {
        console.log('message_from_web', message);
        socket.to(serviceSocketId).emit("signal_to_service", message);
    });
});

HTML будет выглядеть таким образом:

Сервис -

<!DOCTYPE html>
<html lang="en">
        <head>
                <meta charset="utf-8" />
        </head>
        <body>
        </body>
        <script src="./simplepeer.min.js"></script>
        <script type="importmap">
                {
                        "imports": {
                                "socket.io-client": "https://cdn.socket.io/4.7.2/socket.io.esm.min.js",
                                "simple-peer": "https://cdnjs.cloudflare.com/ajax/libs/simple-peer/9.11.1/simplepeer.min.js"
                        }
                }
        </script>
        <script src="./static/script.js" type="module"></script>
</html>

Клиент (веб тестовая страница) -

<!DOCTYPE html>
<html lang="en">
        <head>
                <meta charset="utf-8" />
        </head>
        <body>
                <video id="localVideo" autoplay muted="muted"></video>
        </body>
        <script type="importmap">
                {
                        "imports": {
                                "socket.io-client": "https://cdn.socket.io/4.7.2/socket.io.esm.min.js",
                                "simple-peer": "https://cdnjs.cloudflare.com/ajax/libs/simple-peer/9.11.1/simplepeer.min.js"
                        }
                }
        </script>
        <script src="./static_web/script.js" type="module"></script>
</html>

Как видно, разница только в video тэге.

Сами скрипты -

import { io } from "socket.io-client";

const socket = io('http://localhost:3001', {
    path: '/api/socket/',
});
let config = {
    iceServers: [
        { urls: 'stun:stun.l.google.com:19302' }
    ]
};
const peer = new RTCPeerConnection(config);

socket.on('connect', () => {
    socket.emit('init_service');

    socket.on('signal_to_service', async (message) => {
        if (message.offer) {
            await peer.setRemoteDescription(new RTCSessionDescription(message.offer));
            const answer = await peer.createAnswer();
            await peer.setLocalDescription(answer);
            socket.emit('message_from_service', { answer });

            navigator.mediaDevices.getUserMedia({ video: true }).then((stream) => {
                peer.addStream(stream);
            });
        }
        if (message.answer) {
            await peer.setRemoteDescription(message.answer);
        }
        if (message.iceCandidate) {
            await peer.addIceCandidate(message.iceCandidate);
        }
    });
})

peer.onicecandidate = (event) => {
    socket.emit("message_from_service", { iceCandidate: event.candidate });
};

И скрипт веб страницы -

import { io } from "socket.io-client";
// тут необходимо указать локальный ip адресс, если тестируется не на Raspberry PI
const socket = io('http://localhost:3001', {
    path: '/api/socket/',
});

let config = {
    iceServers: [
        { urls: 'stun:stun.l.google.com:19302' }
    ]
};

const peer = new RTCPeerConnection(config);

socket.on("signal_to_web", async (message) => {
    if (message.answer) {
        await peer.setRemoteDescription(message.answer);
    }

    if (message.iceCandidate) {
        await peer.addIceCandidate(message.iceCandidate);
    }
});

peer.onicecandidate = (event) => {
    socket.emit("message_from_web", { iceCandidate: event.candidate });
};

peer.ontrack = (event) => {
    const video = document.getElementById('localVideo');

    if (video) {
        video.srcObject = event.streams[0];
        video.play();
    }
};

const init = async () => {
    const offer = await peer.createOffer({ offerToReceiveVideo: true, });
    await peer.setLocalDescription(offer);

    socket.emit("message_from_web", { offer });
};


socket.on('connect', () => {
    // После подключения к серверу, инициализируем пользователя и 
    // отправляем оффер
    socket.emit('init_web');
    init();
})

После создания всех необходимых файлов и запуска сервисов, можно запустить хромиум.

Тут важно отметить, что его можно запускать не только с GUI!

chromium-browser --no-sandbox --headless --use-fake-ui-for-media-stream --remote-debugging-port=9222 http://localhost:3001/service

После этого можно перейти по адресу — localhost:3001/main или <RaspberryPI-IP>:3001/main и через какое то время должно появиться видео.

Что касаемо производительность — она много лучше, чем в моей первой реализации чисто на node js.

Вот пара метрик -

Стоит также отметить, что изменение разрешения видео (что очевидно) влияет на загрузку.

Этот код также был протестирован на Raspberry Pi Zero 2.

P.S — кажется, что для меня это решение единственное, которое имеет низкую загрузку процессора и которое также позволяет добавлять различный функционал.

В планах - использовать TensorflowJS.