January 2022 Summaries

In an increasingly distributed world, there's a desire to simulate physical spaces for people to meet remotely, enabling applications such as virtual offices, community hangout spaces, and more. The goal of this spatialization series is to present a demo showcasing one approach to building an app with spatialization features using the Daily API. The demo will be a client-only app with a 2D world where users can traverse with arrow keys, hear and see other users as they come within proximity, and broadcast to all other world members or join smaller dedicated spaces for focused conversations. The completed demo app is available on GitHub, and the series will cover the main application structure, tech stack, and relevant parts of the Daily API, as well as implementation details and lessons learned along the way.

"Reslash," a virtual space company, uses its platform to host various online events such as concerts, games, and live gatherings. The company's API showed strain as the events grew larger and more popular, prompting a switch to Daily for video and audio capabilities. Daily's flexibility and scalability issues were resolved after Reslash switched vendors, allowing the team to focus on developing new features and monetizing their platform. With Daily, Reslash has improved its user experience, delivering high-quality screen shares and faster start times, while also providing simplified pricing that enables easy cost estimation. The company credits Daily with giving them the growth they needed to scale as a bootstrap startup, allowing them to develop and monetize their video-driven community platform.

At Daily, a remote team is introducing a new background blur feature to enhance video call experiences, supported on desktop Chrome, Firefox, and Chromium-based browsers, allowing users to hide any chaos behind them during calls. The feature can be enabled through the dashboard, REST API, or daily-js, providing fine-grained control over the blur strength. Background blur is fully integrated with Daily Prebuilt, enabling users to toggle it on or off in rooms created through the API or dashboard, and also adjust the blur strength for more control. For custom call object mode, a new updateInputSettings() instance method allows updating settings for local media inputs during calls, including enabling background blur with a settings configuration or disabling it by setting type to 'none'. The feature is rolled out as part of the first API for manipulating user virtual backgrounds, and more customization options will be available soon.

This post walks through how to implement an active speaker spotlight in a custom React app using Daily React Hooks, a ready-to-use embeddable video chat interface. The demo uses the `active-speaker-change` event to update the app state and render the current speaker more prominently than other participants. The `ParticipantsProvider` component listens for this event and updates the app's active speaker state, which is then used to calculate the `currentSpeaker` value. This value is used to display the active speaker in a `SpeakerView` component, while other participants are displayed in a `ParticipantBar` component. The demo also handles screen sharing and edge cases where participants may leave or unmute, using various techniques such as sorting and reversing lists of participants, and debouncing scrolling events.

At Daily, improving browser performance and call quality is crucial for successful video calls. One area of focus is optimizing small frame videos, which can be displayed in small dimensions or on mobile devices. By sending only a lower resolution layer of each video to other participants, developers can reduce data sent via the SFU and improve overall call performance. This can also potentially allow for more people to join a call without a noticeable performance hit. Developers can manually change the upstream camera video bandwidth used or use Daily's setBandwidth method to achieve this. Additionally, receiving only the lowest simulcast layer can be done by using Daily's updateReceiveSettings method or the receiveSettings property when joining a call, allowing for app-specific logic to choose which layer to use.

The post discusses implementing meeting access control in a Daily chat application. It covers creating a private room and running the demo locally, setting up a lobby for participants to request access, and granting permissions as owners. The code snippets are in React and use Daily methods and events such as `accessState()`, `requestAccess()`, and `updateWaitingParticipant()` to manage meeting access levels. The application allows for more granular control over meeting access, enabling developers to set up different participant permissions levels. The demo app demonstrates how to create a private room, join a call, and request access using the Daily API.

Svelte is a frontend component framework that can be used as an alternative to other frameworks like React or Vue. It differs from other frameworks based on how it updates the app's UI, using a compiler that converts components into highly efficient imperative code that surgically updates the DOM itself. Svelte provides instance methods to programmatically do anything you can already do via Daily Prebuilt's UI, giving flexibility to how you want to set up your own app's UI. The tutorial demonstrates how to embed Daily Prebuilt in a Svelte app, handle updating components based on whether you've joined a Daily call or not, and manage the Daily Prebuilt call with a custom control panel. It also covers how to add custom buttons to toggle local audio and clean up after leaving a Daily call.