| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8" /> |
| <title>VineetVC</title> |
| <meta name="viewport" content="width=device-width,initial-scale=1" /> |
| <style> |
| body { |
| font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif; |
| max-width: 1120px; |
| margin: 24px auto; |
| padding: 0 16px; |
| line-height: 1.45; |
| } |
| video { |
| width: 48%; |
| min-width: 280px; |
| background: #111; |
| border-radius: 12px; |
| margin: 6px; |
| } |
| button, input, select { |
| padding: 8px 10px; |
| margin: 4px; |
| border-radius: 8px; |
| border: 1px solid #bbb; |
| } |
| button { cursor: pointer; } |
| code { |
| background: #eee; |
| padding: 2px 4px; |
| border-radius: 4px; |
| } |
| #stats { |
| white-space: pre-wrap; |
| font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace; |
| background: #f6f6f6; |
| padding: 12px; |
| border-radius: 10px; |
| min-height: 80px; |
| } |
| </style> |
| </head> |
| <body> |
| <h1>VineetVC</h1> |
|
|
| <p> |
| Mode 1 = VP8 normal WebRTC, |
| Mode 2 = AV1 low-bitrate WebRTC, |
| Mode 3 = AI using <code>vedic-thg</code>. |
| </p> |
|
|
| <div> |
| <label>Room <input id="room" value="demo-room" /></label> |
| <button id="start">Start camera</button> |
| <button id="connect">Connect</button> |
| </div> |
|
|
| <div> |
| <select id="mode"> |
| <option value="vp8">Mode 1 - VP8 normal</option> |
| <option value="av1">Mode 2 - AV1 low bitrate</option> |
| <option value="ai">Mode 3 - AI VedicTHG</option> |
| </select> |
| <button id="applyMode">Apply selected mode</button> |
| <label> |
| <input id="autoMode" type="checkbox" /> |
| Auto switch using getStats telemetry |
| </label> |
| </div> |
|
|
| <div> |
| <video id="local" autoplay muted playsinline></video> |
| <video id="remote" autoplay playsinline></video> |
| </div> |
|
|
| <pre id="stats">Ready.</pre> |
|
|
| <script src="/static/app.js"></script> |
| </body> |
| </html> |
|
|
