May 2022 Summaries

To add custom video call backgrounds to a Daily Prebuilt call frame in a vanilla JavaScript web app, developers can create a free Daily account and room, clone the demo repository, replace the placeholder room URL, install dependencies, and run the app. The app embeds a Daily Prebuilt call frame onto a page and shows a set of custom video backgrounds for the call participant to pick from. To populate the background options, a new function `initBackgrounds()` is called when the DOM has loaded, which loads the background images and sets up an event handler for the "reset" button. The `updateInputSettings()` API method is used to update and reset the video background, allowing developers to add custom backgrounds or remove the default one.

The new baseline composition setting for live streaming and recording allows developers to create engaging, feature-packed video layouts using Daily's Video Component System (VCS). VCS enables the creation of customized interactive live streams or recorded content with features such as custom layouts, image and text overlays, and mid-stream updates. The baseline composition is a default collection of layout and graphics features that work together and are easily accessible via a unified JSON-based control interface. It can be used with any Daily live stream or recording and accepts a comprehensive list of parameters to customize the feed. To access the baseline composition, developers need to set the layout.preset value in their live stream or recording options to 'custom'. The baseline composition offers various options such as adding text overlays, image overlays, picture-in-picture mode, and more. Developers can update video layouts on the fly or add graphic overlays to their live streamed or recorded videos using VCS's baseline composition.

This post introduces how to build a custom React video chat application using Daily's real-time video and audio APIs and the new custom React hooks library, Daily React Hooks. The goal is to create a fully custom experience by leveraging daily-js and Daily React Hooks. The app will include basic features such as creating and joining calls, adding participants, muting devices, screen sharing, and error handling for device permissions. The application uses React's useState hook for managing state and React's useEffect hook for side effects. It also utilizes the useDaily hook to access the call object and other hooks from Daily React Hooks library to simplify code and abstract away complexity. The app is structured into two main views: a home screen with a "Start Call" button and a call UI that displays video and audio streams of participants, as well as controls for muting devices and screen sharing.

In the fitness demo app, users can toggle an "incognito mode" that allows them to display their video feed only to the instructor, while keeping it hidden from other participants. This feature is implemented using a shared state mechanism provided by the Daily platform, which enables the app to persistently share data among call participants. The implementation involves adding a toggle input in the Header component for students to turn on incognito mode, and updating the visible participants list in the GridView component based on the local participant's incognito status. Additionally, the speaker view layout needs to be updated to filter out remote participants when incognito mode is enabled. Overall, this feature aims to provide users with a sense of privacy and security during online fitness classes.