March 2022 Summaries

Here's a 1-paragraph summary of the text: In this part three of the fitness use case series, the focus is on adding automated features to the Daily fitness demo app, specifically automatic recording when the instructor joins the class. This involves setting up meeting token properties and updating recording settings to record only the instructor's video and audio, improving the experience for both instructors and attendees. The tutorial covers how to achieve this using daily-js, including creating a new meeting token with specific properties, updating the code snippet to enable cloud recording on join, and modifying the RecordingProvider component to use a single-participant cloud layout, resulting in a more private and user-friendly recording process.

This post is part seven of a series on how to build an app with spatialization features using Daily's real time video and audio APIs. The author welcomes the reader to the final post in their spatialization series, which covers testing approaches used for a demo application built with TypeScript, PixiJS, and the Web Audio API. The demo tests various aspects of its functionality, including user interaction, proximity calculation, and audio graph behavior. To test these features, the authors use two methods: robots, which simulate human-like interactions in virtual rooms, and automated unit and integration tests written in Jest. Robots are simulated using WebDriver instances hosted on AWS, while unit tests focus on validating individual application components, such as functions or classes. Integration tests, on the other hand, test interaction between multiple components. The authors also discuss challenges in testing the Web Audio API and its peripherals, such as MediaStreamTrack, and implement custom mocks to overcome these limitations. Finally, they provide an example of a test case that verifies the pan value of a speaker's audio when positioned at maximum earshot distance from a listener.

Daily, a platform for creating custom apps, has released a tutorial series on how to build a custom fitness app with real-time video capabilities. The first part of the series focused on setting up the basic feature set, and this second part delves into two specific features: adding "Mute all" buttons for student microphones and cameras, and auto-muting the participants' devices when the instructor starts the class. By utilizing Daily's open-source examples repository and understanding how to use the `updateParticipants` method, developers can implement these features in their fitness app, enhancing the user experience for instructors and students alike.

This is an overview of how to add a new screen sharing feature to a spatialization demo using Daily's real-time video and audio APIs. The feature allows users to share their screen with others in the same room, either globally or within focus zones. To implement this feature, you'll need to check if the user's browser supports screen sharing, enable it in the Daily room configuration, and manually retrieve the screen video stream using `MediaDevices.getDisplayMedia()`. You'll also need to create a button to toggle screen sharing on and off, as well as handle cases where the user is leaving or joining a call. The feature uses a Room class to manage state changes and a World instance to update participant tracks, including screen shares. To display the screen share, you can reuse existing camera tile logic by introducing an enum called `zonemateTileKind` and using it to call a common function `showZonemate()`.

The tutorial discusses how to handle device permissions in video and audio-only calls within a custom Daily app built with SvelteKit, focusing on the 'camera-error' event triggered by Daily when there's an issue accessing devices such as cameras or microphones. The app displays an error message to users, providing instructions on how to resolve the issue, and includes a "Try again" button that clears the error state once permissions are updated.

This tutorial from Daily aims to help developers build a real-time video call experience using Web Components and the daily-js library. The tutorial starts by setting up a new account, creating a room URL, and forking the demo repository. It then guides the reader through building a simple video call experience with two participants, including features such as joining the call, seeing and hearing other participants, toggling camera and microphone settings, sharing screens, and leaving the call. The tutorial uses plain JavaScript to demonstrate how Web Components work together to create this experience. Along the way, it explains the basics of Web Components, including custom elements, HTML templates, and Shadow DOM. It also shows how to integrate these components with the daily-js library to access its methods and functionality. Ultimately, the goal is to inspire developers to customize their own video call experiences using Web Components and daily-js.

The Daily team is launching a new series on building a custom daily fitness app using WebRTC APIs, with a focus on online fitness classes where one instructor leads multiple students. The team has created an open-source demo app that covers basic functionality but lacks specific details for unique features, and will be adding these features over the next few weeks through code samples and quick posts. To help developers get started, Daily is providing resources such as the existing tutorials on building custom apps in various front-end frameworks, including Next.js, React Native, SvelteKit, Electron, and Vue.js. The goal is to provide a comprehensive guide for building a large, multi-feature custom daily fitness app that covers key use cases and features.

Daily React Hooks` are a series of custom React hooks that connect to Daily's JavaScript API, simplifying code and improving performance in real-time video and audio applications. They offer advantages such as simplified code, reduced component re-renders, abstracted error handling, and state management, allowing developers to focus on building engaging apps. The library leverages React's internal state management tools and connects to Daily's JavaScript API, making it easier to debug and maintain. By using `Daily React Hooks`, developers can convert their existing codebase from daily-js and optimize performance, reducing development cycles and improving overall app performance.

This post is part five of a series on building an app with spatialization features using Daily's real-time video and audio APIs. The introduction reviews previous posts on setting up the 2D world and managing users' video and audio tracks based on proximity to each other in a traversal space. The main topic of this post is creating different kinds of interactive elements for users to join different zones or broadcast to everyone else in the world. Zones are defined as areas with distinct behaviors, including global traversal zone, broadcast focus zone, and isolated focus zone. Users can interact with these zones by entering or leaving them, which updates their video and audio tracks accordingly. The post covers the implementation of broadcast zones and desk zones, including the unique behaviors of each type. It also discusses how users' zone updates are handled when another user joins or leaves a zone, and how this logic is structured for every tick of the world. Overall, this post provides an in-depth look at how focus zones interact with users and facilitate spatialization features in the app.