daily-co/daily-js daily-js-2021-08-17-0.17.0

0.17.0

on GitHub

Features

• Shipped activeSpeakerMode iframe property to control whether Daily Prebuilt displays the person currently speaking ({ activeSpeakerMode: true } ; this is the default) or a grid of call participants ({ activeSpeakerMode: false } ).

  Set Daily Prebuilt to grid mode

  DailyIFrame.createFrame({ activeSpeakerMode: false });
  

• New iframe property layoutConfig customizes how the grid of video tiles behaves when the browser is resized (if the call is in grid mode, of course)

  Example layoutConfig usage

  DailyIframe.createFrame({
    layoutConfig: {
      grid: {
        minTilesPerPage: 3, // default: 1, minimum required: 1
        maxTilesPerPage: 36 // default: 25, maximum allowable: 49
      }
    }
  });
  

• Added 'staged' media track subscription state that corresponds to setting up the connections for a track, but not transmitting data across that connection. This lets you "stage" tracks that you know you'll need soon, for later rapid transition into the fully "subscribed" state, without using any extra bandwidth. Reminder: Track subscriptions are only supported when your call is in SFU mode.

  Example 'staged' usage

  call.updateParticipant(id, {
    setSubscribedTracks: {
      video: 'staged',
    },
  });
  

• Launched several affordances to give you control over how you want to receive the video tracks that you're subscribed to. These are referred to as receive settings. The first—and so far only—configurable receive settings are the desired maximum simulcast layers for video and screenVideo. A higher simulcast layer corresponds to higher quality. The new affordances are:

  • receiveSettings() and updateReceiveSettings() instance methods
  • receiveSettings DailyIframe property
  • receive-settings-updated event

  Note: Simulcast layer settings only apply when a call is in SFU mode.

  Example usage: update receive settings for a participant on the fly

  call.updateReceiveSettings({
    'some-participant-id': { video: { layer: 0 } }
  });