DRAFT_14 implementation with publisher and player

.github/workflows/gh-pages.yaml

@@ -0,0 +1,48 @@
+name: Deploy to GitHub Pages
+
+on:
+  # Trigger the workflow every time you push to the `main` branch
+  # Using a different branch name? Replace `main` with your branch’s name
+  push:
+    branches: [ feat/draft-14 ]
+  # Allows you to run this workflow manually from the Actions tab on GitHub.
+  workflow_dispatch:
+
+# Allow this job to clone the repo and create a page deployment
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout your repository using git
+        uses: actions/checkout@v5
+      - name: Build lib
+        working-directory: lib
+        run: |
+          npm ci
+          npm run build
+      - name: Install, build, and upload your site
+        uses: withastro/action@v5
+        with:
+          path: . # The root location of your Astro project inside the repository. (optional)
+          node-version: 22 # The specific version of Node that should be used to build your site. Defaults to 22. (optional)
+          package-manager: npm@latest # The Node package manager that should be used to install dependencies and build your site. Automatically detected based on your lockfile. (optional)
+          build-cmd: npm run build # The command to run to build your site. Runs the package build script/task by default. (optional)
+        env:
+          PUBLIC_RELAY_HOST: 'https://interop-relay.cloudflare.mediaoverquic.com'
+
+  deploy:
+    needs: build
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
+        publish_dir: demo

demo/README.md

@@ -0,0 +1,218 @@
+# MoQT Demo Site
+
+A clean, minimal demo site showcasing the MoQT (Media over QUIC Transport) protocol for ultra-low latency video streaming.
+
+## Overview
+
+This demo consists of two main pages:
+- **Publisher (`index.html`)**: Start broadcasting and generate player links
+- **Player (`player.html`)**: View live streams with ultra-low latency
+
+## Quick Start
+
+### Local Development
+
+1. **Setup and serve the demo**:
+   ```bash
+   # From the root moq-demo-site directory
+   npm run setup          # Copy MoQ library files to demo/lib/
+   npm run dev           # Start local server with required headers
+   ```
+
+2. **Open the publisher**:
+   - Navigate to http://localhost:8080/
+   - Click "Start Publishing" to begin broadcasting
+   - Copy the generated player link to share with viewers
+
+**Note**: We use a custom Node.js server that includes the required WebTransport headers (`Cross-Origin-Opener-Policy`, `Cross-Origin-Embedder-Policy`, etc.) that simple static servers don't support.
+
+## Configuration
+
+### Environment Switching
+
+The demo can switch between localhost (development) and Cloudflare (production) configurations:
+
+**Edit `config.js`**:
+```javascript
+// Change this to switch environments
+const USE_CLOUDFLARE = false;  // Set to true for production
+```
+
+**Localhost Configuration** (Development):
+- Relay: `https://localhost:4443`
+- Requires fingerprint verification
+- Used during local development
+
+**Cloudflare Configuration** (Production):
+- Relay: `https://relay.cloudflare.mediaoverquic.com`
+- Uses trusted certificates (no fingerprint needed)
+- Used for production deployment
+
+## Deployment to Cloudflare Pages
+
+### 1. Prepare for Deployment
+
+1. **Switch to production configuration**:
+   ```javascript
+   // In config.js
+   const USE_CLOUDFLARE = true;
+   ```
+
+2. **Create `_headers` file** in the demo directory:
+   ```
+   /*
+     Cross-Origin-Opener-Policy: same-origin
+     Cross-Origin-Embedder-Policy: require-corp
+     Cross-Origin-Resource-Policy: cross-origin
+   ```
+
+### 2. Deploy to Cloudflare Pages
+
+#### Option A: Git Integration
+1. Push your code to a Git repository
+2. Connect the repository to Cloudflare Pages
+3. Set build output directory to `demo`
+4. Deploy
+
+#### Option B: Direct Upload
+1. Zip the `demo` directory contents
+2. Upload directly to Cloudflare Pages
+3. Deploy
+
+### 3. Required Headers
+
+The following headers are **essential** for WebTransport to work:
+
+```
+Cross-Origin-Opener-Policy: same-origin
+Cross-Origin-Embedder-Policy: require-corp
+Cross-Origin-Resource-Policy: cross-origin
+```
+
+**Create `_headers` file**:
+```bash
+cd demo
+cat > _headers << 'EOF'
+/*
+  Cross-Origin-Opener-Policy: same-origin
+  Cross-Origin-Embedder-Policy: require-corp
+  Cross-Origin-Resource-Policy: cross-origin
+EOF
+```
+
+## File Structure
+
+```
+demo/
+├── index.html          # Publisher page (main landing)
+├── player.html         # Player page for viewers
+├── style.css           # Minimal, clean styling
+├── config.js           # Environment configuration
+├── _headers            # Cloudflare Pages headers (for deployment)
+└── README.md           # This file
+```
+
+## Browser Compatibility
+
+**Supported Browsers**:
+- Chrome 97+ (required for WebTransport)
+- Edge 97+
+- Other Chromium-based browsers
+
+**Requirements**:
+- WebTransport support (Chrome/Edge 97+)
+- WebRTC support
+- Modern JavaScript (ES6+)
+- Static file server (no build process needed)
+
+## Features
+
+### Publisher Page
+- ✅ One-click publishing with `<publisher-moq>` web component
+- ✅ Auto-generated unique namespace for each session
+- ✅ Shareable player links with copy functionality
+- ✅ Real-time connection status
+- ✅ Environment configuration display
+
+### Player Page
+- ✅ Clean video player interface with `<video-moq>` component
+- ✅ Automatic connection to streams via URL parameters
+- ✅ Fullscreen support
+- ✅ Share functionality (native share API + clipboard fallback)
+- ✅ Connection status and basic latency estimation
+- ✅ Error handling and reconnection
+
+## Troubleshooting
+
+### Stream Not Loading
+- Verify the publisher is still active and broadcasting
+- Check browser compatibility (Chrome/Edge 97+)
+- Ensure proper headers are configured (for Cloudflare Pages)
+- Try refreshing or reconnecting
+
+### High Latency
+- MoQT is optimized for ultra-low latency streaming
+- Actual latency depends on geographic distance to edge servers
+- Network conditions can affect performance
+
+### Development Issues
+- Make sure the local server is running (`npm run dev`)
+- Check browser console for WebTransport errors
+- Verify the MoQ library files are loading from `lib/` directory
+- Ensure all required headers are present (our server includes them automatically)
+- If using Python server (`npm run serve:python`), note that required headers are missing
+
+### Deployment Issues
+- Verify `_headers` file is in the correct location
+- Check Cloudflare Pages build logs
+- Ensure `USE_CLOUDFLARE = true` in config.js
+- Verify the MoQ library path is correct
+
+## Development Workflow
+
+1. **Start Local Development**:
+   ```bash
+   # From the root moq-demo-site directory
+   npm run setup         # Copy MoQ library files (one-time setup)
+   npm run dev          # Start local server with headers
+   ```
+
+2. **Test Locally**:
+   - Publisher: http://localhost:8080/
+   - Player: Use generated links
+
+3. **Prepare for Production**:
+   - Run `npm run deploy:prepare` to switch to Cloudflare config
+   - Ensure `_headers` file is present
+   - Test configuration
+
+4. **Deploy**:
+   - Upload `demo/` folder contents to Cloudflare Pages
+   - The MoQ library files are copied locally and included
+   - Run `npm run deploy:restore` to switch back to dev config
+
+## Future Enhancements
+
+### Planned Features
+- **Latency Measurement**: Real-time glass-to-glass latency tracking
+- **Geographic Demo**: Show user location relative to edge servers
+- **Quality Metrics**: Connection quality and performance indicators
+- **Multiple Streams**: Support for multiple concurrent streams
+- **Recording**: Stream recording and playback capabilities
+
+### Design Evolution
+- Enhanced styling inspired by realtime.cloudflare.com
+- Sophisticated color schemes and animations
+- Advanced micro-interactions
+- Professional grid layouts
+
+## Contributing
+
+1. Follow the existing code style and structure
+2. Test thoroughly in both localhost and Cloudflare configurations
+3. Update documentation for any new features
+4. Ensure cross-browser compatibility
+
+## License
+
+This demo is part of the MoQT protocol demonstration project. Please refer to the main project license for usage terms.

