interface

Note

Refer to p4p.jamesnzl.xyz/learn for full details.

This repository contains the user interface for our pick-and-place machine.

Usage

Firstly, clone this repository. Set up SSH Agent Forwarding on the Raspberry Pi if needed.

Bare-Bones Prototype

cd interface/client-prototype
npm ci
npm run build
# Open index.html in a browser

Main Application

git submodule update --init
cd interface/client
npm ci
npm run dev

Interfaces

WebRTC

• WebRTC is used for the real-time low-latency video streaming from MediaMTX on the Raspberry Pi to the web interface.
• WebRtcVideo is a React component created using the Eyevinn/webrtc-player package to receive the WHEP stream and display it in a <video> tag.

WebSocket

• A WebSocket is used for the real-time low-latency full-duplex data channel between the Raspberry Pi and the web interface.
• socket.ts implements the API for this data channel.

Protocol Buffers

• Protocol buffers are used for data exchange.
• See p4p-83/protobufs for the .proto definition(s).