CF & Video SDKs: Allow user to update media with renegotiation

.changeset/tough-doors-do.md

@@ -0,0 +1,30 @@
+---
+'@signalwire/webrtc': minor
+'@signalwire/core': minor
+'@signalwire/js': minor
+---
+
+Fabric and Video SDK: Introduce an update media APIs with renegotiation
+
+```text
+
+await updateMedia({
+  audio: {
+    enable: true,
+    direction: 'send' | 'sendrecv',
+    constraints?: MediaTrackConstraints
+  },
+  video: {
+    enable: false
+    direction: 'none' | 'receive'
+  }
+})
+
+Either "audio" or "video" is required with "enable" and "direction" properties.
+The "constraints" can only be passed if the "enable" is "true".
+
+await setVideoDirection('send' | 'sendrecv' | 'none' | 'receive')
+
+await setAudioDirection('send' | 'sendrecv' | 'none' | 'receive')
+
+```

.github/workflows/browser-js-production.yml

@@ -28,6 +28,7 @@ jobs:
             audience,
             reattach,
             callfabric,
+            renegotiation,
             videoElement,
             v2WebRTC,
           ]

.github/workflows/browser-js-staging.yml

@@ -27,6 +27,7 @@ jobs:
             # audience,
             # reattach,
             callfabric,
+            renegotiation,
             videoElement,
             v2WebRTC,
           ]

internal/e2e-js/playwright.config.ts

@@ -45,9 +45,14 @@ const callfabricTests = [
   'videoRoom.spec.ts',
   'videoRoomLayout.spec.ts',
 ]
+const renegotiationTests = [
+  'roomSessionUpdateMedia.spec.ts',
+  'renegotiateAudio.spec.ts',
+  'renegotiateVideo.spec.ts',
+]
 const videoElementTests = [
-  'buildVideoWithVideoSdk.spec.ts',
-  'buildVideoWithFabricSdk.spec.ts',
+  'buildVideoWithVideoSDK.spec.ts',
+  'buildVideoWithFabricSDK.spec.ts',
 ]
 const v2WebRTC = ['v2WebrtcFromRest.spec.ts', 'webrtcCalling.spec.ts']
 
@@ -89,6 +94,7 @@ const config: PlaywrightTestConfig = {
         ...audienceTests,
         ...reattachTests,
         ...callfabricTests,
+        ...renegotiationTests,
         ...videoElementTests,
         ...v2WebRTC,
       ],
@@ -128,6 +134,11 @@ const config: PlaywrightTestConfig = {
       use: useDesktopChrome,
       testMatch: callfabricTests,
     },
