Renegotiate media with different directions

.changeset/sweet-garlics-tease.md

@@ -0,0 +1,37 @@
+---
+'@signalwire/webrtc': minor
+---
+
+Include public APIs for media renegotiation
+
+```ts
+// Enable audio with "sendrecv" direction
+await call.enableAudio()
+
+// Enable audio with "sendonly" direction
+await call.enableAudio({ audio: true, negotiateAudio: false })
+
+// Enable audio with "recvonly" direction
+await call.enableAudio({ audio: false, negotiateAudio: true })
+
+// Disable audio while keeps on receiving it
+await call.disableAudio({ negotiateAudio: true })
+
+// Disable audio completely
+await call.disableAudio()
+
+// Enable video with "sendrecv" direction
+await call.enableVideo()
+
+// Enable video with "sendonly" direction
+await call.enableVideo({ video: true, negotiateVideo: false })
+
+// Enable video with "recvonly" direction
+await call.enableVideo({ video: false, negotiateVideo: true })
+
+// Disable video while keeps on receiving it
+await call.disableVideo({ negotiateVideo: true })
+
+// Disable video completely
+await call.disableVideo()
+```

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

@@ -28,6 +28,7 @@ jobs:
             audience,
             reattach,
             callfabric,
+            cfRenegotiation,
             v2WebRTC,
           ]
     steps:

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

@@ -27,6 +27,7 @@ jobs:
             # audience,
             # reattach,
             callfabric,
+            cfRenegotiation,
             v2WebRTC,
           ]
     steps:

internal/e2e-js/playwright.config.ts

@@ -46,6 +46,10 @@ const callfabricTests = [
   'videoRoom.spec.ts',
   'videoRoomLayout.spec.ts',
 ]
+const cfRenegotiationTests = [
+  'renegotiateAudio.spec.ts',
+  'renegotiateVideo.spec.ts',
+]
 const v2WebRTC = ['v2WebrtcFromRest.spec.ts', 'webrtcCalling.spec.ts']
 
 const useDesktopChrome = {
@@ -86,6 +90,7 @@ const config: PlaywrightTestConfig = {
         ...audienceTests,
         ...reattachTests,
         ...callfabricTests,
+        ...cfRenegotiationTests,
         ...v2WebRTC,
       ],
     },
@@ -124,6 +129,11 @@ const config: PlaywrightTestConfig = {
       use: useDesktopChrome,
       testMatch: callfabricTests,
     },
