<aside> 🔗 Git repo: https://github.com/daily-demos/track-subscriptions

</aside>

<aside> 🔗 Hosted demo: https://track-subscriptions.vercel.app/

</aside>

<aside> 🚨 This reference guide requires methods added in @daily-co/daily-js ≥= 0.17.0

</aside>

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.

This article introduces two new methods as part of daily-js v0.17 that assist in the creation of paginated components as well as suggests various best practices for keeping your apps running silky smooth.

Useful context:

• https://docs.daily.co/docs/a-short-introduction-to-the-architecture-of-a-video-call#the-architecture-of-a-room-p2p-vs-sfu-calls

Contents:

<aside> ☝ Please note that the code in this article is intended to be minimum-viable. For a fully featured example of how to create a paginated call experience, please see our examples repo here https://github.com/daily-demos/examples

</aside>

What we'll achieve in this project