+    {
+      name: 'renegotiation',
+      use: useDesktopChrome,
+      testMatch: renegotiationTests,
+    },
     {
       name: 'videoElement',
       use: useDesktopChrome,

internal/e2e-js/tests/callfabric/renegotiateAudio.spec.ts

@@ -0,0 +1,249 @@
+import { uuid } from '@signalwire/core'
+import { test, expect } from '../../fixtures'
+import {
+  SERVER_URL,
+  createCFClient,
+  dialAddress,
+  expectMCUVisible,
+  expectStatWithPolling,
+  getStats,
+  waitForStabilizedStats,
+} from '../../utils'
+import { CallFabricRoomSession } from '@signalwire/js'
+
+test.describe('CallFabric Audio Renegotiation', () => {
+  test('it should enable audio with "sendrecv" and then disable with "inactive"', async ({
+    createCustomPage,
+    resource,
+  }) => {
+    const page = await createCustomPage({ name: '[page]' })
+    await page.goto(SERVER_URL)
+
+    const roomName = `e2e-video-room_${uuid()}`
+    await resource.createVideoRoomResource(roomName)
+
+    await createCFClient(page)
+
+    // Dial an address with video only channel
+    await dialAddress(page, {
+      address: `/public/${roomName}?channel=video`,
+      dialOptions: {
+        audio: false,
+        negotiateAudio: false,
+      },
+    })
+
+    // Expect MCU is visible
+    await expectMCUVisible(page)
+
+    const stats1 = await getStats(page)
+    expect(stats1.outboundRTP.video?.packetsSent).toBeGreaterThan(0)
+    expect(stats1.inboundRTP.video?.packetsReceived).toBeGreaterThan(0)
+    expect(stats1.outboundRTP.audio?.packetsSent).toBe(0)
+    expect(stats1.inboundRTP.audio?.packetsReceived).toBe(0)
+
+    await page.evaluate(async () => {
+      // @ts-expect-error
+      const cfRoomSession: CallFabricRoomSession = window._roomObj
+      await cfRoomSession.setAudioDirection('sendrecv')
+    })
+
+    await expectStatWithPolling(page, {
+      propertyPath: 'outboundRTP.video.packetsSent',
+      matcher: 'toBeGreaterThan',
+      expected: 0,
+    })
+    await expectStatWithPolling(page, {
+      propertyPath: 'inboundRTP.video.packetsReceived',
+      matcher: 'toBeGreaterThan',
+      expected: 0,
+    })
+    await expectStatWithPolling(page, {
+      propertyPath: 'outboundRTP.audio.packetsSent',
+      matcher: 'toBeGreaterThan',
+      expected: 0,
+    })
+    await expectStatWithPolling(page, {
+      propertyPath: 'inboundRTP.audio.packetsReceived',
+      matcher: 'toBeGreaterThan',
+      expected: 0,
+    })
+
+    await test.step('it should disable the audio with "inactive"', async () => {
+      await page.evaluate(async () => {
+        // @ts-expect-error
+        const cfRoomSession: CallFabricRoomSession = window._roomObj
+        await cfRoomSession.updateMedia({
+          audio: { enable: false, direction: 'none' },
+        })
+      })
+
+      await expectStatWithPolling(page, {
+        propertyPath: 'outboundRTP.video.packetsSent',
+        matcher: 'toBeGreaterThan',
+        expected: 0,
+      })
+      await expectStatWithPolling(page, {
+        propertyPath: 'inboundRTP.video.packetsReceived',
+        matcher: 'toBeGreaterThan',
+        expected: 0,
+      })
+      await waitForStabilizedStats(page, {
+        propertyPath: 'outboundRTP.audio.packetsSent',
+      })
+      await waitForStabilizedStats(page, {
+        propertyPath: 'inboundRTP.audio.packetsReceived',
+      })
+    })
+  })
+
+  test('it should enable audio with "sendonly" and then disable with "recvonly"', async ({
+    createCustomPage,
+    resource,
+  }) => {
+    const page = await createCustomPage({ name: '[page]' })
+    await page.goto(SERVER_URL)
+
+    const roomName = `e2e-video-room_${uuid()}`
+    await resource.createVideoRoomResource(roomName)
+
+    await createCFClient(page)
+
+    // Dial an address with video only channel
+    await dialAddress(page, {
+      address: `/public/${roomName}?channel=video`,
+      dialOptions: {
+        audio: false,
+        negotiateAudio: false,
+      },
+    })
+
+    // Expect MCU is visible
+    await expectMCUVisible(page)
+
+    const stats1 = await getStats(page)
+    expect(stats1.outboundRTP.video?.packetsSent).toBeGreaterThan(0)
+    expect(stats1.inboundRTP.video?.packetsReceived).toBeGreaterThan(0)
+    expect(stats1.outboundRTP.audio?.packetsSent).toBe(0)
+    expect(stats1.inboundRTP.audio?.packetsReceived).toBe(0)
+
+    await page.evaluate(async () => {
+      // @ts-expect-error
+      const cfRoomSession: CallFabricRoomSession = window._roomObj
+      await cfRoomSession.setAudioDirection('send')
+    })
+
+    const stats2 = await getStats(page)
+    expect(stats2.outboundRTP).toHaveProperty('video')
+    expect(stats2.inboundRTP).toHaveProperty('video')
+    await expectStatWithPolling(page, {
+      propertyPath: 'outboundRTP.audio.packetsSent',
+      matcher: 'toBeGreaterThan',
+      expected: 0,
+    })
+    expect(stats2.inboundRTP.audio?.packetsReceived).toBe(0)
+
+    await test.step('it should disable the audio with "recvonly"', async () => {
+      await page.evaluate(async () => {
+        // @ts-expect-error
+        const cfRoomSession: CallFabricRoomSession = window._roomObj
+        await cfRoomSession.updateMedia({
+          audio: { enable: false, direction: 'receive' },
+        })
+      })
+
+      const stats3 = await getStats(page)
+      expect(stats3.outboundRTP).toHaveProperty('video')
+      expect(stats3.inboundRTP).toHaveProperty('video')
+      await waitForStabilizedStats(page, {
+        propertyPath: 'outboundRTP.audio.packetsSent',
+      })
+      await expectStatWithPolling(page, {
+        propertyPath: 'inboundRTP.audio.packetsReceived',
+        matcher: 'toBeGreaterThan',
+        expected: 0,
+      })
+    })
+  })
+
+  test('it should enable video with "recvonly" and then disable with "inactive"', async ({
+    createCustomPage,
+    resource,
+  }) => {
+    const page = await createCustomPage({ name: '[page]' })
+    await page.goto(SERVER_URL)
+
+    const roomName = `e2e-video-room_${uuid()}`
+    await resource.createVideoRoomResource(roomName)
+
+    await createCFClient(page)
+
+    // Dial an address with video only channel
+    await dialAddress(page, {
+      address: `/public/${roomName}?channel=video`,
+      dialOptions: {
+        audio: false,
+        negotiateAudio: false,
+      },
+    })
+
+    // Expect MCU is visible
+    await expectMCUVisible(page)
+
+    const stats1 = await getStats(page)
+    expect(stats1.outboundRTP.video?.packetsSent).toBeGreaterThan(0)
+    expect(stats1.inboundRTP.video?.packetsReceived).toBeGreaterThan(0)
+    expect(stats1.outboundRTP.audio?.packetsSent).toBe(0)
+    expect(stats1.inboundRTP.audio?.packetsReceived).toBe(0)
+
+    await page.evaluate(async () => {
+      // @ts-expect-error
+      const cfRoomSession: CallFabricRoomSession = window._roomObj
+      await cfRoomSession.setAudioDirection('receive')
+    })
+
+    const stats2 = await getStats(page)
+    await expectStatWithPolling(page, {
+      propertyPath: 'outboundRTP.video.packetsSent',
+      matcher: 'toBeGreaterThan',
+      expected: 0,
+    })
+    await expectStatWithPolling(page, {
+      propertyPath: 'inboundRTP.video.packetsReceived',
+      matcher: 'toBeGreaterThan',
+      expected: 0,
+    })
+    expect(stats2.outboundRTP.audio?.packetsSent).toBe(0)
+    await expectStatWithPolling(page, {
+      propertyPath: 'inboundRTP.audio.packetsReceived',
+      matcher: 'toBeGreaterThan',
+      expected: 0,
+    })
+
+    await test.step('it should disable the audio with "inactive"', async () => {
+      await page.evaluate(async () => {
+        // @ts-expect-error
+        const cfRoomSession: CallFabricRoomSession = window._roomObj
+        await cfRoomSession.updateMedia({
+          audio: { enable: false, direction: 'none' },
+        })
+      })
+
+      const stats3 = await getStats(page)
+      await expectStatWithPolling(page, {
+        propertyPath: 'outboundRTP.video.packetsSent',
+        matcher: 'toBeGreaterThan',
+        expected: 0,
+      })
+      await expectStatWithPolling(page, {
+        propertyPath: 'inboundRTP.video.packetsReceived',
+        matcher: 'toBeGreaterThan',
+        expected: 0,
+      })
+      expect(stats3.outboundRTP.audio?.packetsSent).toBe(0)
+      await waitForStabilizedStats(page, {
+        propertyPath: 'inboundRTP.audio.packetsReceived',
+      })
+    })
+  })
+})