{"id":23449126,"url":"https://github.com/oeway/webrtc-hypha-demo","last_synced_at":"2025-10-30T19:30:44.984Z","repository":{"id":43440556,"uuid":"509647854","full_name":"oeway/webrtc-hypha-demo","owner":"oeway","description":null,"archived":false,"fork":false,"pushed_at":"2023-12-11T14:58:15.000Z","size":58,"stargazers_count":2,"open_issues_count":2,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-12-23T22:20:42.708Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://oeway.github.io/webrtc-hypha-demo/","language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/oeway.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2022-07-02T03:31:23.000Z","updated_at":"2024-11-29T22:31:04.000Z","dependencies_parsed_at":"2023-12-11T16:03:23.977Z","dependency_job_id":null,"html_url":"https://github.com/oeway/webrtc-hypha-demo","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oeway%2Fwebrtc-hypha-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oeway%2Fwebrtc-hypha-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oeway%2Fwebrtc-hypha-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oeway%2Fwebrtc-hypha-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/oeway","download_url":"https://codeload.github.com/oeway/webrtc-hypha-demo/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239034649,"owners_count":19571136,"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":[],"created_at":"2024-12-23T22:20:20.203Z","updated_at":"2025-10-30T19:30:44.978Z","avatar_url":"https://github.com/oeway.png","language":"Python","funding_links":[],"categories":[],"sub_categories":[],"readme":"# WebRTC Hypha Demo\n\nAn interactive WebRTC microscope simulation with real-time streaming and control capabilities, built with Hypha RPC and modern web technologies.\n\n![WebRTC Demo](https://img.shields.io/badge/WebRTC-Interactive-blue) ![Hypha](https://img.shields.io/badge/Hypha-RPC-green) ![Tailwind](https://img.shields.io/badge/Tailwind-CSS-blue)\n\n## ✨ Features\n\n### 🔬 **Interactive Microscope Simulation**\n- **Realistic Microscope View**: Simulated optical microscope with vignette effects and measurement grid\n- **Live Specimens**: Multiple colored objects with floating motion and pulsing effects\n- **Smooth Navigation**: Real-time position tracking with smooth interpolation\n- **Visual Feedback**: Position indicators, crosshairs, and coordinate displays\n\n### 🎮 **Intuitive Controls**\n- **Floating Controls**: Hover over video to reveal directional navigation buttons\n- **Real-time Movement**: Click arrows to move microscope view in real-time\n- **Position Tracking**: Live X/Y coordinate display with color coding\n- **Image Capture**: Snap function with visual confirmation\n\n### 🎨 **Modern UI Design**\n- **Professional Interface**: Clean, card-based layout with Tailwind CSS\n- **Responsive Design**: Works seamlessly on desktop and mobile devices\n- **Glass Morphism**: Modern visual effects with backdrop blur and transparency\n- **Interactive Animations**: Smooth hover effects and transitions\n\n### 🔐 **Secure Authentication**\n- **Hypha Integration**: Secure login/logout with Hypha authentication\n- **Session Management**: Automatic connection state handling\n- **User Context**: Per-user service isolation and permissions\n\n## 🚀 Quick Start\n\n### Prerequisites\n```bash\npip install -r requirements.txt\n```\n\n### Running the Server\n\n**Option 1: Async Version (Recommended)**\n```bash\npython server.py --service-id your-service-id\n```\n\n**Option 2: Sync Version**\n```bash\npython server_sync.py --service-id your-service-id\n```\n\n### Accessing the Application\n\nThe server provides multiple access points:\n\n1. **Integrated Web App** (Recommended):\n   ```\n   https://hypha.aicell.io/{workspace}/apps/webrtc-demo-app\n   ```\n\n2. **External Web App**:\n   ```\n   https://oeway.github.io/webrtc-hypha-demo/?service_id=your-service-id\n   ```\n\n3. **Local Development**:\n   ```\n   http://localhost:8000 (when running locally)\n   ```\n\n## 🎯 How to Use\n\n### 1. **Login**\n- Click the \"Login\" button in the sidebar\n- Complete Hypha authentication in the popup window\n- Status indicator will show \"Logged in\" when successful\n\n### 2. **Start Streaming**\n- Click \"Start Stream\" to begin video transmission\n- The microscope view will appear with live specimens\n- Stream status indicator shows \"Live\" when active\n\n### 3. **Navigate the Microscope**\n- **Hover** over the video area to reveal floating controls\n- **Click** directional arrows to move the microscope view\n- **Watch** objects move in real-time as you navigate\n- **Monitor** position coordinates in the top-right overlay\n\n### 4. **Capture Images**\n- Click the \"Snap Image\" button to capture the current view\n- Visual confirmation shows successful capture\n- Position information is included with each capture\n\n## 🛠️ Configuration Options\n\n| Option | Description | Default |\n|--------|-------------|---------|\n| `--service-id` | Custom service identifier | `\"aiortc-demo\"` |\n| `--verbose` / `-v` | Enable debug logging | `False` |\n\n## 🏗️ Architecture\n\n### Server Components\n- **`server.py`**: Async WebRTC service with FastAPI integration\n- **`server_sync.py`**: Synchronous version for compatibility\n- **`index.html`**: Modern web interface with Tailwind CSS\n\n### Key Technologies\n- **WebRTC**: Real-time video streaming with aiortc\n- **Hypha RPC**: Service registration and authentication\n- **FastAPI**: Web application framework\n- **Tailwind CSS**: Modern utility-first styling\n- **NumPy**: Video frame generation and processing\n\n### Microscope Simulation\n```python\n# Global state tracking\nmicroscope_state = {\n    \"x\": 240, \"y\": 180,           # Current position\n    \"target_x\": 240, \"target_y\": 180,  # Target position\n    \"objects\": [...]               # Specimen objects\n}\n```\n\n## 🎨 UI Components\n\n### Sidebar Controls\n- **Configuration**: Service ID input\n- **Authentication**: Login/logout with status\n- **Stream Control**: Start/stop streaming\n- **Image Capture**: Snap functionality\n- **Instructions**: User guidance\n\n### Video Interface\n- **Live Stream**: 480x360 microscope view at 30 FPS\n- **Floating Controls**: Hover-activated directional buttons\n- **Status Overlays**: Stream status and position indicators\n- **Visual Effects**: Glass morphism and smooth animations\n\n## 🔧 Development\n\n### File Structure\n```\nwebrtc-hypha-demo/\n├── server.py              # Main async server\n├── server_sync.py          # Sync server version\n├── index.html             # Web interface\n├── requirements.txt       # Python dependencies\n└── README.md             # This file\n```\n\n### Key Functions\n\n**Movement Control**:\n```python\ndef move(value, axis, is_absolute=True, is_blocking=True):\n    \"\"\"Move microscope to specified position\"\"\"\n    \ndef get_position():\n    \"\"\"Get current microscope coordinates\"\"\"\n```\n\n**Video Generation**:\n```python\nclass VideoTransformTrack:\n    \"\"\"Generates realistic microscope view with interactive objects\"\"\"\n```\n\n### Customization\n\n**Adding New Specimens**:\n```python\nmicroscope_state[\"objects\"].append({\n    \"x\": 200, \"y\": 150,\n    \"color\": [255, 200, 100],\n    \"size\": 25\n})\n```\n\n**Adjusting Movement Speed**:\n```python\n# In moveRelative function\ndeltaX = 25  # Smaller values = finer control\ndeltaY = 25\n```\n\n## 🤝 Contributing\n\n1. Fork the repository\n2. Create a feature branch\n3. Make your changes\n4. Test with both server versions\n5. Submit a pull request\n\n## 📝 License\n\nThis project is open source and available under the MIT License.\n\n## 🆘 Support\n\nFor issues and questions:\n- Check the Hypha documentation\n- Review WebRTC troubleshooting guides\n- Open an issue in the repository\n\n---\n\n**Built with ❤️ using Hypha, WebRTC, and modern web technologies**\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foeway%2Fwebrtc-hypha-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foeway%2Fwebrtc-hypha-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foeway%2Fwebrtc-hypha-demo/lists"}