Best practices to scale large experiences

​

Pagination

​

Track subscriptions

1

Set subscribeToTracksAutomatically to false

This turns off Daily’s default track management. This property can be set on join() or call object creation, or via the setSubscribeToTracksAutomatically() method. The latter is a good option if you want to wait to turn on track subscriptions until a certain number of participants have joined the call.

Calling setSubscribeToTracksAutomatically(false) during a call will unsubscribe from all tracks. You will need to manually re-subscribe to tracks as needed.

2

Update participants' subscribed state

Call updateParticipant() or updateParticipants() to change the subscribed value of a participant’s tracks property.Each participant’s tracks include audio (microphone), video (camera), and screenAudio and screenVideo (screenshare). Each track has a state indicating if it can be played, and a subscribed value of true, false, or "staged".A subscribed status of "staged" keeps the connection open but stops bytes from flowing — faster to promote than a full unsubscribe, while still saving bandwidth. Paginated grid apps (including Daily Prebuilt!) often subscribe to tracks on the current page, stage the previous and next pages, and unsubscribe from the rest.updateParticipant() receives an object with the participant’s id as the key and a setSubscribedTracks object as the value:

{
  "82e969ed-d081-4f27-92a8-8014609a1919": {
    "setSubscribedTracks": {
      "video": "staged",
      "audio": "staged"
    }
  }
}

If updating multiple participants at once, combine them into one object with updateParticipants().

3

Listen for participant events

The updateParticipant() method fires a corresponding "participant-updated" event. Add a listener to this event to update the app interface as participants’ tracks state and subscribed statuses change in response.

​

Simulcast layer control

1. The available bandwidth on the receiving end: The SFU will send a lower layer if the current one exceeds the available bandwidth.
2. The send-side is not sending all the layers: This typically occurs when the browser detects network or CPU issues or the highest video resolution of the device does not support the highest layers. It’s also worth noting that the browser can and will modify the actual bitrate, frame rate, and resolution sent on each layer for these same reasons, so the actual settings used oftentimes do not match the configuration.

​

Default simulcast layer settings in daily-js

​

Change send-side video quality

​

sendSettings

• maxBitrate: the desired video bitrate for the layer, in bits per second.
• maxFramerate: an integer value lower than the maximum rate expected from the camera, in frames per second.
• scaleResolutionDownBy: an integer of 1 or greater. The horizontal and vertical dimensions of the source video will be divided by this number to get the resolution for the layer.

// Example: create a Daily call object with one custom simulcast layer configuration

const call = Daily.createCallObject({
  sendSettings: {
    video: {
      encodings: {
        low: {
          maxBitrate: 75000,
          scaleResolutionDownBy: 4,
          maxFramerate: 15,
        },
        medium: {
          maxBitrate: 300000,
          scaleResolutionDownBy: 2,
          maxFramerate: 30,
        },
      },
    },
  },
});

​

inputSettings

// Example: request specific trackConstraints

call.updateInputSettings({
  video: {
    settings: {
      width: 400,
      height: 400,
    },
  },
});

​

Adjust receive-side video quality

1. Request the updated simulcast layer, either through updateReceiveSettings() or by setting receiveSettings in the client properties join().
2. Listen for the "receive-settings-updated" event to update the app interface in response.

// Default everyone to the lowest layer
await call.updateReceiveSettings({ '*': { video: { layer: 0 } } });

let currentSpeakerId = null;

call.on('active-speaker-change', async ({ activeSpeaker }) => {
  const updates = {};

  // Reset the previous speaker back to the default
  if (currentSpeakerId) {
    updates[currentSpeakerId] = 'inherit';
  }

  // Promote the new active speaker to the highest layer
  if (activeSpeaker.peerId) {
    updates[activeSpeaker.peerId] = { video: { layer: 2 } };
    currentSpeakerId = activeSpeaker.peerId;
  }

  await call.updateReceiveSettings(updates);
});

​

Analyzing large call performance