+    {
+      name: 'cfRenegotiation',
+      use: useDesktopChrome,
+      testMatch: cfRenegotiationTests,
+    },
     {
       name: 'v2WebRTC',
       use: useDesktopChrome,

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

@@ -0,0 +1,216 @@
+import { uuid } from '@signalwire/core'
+import { test, expect } from '../../fixtures'
+import {
+  SERVER_URL,
+  createCFClient,
+  dialAddress,
+  expectMCUVisible,
+  getStats,
+  getTransceiverStates,
+} from '../../utils'
+import { CallFabricRoomSession } from '@signalwire/js'
+
+test.describe('CallFabric Audio Renegotiation', () => {
+  test('it should enable audio with "sendrecv" and then disable', 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}`,
+      dialOptions: {
+        audio: false,
+        negotiateAudio: false,
+      },
+    })
+
+    // Expect MCU is visible
+    await expectMCUVisible(page)
+
+    const stats = await getStats(page)
+    expect(stats.outboundRTP).toHaveProperty('video')
+    expect(stats.inboundRTP).toHaveProperty('video')
+    expect(stats.outboundRTP).not.toHaveProperty('audio')
+    expect(stats.inboundRTP).not.toHaveProperty('audio')
+
+    await page.evaluate(async () => {
+      // @ts-expect-error
+      const cfRoomSession: CallFabricRoomSession = window._roomObj
+      await cfRoomSession.enableAudio()
+    })
+
+    const newStats = await getStats(page)
+    expect(newStats.outboundRTP).toHaveProperty('audio')
+    expect(newStats.inboundRTP).toHaveProperty('audio')
+
+    await test.step('it should disable the audio', async () => {
+      await page.evaluate(async () => {
+        // @ts-expect-error
+        const cfRoomSession: CallFabricRoomSession = window._roomObj
+        await cfRoomSession.disableAudio()
+      })
+
+      const statsAfterDisabling = await getStats(page)
+
+      if (statsAfterDisabling.inboundRTP.audio) {
+        expect(statsAfterDisabling.inboundRTP.audio.packetsReceived).toBe(0)
+      } else {
+        expect(statsAfterDisabling.inboundRTP).not.toHaveProperty('audio')
+      }
+
+      if (statsAfterDisabling.outboundRTP.audio) {
+        expect(statsAfterDisabling.outboundRTP.audio.packetsSent).toBe(0)
+      } else {
+        expect(statsAfterDisabling.outboundRTP).not.toHaveProperty('audio')
+      }
+
+      const { audio, video } = await getTransceiverStates(page)
+      expect(video.direction).toBe('sendrecv')
+      expect(audio.direction).toBe('inactive')
+      expect(audio.sender.trackReadyState).toBe('ended')
+    })
+  })
+
+  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}`,
+      dialOptions: {
+        audio: false,
+        negotiateAudio: false,
+      },
+    })
+
+    // Expect MCU is visible
+    await expectMCUVisible(page)
+
+    const stats = await getStats(page)
+    expect(stats.outboundRTP).toHaveProperty('video')
+    expect(stats.inboundRTP).toHaveProperty('video')
+    expect(stats.outboundRTP).not.toHaveProperty('audio')
+    expect(stats.inboundRTP).not.toHaveProperty('audio')
+
+    await page.evaluate(async () => {
+      // @ts-expect-error
+      const cfRoomSession: CallFabricRoomSession = window._roomObj
+      await cfRoomSession.enableAudio({ audio: true, negotiateAudio: false })
+    })
+
+    const newStats = await getStats(page)
+    expect(newStats.outboundRTP).toHaveProperty('audio')
+    if (newStats.inboundRTP.audio) {
+      expect(newStats.inboundRTP.audio.packetsReceived).toBe(0)
+    } else {
+      expect(newStats.inboundRTP).not.toHaveProperty('audio')
+    }
+
+    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.disableAudio({ negotiateAudio: true })
+      })
+
+      const statsAfterDisabling = await getStats(page)
+      expect(statsAfterDisabling.inboundRTP).toHaveProperty('audio')
+      if (statsAfterDisabling.outboundRTP.audio) {
+        expect(statsAfterDisabling.outboundRTP.audio.packetsSent).toBe(0)
+      } else {
+        expect(statsAfterDisabling.outboundRTP).not.toHaveProperty('audio')
+      }
+
+      const { audio, video } = await getTransceiverStates(page)
+      expect(video.direction).toBe('sendrecv')
+      expect(audio.direction).toBe('recvonly')
+      expect(audio.sender.trackReadyState).toBe('ended')
+      expect(audio.receiver.trackReadyState).toBe('live')
+    })
+  })
+
+  test('it should enable video with "recvonly" and then disable', 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}`,
+      dialOptions: {
+        audio: false,
+        negotiateAudio: false,
+      },
+    })
+
+    // Expect MCU is visible
+    await expectMCUVisible(page)
+
+    const stats = await getStats(page)
+    expect(stats.outboundRTP).toHaveProperty('video')
+    expect(stats.inboundRTP).toHaveProperty('video')
+    expect(stats.outboundRTP).not.toHaveProperty('audio')
+    expect(stats.inboundRTP).not.toHaveProperty('audio')
+
+    await page.evaluate(async () => {
+      // @ts-expect-error
+      const cfRoomSession: CallFabricRoomSession = window._roomObj
+      await cfRoomSession.enableAudio({ audio: false, negotiateAudio: true })
+    })
+
+    const newStats = await getStats(page)
+    expect(newStats.outboundRTP).not.toHaveProperty('audio')
+    expect(newStats.inboundRTP).toHaveProperty('audio')
+
+    await test.step('it should disable the audio', async () => {
+      await page.evaluate(async () => {
+        // @ts-expect-error
+        const cfRoomSession: CallFabricRoomSession = window._roomObj
+        await cfRoomSession.disableAudio()
+      })
+
+      const statsAfterDisabling = await getStats(page)
+
+      if (statsAfterDisabling.inboundRTP.audio) {
+        expect(statsAfterDisabling.inboundRTP.audio.packetsReceived).toBe(0)
+      } else {
+        expect(statsAfterDisabling.inboundRTP).not.toHaveProperty('audio')
+      }
+
+      if (statsAfterDisabling.outboundRTP.audio) {
+        expect(statsAfterDisabling.outboundRTP.audio.packetsSent).toBe(0)
+      } else {
+        expect(statsAfterDisabling.outboundRTP).not.toHaveProperty('audio')
+      }
+
+      const { audio, video } = await getTransceiverStates(page)
+      expect(video.direction).toBe('sendrecv')
+      expect(audio.direction).toBe('inactive')
+      expect(audio.sender.hasTrack).toBe(false)
+    })
+  })
+})