demo/_headers

@@ -0,0 +1,31 @@
+# Cloudflare Pages Headers Configuration
+# Required headers for WebTransport and MoQT protocol support
+
+/*
+  Cross-Origin-Opener-Policy: same-origin
+  Cross-Origin-Embedder-Policy: require-corp
+  Cross-Origin-Resource-Policy: cross-origin
+  X-Content-Type-Options: nosniff
+  X-Frame-Options: DENY
+  X-XSS-Protection: 1; mode=block
+  Referrer-Policy: strict-origin-when-cross-origin
+
+# Allow same-origin resources
+/*.js
+  Cross-Origin-Resource-Policy: same-origin
+
+/*.css
+  Cross-Origin-Resource-Policy: same-origin
+
+# Additional CORS headers for API requests
+/api/*
+  Access-Control-Allow-Origin: *
+  Access-Control-Allow-Methods: GET, POST, OPTIONS
+  Access-Control-Allow-Headers: Content-Type, Authorization
+
+# Cache control for static assets
+/*.js
+  Cache-Control: public, max-age=31536000, immutable
+
+/*.css
+  Cache-Control: public, max-age=31536000, immutable

demo/config.js

@@ -0,0 +1,45 @@
+// MoQT Demo Site Configuration
+// Manages relay settings for development and production environments
+
+// Development configuration (localhost)
+const LOCALHOST_CONFIG = {
+  relay: "https://localhost:4443",
+  fingerprint: "https://localhost:4443/fingerprint",
+  environment: "development"
+};
+
+// Production configuration (Cloudflare)
+const CLOUDFLARE_CONFIG = {
+  relay: "https://interop-relay.cloudflare.mediaoverquic.com",
+  fingerprint: null, // No fingerprint needed for trusted certificate
+  environment: "production"
+};
+
+// Current active configuration
+// Toggle this to switch between environments
+const USE_CLOUDFLARE = true;
+
+// Export the active configuration
+const CONFIG = USE_CLOUDFLARE ? CLOUDFLARE_CONFIG : LOCALHOST_CONFIG;
+
+// Helper functions
+const getRelayUrl = () => CONFIG.relay;
+const getFingerprintUrl = () => CONFIG.fingerprint;
+const getEnvironment = () => CONFIG.environment;
+const isLocalhost = () => CONFIG.environment === "development";
+const isProduction = () => CONFIG.environment === "production";
+
+// Export configuration and helpers
+window.MoQConfig = {
+  CONFIG,
+  LOCALHOST_CONFIG,
+  CLOUDFLARE_CONFIG,
+  getRelayUrl,
+  getFingerprintUrl,
+  getEnvironment,
+  isLocalhost,
+  isProduction
+};
+
+// Log current configuration
+console.log(`MoQT Demo initialized with ${CONFIG.environment} configuration:`, CONFIG);