Merge pull request #596 from streamplace/eli/fix-stereo

components: force Opus stereo audio when supported

js/app/package.json

···
     "react-use-websocket": "^4.13.0",
     "reanimated-color-picker": "^4.0.0",
     "rtcaudiodevice": "git+https://github.com/streamplace/RTCAudioDevice.git#918e08a0f6f0818fb495a0db0b696b44d11d1336",
+    "sdp-transform": "^2.15.0",
     "stream-http": "^3.2.0",
     "streamplace": "workspace:*",
     "ua-parser-js": "^2.0.0-rc.1",
···
     "@types/babel__plugin-transform-runtime": "^7",
     "@types/qrcode": "^1",
     "@types/react": "~18.3.12",
+    "@types/sdp-transform": "^2.15.0",
     "@types/uuid": "^10.0.0",
     "typescript": "~5.3.3"
   },

js/components/package.json

···
   "author": "Streamplace",
   "license": "MIT",
   "devDependencies": {
+    "@types/sdp-transform": "^2.15.0",
     "tsup": "^8.5.0"
   },
   "dependencies": {

js/components/src/components/mobile-player/use-webrtc.tsx

···
 import { useEffect, useRef, useState } from "react";
+import * as sdpTransform from "sdp-transform";
 import { PlayerStatus, usePlayerStore, useStreamKey } from "../..";
 import { RTCPeerConnection, RTCSessionDescription } from "./webrtc-primitives";
 
···
     offerToReceiveAudio: true,
     offerToReceiveVideo: true,
   });
+  if (!offer.sdp) {
+    throw Error("no SDP in offer");
+  }
+
+  const newSDP = forceStereoAudio(offer.sdp);
+
+  offer.sdp = newSDP;
   /** https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/setLocalDescription */
   await peerConnection.setLocalDescription(offer);
 
···
 
   return [mediaStream, setMediaStream];
 }
+
+export function forceStereoAudio(sdp: string): string {
+  const parsedSDP = sdpTransform.parse(sdp);
+  const audioMedia = parsedSDP.media.find((m) => m.type === "audio");
+  if (!audioMedia) {
+    throw Error("no audio media in SDP");
+  }
+  const opusCodec = audioMedia.rtp.find((c) => c.codec === "opus");
+  if (!opusCodec) {
+    throw Error("no opus codec in SDP");
+  }
+  const opusFMTP = audioMedia.fmtp.find((c) => c.payload === opusCodec.payload);
+  if (!opusFMTP) {
+    throw Error("no opus fmtp in SDP");
+  }
+  const opusParams = sdpTransform.parseParams(opusFMTP.config);
+  opusParams.stereo = 1;
+  const newParams = Object.entries(opusParams)
+    .map(([k, v]) => `${k}=${v}`)
+    .join(";");
+  opusFMTP.config = newParams;
+  return sdpTransform.write(parsedSDP);
+}

pnpm-lock.yaml

···
       rtcaudiodevice:
         specifier: git+https://github.com/streamplace/RTCAudioDevice.git#918e08a0f6f0818fb495a0db0b696b44d11d1336
         version: https://codeload.github.com/streamplace/RTCAudioDevice/tar.gz/918e08a0f6f0818fb495a0db0b696b44d11d1336
+      sdp-transform:
+        specifier: ^2.15.0
+        version: 2.15.0
       stream-http:
         specifier: ^3.2.0
         version: 3.2.0
···
       '@types/react':
         specifier: ~18.3.12
         version: 18.3.12
+      '@types/sdp-transform':
+        specifier: ^2.15.0
+        version: 2.15.0
       '@types/uuid':
         specifier: ^10.0.0
         version: 10.0.0
···
         specifier: ^5.0.5
         version: 5.0.5(immer@10.1.1)(react@19.0.0)(use-sync-external-store@1.2.2(react@19.0.0))
     devDependencies:
+      '@types/sdp-transform':
+        specifier: ^2.15.0
+        version: 2.15.0
       tsup:
         specifier: ^8.5.0
         version: 8.5.0(@swc/core@1.8.0(@swc/helpers@0.5.17))(jiti@2.4.2)(postcss@8.5.3)(typescript@5.8.3)(yaml@2.5.1)
···
   '@types/sax@1.2.7':
     resolution: {integrity: sha512-rO73L89PJxeYM3s3pPPjiPgVVcymqU490g0YO5n5By0k2Erzj6tay/4lr1CHAAU4JyOWd1rpQ8bCf6cZfHU96A==}
 
+  '@types/sdp-transform@2.15.0':
+    resolution: {integrity: sha512-ikIFF0EaYt/2XetIYYVeMj6SB52oVXFasJUXDzWHgzNJS5ep2Pbsu7f8f3Za+dEie8HQtt3Zr9mHYBpWT0XgxQ==}
+
   '@types/send@0.17.4':
     resolution: {integrity: sha512-x2EM6TJOybec7c52BX0ZspPodMsQUd5L6PRwOunVyVUhXiBSKf3AezDL8Dgvgt5o0UfKNfuA0eMLr2wLT4AiBA==}
 
···
   schema-utils@4.2.0:
     resolution: {integrity: sha512-L0jRsrPpjdckP3oPug3/VxNKt2trR8TcabrM6FOAAlvC/9Phcmm+cuAgTlxBqdBR1WJx7Naj9WHw+aOmheSVbw==}
     engines: {node: '>= 12.13.0'}
+
+  sdp-transform@2.15.0:
+    resolution: {integrity: sha512-KrOH82c/W+GYQ0LHqtr3caRpM3ITglq3ljGUIb8LTki7ByacJZ9z+piSGiwZDsRyhQbYBOBJgr2k6X4BZXi3Kw==}
+    hasBin: true
 
   select-hose@2.0.0:
     resolution: {integrity: sha512-mEugaLK+YfkijB4fx0e6kImuJdCIt2LxCRcbEYPqRGCs4F2ogyfZU5IAZRdjCP8JPq2AtdNoC/Dux63d9Kiryg==}
···
 
   ua-parser-js@2.0.0-rc.1:
     resolution: {integrity: sha512-H+kTJv7j04XbMuASIIrp7TwKj8rVHfGLR9dI36FAWneGHyQ6JZVwFukFgxSyM/OChmk7dxsV82R/tnEQxb1EXg==}
+    deprecated: You are using an early pre-release version of ua-parser-js v2.x which may be unstable. Please update to the latest stable ua-parser-js v2.x release (https://uaparser.dev)
     hasBin: true
 
   uc.micro@1.0.6:
···
   '@types/sax@1.2.7':
     dependencies:
       '@types/node': 22.15.17
+
+  '@types/sdp-transform@2.15.0': {}
 
   '@types/send@0.17.4':
     dependencies:
···
       ajv: 8.16.0
       ajv-formats: 2.1.1(ajv@8.16.0)
       ajv-keywords: 5.1.0(ajv@8.16.0)
+
+  sdp-transform@2.15.0: {}
 
   select-hose@2.0.0: {}