feat(webrtc): end-to-end encrypted voice & video calls with adaptive codecs
CodeQL Analysis / Analyze CodeQL (push) Canceled after 0s
Deploy Application / deploy (push) Canceled after 0s
Mirror to Codeberg / mirror (push) Canceled after 0s
Mirror to PrivacyGuides / mirror (push) Canceled after 0s

Add 1:1 voice and video calling over the existing SAS-verified peer
connection. Audio and video tracks ride the same RTCPeerConnection as the
chat, bundled onto one DTLS-SRTP transport, so media inherits the session's
end-to-end encryption. SDP offer/answer is renegotiated in-band over the
verified data channel — no signalling server, so the media's DTLS
fingerprints are authenticated end-to-end. Calls are gated on a connected,
SAS-verified session.

Codecs & adaptation:
- Opus tuned for lossy links (in-band FEC, DTX, RED redundancy); audio is
  bandwidth-prioritised and never throttled.
- VP9/AV1 single-encoding SVC with H.264/VP8 fallback; video degrades by
  spatial/temporal layer.
- Runtime NetworkAdaptationController trims video bitrate on loss/RTT and
  recovers as the link clears — no renegotiation. Live connection-quality
  indicator (Excellent/Good/Fair/Weak) in the call UI.

In-call controls: mute, camera on/off (voice→video upgrade in-band),
camera flip, minimize-to-widget, hang up, and accept/decline for incoming
calls. Production logging disabled (DEBUG_MODE=false); temporary call
diagnostic logger removed. Codec rationale in docs/webrtc-config.md.
This commit is contained in:
lockbitchat
2026-07-23 12:56:19 -04:00
parent 0de8ab2d54
commit b3fcf54670
32 changed files with 3855 additions and 86 deletions
+23 -23
View File
@@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content">
<meta http-equiv="Content-Security-Policy"
content="default-src 'self';
script-src 'self';
@@ -23,7 +23,7 @@
<!-- PWA Manifest -->
<link rel="manifest" href="./manifest.json">
<link rel="icon" type="image/x-icon" href="./logo/favicon.ico?v=1784757947117">
<link rel="icon" type="image/x-icon" href="./logo/favicon.ico?v=1784825757783">
<!-- PWA Meta Tags -->
<meta name="mobile-web-app-capable" content="yes">
@@ -89,7 +89,7 @@
<link rel="apple-touch-startup-image" media="screen and (device-width: 744px) and (device-height: 1133px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="./logo/splash/splash_screens/8.3__iPad_Mini_portrait.png">
<!-- Apple Touch Icons -->
<link rel="apple-touch-icon" href="./logo/icon-180x180.png?v=1784757947117">
<link rel="apple-touch-icon" href="./logo/icon-180x180.png?v=1784825757783">
<link rel="apple-touch-icon" sizes="57x57" href="./logo/icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="./logo/icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="./logo/icon-72x72.png">
@@ -98,7 +98,7 @@
<link rel="apple-touch-icon" sizes="120x120" href="./logo/icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="./logo/icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="./logo/icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="./logo/icon-180x180.png?v=1784757947117">
<link rel="apple-touch-icon" sizes="180x180" href="./logo/icon-180x180.png?v=1784825757783">
<!-- Microsoft Tiles -->
<meta name="msapplication-TileColor" content="#ff6b35">
@@ -182,7 +182,7 @@
<!-- Render-blocking JS is deferred: classic deferred scripts and module scripts
both execute in document order after parsing, so React still runs before the
app modules below, but the parser / first paint is no longer blocked. -->
<script defer src="config/ice-servers.js?v=1784757947117"></script>
<script defer src="config/ice-servers.js?v=1784825757783"></script>
<script defer src="libs/react/react.production.min.js"></script>
<script defer src="libs/react-dom/react-dom.production.min.js"></script>
<!-- Prism syntax highlighting (vendored, offline). Tokenizes code as TEXT only —
@@ -190,8 +190,8 @@
Its CSS is loaded async via load-async-css.js (not paint-critical). -->
<script defer src="libs/prism/prism.js"></script>
<!-- Critical, paint-defining CSS stays render-blocking (avoids FOUC / layout shift). -->
<link rel="stylesheet" href="assets/tailwind.css?v=1784757947117">
<link rel="icon" type="image/x-icon" href="/logo/favicon.ico?v=1784757947117">
<link rel="stylesheet" href="assets/tailwind.css?v=1784825757783">
<link rel="icon" type="image/x-icon" href="/logo/favicon.ico?v=1784825757783">
<!-- Preload only the fonts needed for first paint. fa-solid covers the bulk of UI
icons; fa-regular/fa-brands are loaded on demand by their CSS (rarely on the
first screen). Inter latin 400/700 cover body text and headings/buttons. -->
@@ -199,31 +199,31 @@
<link rel="preload" href="/assets/fonts/inter/files/inter-latin-400.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/assets/fonts/inter/files/inter-latin-700.woff2" as="font" type="font/woff2" crossorigin>
<link rel="stylesheet" href="/assets/fonts/inter/inter.css">
<link rel="stylesheet" href="src/styles/main.css?v=1784757947117">
<link rel="stylesheet" href="src/styles/animations.css?v=1784757947117">
<link rel="stylesheet" href="src/styles/components.css?v=1784757947117">
<link rel="stylesheet" href="src/styles/main.css?v=1784825757783">
<link rel="stylesheet" href="src/styles/animations.css?v=1784825757783">
<link rel="stylesheet" href="src/styles/components.css?v=1784825757783">
<!-- Non-critical CSS (FontAwesome ~102KB, Prism) loaded async — no longer blocks paint. -->
<script defer src="src/scripts/load-async-css.js?v=1784757947117"></script>
<script defer src="src/scripts/load-async-css.js?v=1784825757783"></script>
<noscript>
<link rel="stylesheet" href="/assets/fontawesome/css/all.min.css">
<link rel="stylesheet" href="libs/prism/prism.css">
</noscript>
<script defer src="src/scripts/fa-check.js?v=1784757947117"></script>
<script defer src="src/scripts/fa-check.js?v=1784825757783"></script>
<!-- Update Manager - система принудительного обновления -->
<script defer src="src/utils/updateManager.js?v=1784757947117"></script>
<script type="module" src="src/components/UpdateChecker.jsx?v=1784757947117"></script>
<script type="module" src="dist/qr-local.js?v=1784757947117"></script>
<script type="module" src="src/components/QRScanner.js?v=1784757947117"></script>
<script defer src="src/utils/updateManager.js?v=1784825757783"></script>
<script type="module" src="src/components/UpdateChecker.jsx?v=1784825757783"></script>
<script type="module" src="dist/qr-local.js?v=1784825757783"></script>
<script type="module" src="src/components/QRScanner.js?v=1784825757783"></script>
</head>
<body>
<div id="root"></div>
<script type="module" src="dist/app-boot.js?v=1784757947117"></script>
<script type="module" src="dist/app.js?v=1784757947117"></script>
<script type="module" src="dist/app-boot.js?v=1784825757783"></script>
<script type="module" src="dist/app.js?v=1784825757783"></script>
<script defer src="src/scripts/pwa-register.js?v=1784757947117"></script>
<script src="./src/pwa/install-prompt.js?v=1784757947117" type="module"></script>
<script src="./src/pwa/pwa-manager.js?v=1784757947117" type="module"></script>
<script defer src="./src/scripts/pwa-offline-test.js?v=1784757947117"></script>
<link rel="stylesheet" href="./src/styles/pwa.css?v=1784757947117">
<script defer src="src/scripts/pwa-register.js?v=1784825757783"></script>
<script src="./src/pwa/install-prompt.js?v=1784825757783" type="module"></script>
<script src="./src/pwa/pwa-manager.js?v=1784825757783" type="module"></script>
<script defer src="./src/scripts/pwa-offline-test.js?v=1784825757783"></script>
<link rel="stylesheet" href="./src/styles/pwa.css?v=1784825757783">
</body>
</html>