{"id":25235752,"url":"https://github.com/willwade/relayscreen","last_synced_at":"2026-02-11T04:31:39.371Z","repository":{"id":258147570,"uuid":"871959153","full_name":"willwade/RelayScreen","owner":"willwade","description":"Open Wireless display using webrtc ","archived":false,"fork":false,"pushed_at":"2025-02-07T03:36:18.000Z","size":1413,"stargazers_count":1,"open_issues_count":4,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-07T04:25:21.271Z","etag":null,"topics":["aac","assistivetech","nextjs","openaac"],"latest_commit_sha":null,"homepage":"https://owd.acecentre.net","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/willwade.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-10-13T12:28:46.000Z","updated_at":"2025-02-07T03:35:56.000Z","dependencies_parsed_at":"2024-11-15T15:27:31.653Z","dependency_job_id":"e9786ea8-d4ac-47ac-892a-5792dac5846f","html_url":"https://github.com/willwade/RelayScreen","commit_stats":null,"previous_names":["acecentre/owd","willwade/owd","willwade/relayscreen"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/willwade%2FRelayScreen","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/willwade%2FRelayScreen/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/willwade%2FRelayScreen/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/willwade%2FRelayScreen/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/willwade","download_url":"https://codeload.github.com/willwade/RelayScreen/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238315341,"owners_count":19451604,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["aac","assistivetech","nextjs","openaac"],"created_at":"2025-02-11T14:59:23.551Z","updated_at":"2025-02-11T14:59:24.857Z","avatar_url":"https://github.com/willwade.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# OWD - Open Wireless Display\n\nOpen Wireless Display (OWD) is a cross-platform AAC (Augmentative and Alternative Communication) display app built using Next.js. It leverages **WebRTC** for real-time communication and **BLE** (Bluetooth Low Energy) for short-range connectivity. The app includes a QR code feature for device pairing and supports dual connectivity modes (WebRTC over Wi-Fi or BLE) for sending messages from one device (sender) to multiple display devices.\n\n![OWD App Icon](./public/AppImages/ios/512.png)\n\n## Access the App\n\n- **App URL:** [https://owd.acecentre.net/](https://owd.acecentre.net/)\n- **Sender Demo:** [https://owd.acecentre.net/sender](https://owd.acecentre.net/sender)\n\n## Core Purpose\n\nOWD provides a flexible and customizable AAC display, allowing a sender device to communicate text messages to multiple paired display devices in real time. The display application offers visually engaging, fullscreen, animated text display, ideal for AAC communication. Display settings are customizable, including font size, color, and animation styles.\n\n### Key Capabilities\n- **Multi-Display Communication**: Connect and send messages to multiple displays simultaneously via WebRTC or BLE.\n- **Customizable Display**: Configure the font, color, and animations on each display screen.\n- **QR Code Pairing**: Easy device pairing via QR code.\n- **Typing Indicator**: Show \"Typing...\" animations while text is being entered.\n- **Offline Support**: Caches essential files for offline use in Progressive Web App (PWA) environments.\n- **Automatic Reconnection**: Automatically handles reconnection for reliable communication across devices.\n\n## Features\n\n- **Cross-Platform Compatibility**: Works seamlessly across desktops, tablets, and mobile devices.\n- **Dual Connectivity**: Supports both WebRTC (for Wi-Fi connectivity) and BLE (for short-range communication).\n- **Configurable Display**: Customize font styles, colors, animations, and font sizes on each display.\n- **QR Code Pairing**: Generate and scan QR codes for pairing sender and display devices.\n- **Typing Indicator**: Provides real-time feedback when text is being entered on the sender before the message is sent.\n- **Service Worker**: Caches essential files for offline use in Progressive Web App (PWA) environments.\n- **Robust Reconnection Handling**: Automatically reconnects to maintain stable communication if the connection is interrupted.\n\n## Prerequisites\n\n- **Node.js** \u003e= 20.9.0\n- **npm** (comes bundled with Node.js)\n\n## Getting Started\n\n1. **Clone the Repository**:\n\n    ```bash\n    git clone https://github.com/acecentre/owd.git\n    cd owd\n    ```\n\n2. **Install Dependencies**:\n\n    ```bash\n    npm install\n    ```\n\n3. **Run the Development Server**:\n\n    ```bash\n    node server.js\n    ```\n\n4. **View the App**:\n\n    Open [http://localhost:3000](http://localhost:3000) to view the app in your browser.\n\n5. **Build for Production**:\n\n    ```bash\n   next build\n    ```\n\n6. **Start the Production Server**:\n\n    ```bash\n    node server.js\n    ```\n\n## Project Structure\n\n```plaintext\nowd/\n├── components/\n│   ├── DisplayText.js       # Component for displaying animated text\n│   ├── SettingsPanel.js     # Configurable settings panel for the display\n│   └── QRCodeDisplay.js     # QR code generator for pairing devices\n├── pages/\n│   ├── index.js             # Main display page showing AAC messages\n│   ├── sender.js            # Sender page for sending text messages to the display\n│   └── api/\n│       └── signaling.js     # WebRTC signaling server for message exchange\n├── public/\n│   ├── manifest.json        # PWA manifest for offline capabilities\n│   └── service-worker.js    # Service worker script for caching and offline usage\n├── services/\n│   ├── WebRTCService.js     # Manages WebRTC connections and messaging\n│   ├── SocketService.js     # WebSocket management for signaling\n│   └── BLEService.js        # Handles BLE connections for short-range messaging\n└── package.json             # Project metadata and dependencies\n```\n\n## Sender App Development\n\nIf you want to create a custom **sender app** that can communicate with the OWD display (using either WebRTC or BLE), here’s a general approach for platforms like **Swift** (iOS) or **React Native**.\n\n### WebRTC-Based Sender App\n\nFor platforms that support WebRTC (like **React Native** or **iOS** via libraries), you can create a sender app that communicates with the OWD WebRTC signaling server.\n\n#### 1. **Connect to WebRTC Signaling Server**\n   - **React Native**: Use libraries like `react-native-webrtc` to handle the WebRTC connection.\n   - **Swift (iOS)**: Use Apple's native WebRTC library or `WebRTC.framework` to establish a connection.\n\n#### WebRTC Sender Flow:\n1. **Establish WebRTC connection** using the OWD signaling server.\n2. **Generate a session ID** or **scan a QR code** to pair with the display app.\n3. **Send messages** using the data channel (WebRTC).\n\nExample (React Native WebRTC pseudo-code):\n\n```js\nimport { RTCPeerConnection } from 'react-native-webrtc';\n\n// Establish WebRTC connection\nconst peerConnection = new RTCPeerConnection({\n  iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]\n});\n\n// Send message to display device\nconst sendMessage = (message) =\u003e {\n  if (peerConnection.dataChannel.readyState === 'open') {\n    peerConnection.dataChannel.send(message);\n  }\n};\n\n// Handle message typing\nconst handleTyping = () =\u003e {\n  sendMessage('Typing...');\n};\n\n// Send final message when ready\nsendMessage('Hello, this is a message!');\n```\n\n### BLE-Based Sender App\n\nFor short-range communication, your sender app can use BLE to send text data to the display.\n\n#### BLE Sender Flow:\n1. **Scan for BLE devices** supporting the OWD service.\n2. **Connect** to the BLE service using the appropriate UUID.\n3. **Send text messages** to the connected device using BLE.\n\nExample (React Native BLE pseudo-code using `react-native-ble-manager`):\n\n```js\nimport BleManager from 'react-native-ble-manager';\n\n// Connect to BLE device and send message\nBleManager.connect(deviceId).then(() =\u003e {\n  // Send a message via BLE\n  BleManager.write(deviceId, serviceUUID, characteristicUUID, message);\n});\n\n// Notify display when typing\nBleManager.write(deviceId, serviceUUID, characteristicUUID, 'Typing...');\n```\n\n#### BLE with Swift (iOS):\nIf you're developing a native iOS app in **Swift**, you'll need to use **CoreBluetooth** to handle BLE connections and data transmission.\n\n### Sender App Steps for Both Platforms:\n\n1. **Pair with the Display**: Use the session ID or QR code to pair the sender with the display.\n2. **Handle Typing**: Send a \"Typing...\" notification to the display when the user is typing (before sending the actual message).\n3. **Send Messages**: After typing, the user can press a button to send the full message, which will be displayed on the paired OWD display.\n4. **Dual Connectivity**: You can integrate both WebRTC and BLE in a single sender app for more robust connectivity. The app can switch between BLE and WebRTC based on availability.\n\n## Deploying OWD\n\nTo deploy the OWD app to a platform like **Heroku** or **DigitalOcean**, follow these steps:\n\n1. Set up the environment variables for WebRTC signaling and BLE configuration. It needs two\n    environment variables:\n    - `NEXT_PUBLIC_WS_URL`: The URL of the WebRTC signaling server eg wss://owd.acecentre.net.\n    - `NEXT_PUBLIC_BASE_URL`: The base URL of the app eg https://owd.acecentre.net.\n\n2. Define a custom **build command** for your deployment:\n   \n   ```bash\n   npm run build\n   ```\n\n3. Ensure your production server starts correctly with:\n\n   ```bash\n   npm start\n   ```\n\n## Writing a Sender App for Other Platforms\n\nSee our examples at http://github.com/acecentre/owd-utils for some examples but in brief\n\nTo create your own sender app (e.g., in **React Native** or **Swift**), use WebRTC or BLE to pair and send messages to the OWD display. The core logic involves:\n\n- **Pairing**: Generate or scan the session ID using a QR code.\n- **Connecting**: Use WebRTC or BLE for connectivity.\n- **Sending Messages**: Transmit text to the display in real-time.\n- **Custom UI**: Adapt the sender app UI to suit your platform's design guidelines (i.e., React Native’s UI components or Swift’s UIKit).\n\n## License\n\nThis project is licensed under the MIT License.\n\n## Author\n\nCreated by Will Wade.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwillwade%2Frelayscreen","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwillwade%2Frelayscreen","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwillwade%2Frelayscreen/lists"}