Fix sdp connection address mismatch issue (#1342)

* Fix sdp connection address mismatch issue Chrome could generate sdp with c=IN IP4 <ipv6 addr> in edge case and return error when set sdp. This is not a sdk error but correct it if the issue detected. * add v6 check
livekit · Dec 5, 2024 · 8b63132 · 8b63132
1 parent 23aceba
commit 8b63132
Show file tree

Hide file tree

Showing 8 changed files with 38 additions and 14 deletions.
diff --git a/.changeset/strong-hairs-work.md b/.changeset/strong-hairs-work.md
@@ -0,0 +1,5 @@
+---
+'livekit-client': patch
+---
+
+Fix sdp connection address mismatch
diff --git a/examples/demo/index.html b/examples/demo/index.html
@@ -133,11 +133,11 @@ <h2>Livekit Sample App</h2>
                 Share Screen
               </button>
               <button
-                      id="toggle-pip-button"
-                      class="btn btn-secondary mt-1"
-                      disabled
-                      type="button"
-                      onclick="appActions.togglePiP()"
+                id="toggle-pip-button"
+                class="btn btn-secondary mt-1"
+                disabled
+                type="button"
+                onclick="appActions.togglePiP()"
               >
                 Open PiP
               </button>

diff --git a/examples/rpc/README.md b/examples/rpc/README.md
@@ -6,8 +6,8 @@ A working multi-participant live demo of the LiveKit RPC feature.
 
 1. Create `.env.local` with `LIVEKIT_API_KEY`, `LIVEKIT_API_SECRET`, and `LIVEKIT_URL`
 1. Install dependencies: `pnpm install`
-2. Start server: `pnpm dev`
-3. Open browser to local URL (typically http://localhost:5173)
-4. Press the button to watch the demo run
+1. Start server: `pnpm dev`
+1. Open browser to local URL (typically http://localhost:5173)
+1. Press the button to watch the demo run
 
 For more detailed information on using RPC with LiveKit, refer to the [main README](../../README.md#rpc).
diff --git a/examples/rpc/index.html b/examples/rpc/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -16,4 +16,4 @@ <h1>LiveKit RPC Demo</h1>
     </div>
     <script type="module" src="./rpc-demo.ts"></script>
   </body>
-</html>
+</html>
diff --git a/examples/rpc/styles.css b/examples/rpc/styles.css
@@ -1,5 +1,6 @@
 body {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
+    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
   background-color: #f0f2f5;
   color: #333;
   line-height: 1.6;
@@ -50,7 +51,9 @@ h1 {
   border-radius: 5px;
   font-size: 16px;
   cursor: pointer;
-  transition: background-color 0.3s, transform 0.1s;
+  transition:
+    background-color 0.3s,
+    transform 0.1s;
   margin: 0 auto;
   font-weight: 500;
 }

diff --git a/examples/rpc/vite.config.js b/examples/rpc/vite.config.js
@@ -7,4 +7,4 @@ export default defineConfig({
       handler: './api.ts',
     }),
   ],
-});
+});
diff --git a/rollup.config.js b/rollup.config.js
@@ -54,6 +54,6 @@ export default {
   plugins: [
     del({ targets: 'dist/*' }),
     typescript({ tsconfig: './tsconfig.json' }),
-    ...commonPlugins
+    ...commonPlugins,
   ],
 };
diff --git a/src/room/PCTransport.ts b/src/room/PCTransport.ts
@@ -268,6 +268,7 @@ export default class PCTransport extends EventEmitter {
 
     const sdpParsed = parse(offer.sdp ?? '');
     sdpParsed.media.forEach((media) => {
+      ensureIPAddrMatchVersion(media);
       if (media.type === 'audio') {
         ensureAudioNackAndStereo(media, [], []);
       } else if (media.type === 'video') {
@@ -325,6 +326,7 @@ export default class PCTransport extends EventEmitter {
     const answer = await this.pc.createAnswer();
     const sdpParsed = parse(answer.sdp ?? '');
     sdpParsed.media.forEach((media) => {
+      ensureIPAddrMatchVersion(media);
       if (media.type === 'audio') {
         ensureAudioNackAndStereo(media, this.remoteStereoMids, this.remoteNackMids);
       }
@@ -630,3 +632,17 @@ function extractStereoAndNackAudioFromOffer(offer: RTCSessionDescriptionInit): {
   });
   return { stereoMids, nackMids };
 }
+
+function ensureIPAddrMatchVersion(media: MediaDescription) {
+  // Chrome could generate sdp with c = IN IP4 <ipv6 addr>
+  // in edge case and return error when set sdp.This is not a
+  // sdk error but correct it if the issue detected.
+  if (media.connection) {
+    const isV6 = media.connection.ip.indexOf(':') >= 0;
+    if ((media.connection.version === 4 && isV6) || (media.connection.version === 6 && !isV6)) {
+      // fallback to dummy address
+      media.connection.ip = '0.0.0.0';
+      media.connection.version = 4;
+    }
+  }
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -7,4 +7,4 @@ export default defineConfig({ @@
           handler: './api.ts',
         }),
       ],
-    });
+    });