Daily call object mode demo to show how to handle track subscriptions, custom video grid pagination, and receive (simulcast encoding) settings. This demo app will be useful for anyone focusing on improving performance for large meetings in their custom Daily app and/or building a custom video grid layout.
When call sizes exceed a certain volume (~12 or more participants) it's important to start optimising for both bandwidth and CPU. Switching from automatic to manual track subscriptions allows each client to specify which participants they want to receive video and/or audio from, reducing how much data needs to be downloaded as well as the number of connections our servers maintain.
The most common application for this in a video call application is pagination; allowing users to subscribe and stage a subset of active call participants based on their onscreen visibility and call status.
Depending on our call UI, we may also want to further optimise by selectively choosing which video layer to download from a peer dictated by our simulcast encodings settings (for example, limiting smaller tiles to lower quality video.)
This project demonstrates both of these concepts with the help of two new features introduced in daily-js 0.17
:
- setSubscribedTracks ('staged' tracks)
- updateReceiveSettings
➡️ Demo guide
- Create
.env.local
and set bothDAILY_DOMAIN
andDAILY_API_KEY
. If you don't know these, you can find them on your Daily Dashboard - Install dependencies by running
yarn
- Start local development server with
yarn dev
- Follow the full walkthrough here
This project is a minimal viable implementation of manual track subscriptions inside of a React (Next JS) application.
We explore the following concepts:
-
Switching to manual track subscriptions when creating the Daily Call Object.
-
Subscribing, staging and unsubscribing to participants video based on their position in a grid UI.
-
Setting custom simulcast encoding settings.
-
Switching between the various simulcast layers automatically (based on the number of onscreen participants) or by manually setting a layer per participant.
We use the following dependencies in this project:
next
- React based web frameworkevergreen-ui
- functional UI components and stylingssillyname
- generate random silly names for call participantsfast-deep-equal
- deep comparator method for use in reducers and memoizationuse-deep-compare
- useMemo, useCallback, useEffect that deeply compares dependencies
-
This project does not (yet) incorporate participant audio or screen media tracks. If you can't hear other participants, don't be alarmed!
-
Staging tracks and updating receive settings will only work when the call is running in SFU mode. To illustrate this we're calling
setNetworkTopology
which is not recommended for production applications.
- React context are a great way to implement Redux-like states into our application although our application is render heavy without memoized selectors/reselectors.