October 2023 Summaries

In this series, we're building a video call app with a fully customized UI using Angular and Daily's Client SDK for JavaScript. We've reviewed the app's core features, built the join flow, and now focus on updating the participants list when participants toggle their device settings during a call, rendering a video tile component for each participant present in the call, and general recommendations for improving performance when rendering multiple video elements. The app-call component uses a class variable - the participants object - which gets updated throughout the call. We've implemented event listeners for Daily events, such as "track-started" and "track-stopped," to update the participants list when participant tracks change. The video-tile component renders media tracks and device controls, including a control panel for the local participant to turn their media devices on and off. When the local participant's device state changes, the app-call component updates the Daily call instance method accordingly, which in turn causes either the "track-started" or "track-stopped" event to be emitted. The leaveCallClick event emitter invokes the app-call's leaveCall() method, which calls Daily's leave() instance method, resulting in the "participant-left" and "left-meeting" events being emitted for remote participants and the local participant respectively.

We've released three new call object instance methods for testing connection and network quality: `testConnectionQuality()`, `testNetworkConnectivity()`, and `testWebsocketConnectivity()`. These tests assess the quality of a WebRTC connection using a given video track, check whether a stable connection can be established with Daily's TURN server, and determine whether internet connection and network conditions support traffic over WebSockets. The tests can also be aborted mid-test using their respective methods. We've covered common use cases for these features, including facilitating local troubleshooting, tracking quality metrics internally, and informing ideal send setting configuration in the call. A code sample is provided to demonstrate how to use each of these methods, including setup, test execution, and result interpretation. The tests are designed to be run in parallel and provide a user-friendly interface for users to assess their connection quality and network conditions before joining a Daily video call room.

The text discusses the concept of meeting owners and admins in a video call context. Meeting owners have special privileges to manage room access, such as sharing media, starting or stopping live streams, and updating other participants. Admins are similar to owners but can be demoted and have more granular permissions. The text then focuses on sample code that demonstrates how to let meeting owners promote regular participants to admins or remove them from the call using Daily's Client SDK for JavaScript. It explains how the `updateParticipant` method is used with the `canAdmin` property to share admin privileges and how to eject a participant from the call using the `eject` property. The code uses Next.js and Daily Prebuilt, and it updates the UI when participants are promoted or removed from the call.

Daily provides two primary entry points for JavaScript implementations: Daily Prebuilt and the Client SDK for JavaScript, both returning an instance of the same type (`DailyCall`). The call object and call frame are two different configurations of the same underlying type. When creating a new call instance, developers must consider whether to reuse or destroy the existing one. Reusing involves using the `getCallInstance()` method, while destroying involves calling the `destroy()` method after leaving the call (or directly). Destroying is recommended when resetting call state, freeing resources, or creating a new instance. The `leave()` and `destroy()` methods return Promises that must be awaited before recreating another call instance.

The `app-daily-container` component is the parent component for the video call feature in this Angular app. It includes the `join-form` and `app-call` components, which are rendered conditionally based on whether a Daily room URL has been set. The `app-daily-container` shares form input values with the child components using output properties, while also managing the state of the video call by tracking participant information in its `participants` object. When a remote participant joins or leaves the call, the `app-call` component updates its internal state and emits events to notify the parent container. The app also handles case where local participant leaves, resetting the UI by unmounting the `app-call` component and emitting `callEnded()` event.

This Angular-based demo app, built with Daily's Client SDK for JavaScript, supports multi-participant calls and features a fully customized user interface. The app has two main views: a home page with a form to join the call and an in-call view. The join form accepts user name and room URL, while the in-call view displays video tiles for each participant, allowing them to turn their media on/off and leave the call. An error screen is displayed for errors, and a chat component allows participants to send text-based messages to each other during the call. The app's components are structured with a root component (`app-root`) that parents all other components, including `app-daily-container`, `join-form`, `app-call`, `video-tile`, and `error-message`.

To optimize the performance of a custom Daily video chat app with pagination, developers need to find the optimal balance between showing too few or too many video tiles per page, as this can impact both performance and user experience. The ideal number of video tiles per page depends on various factors such as device and network conditions, app nature, and use case constraints. By benchmarking different pagination options using Chrome DevTools performance monitor, developers can identify bottlenecks and optimize their configuration to achieve a smooth user experience while minimizing CPU usage, memory consumption, and rendering issues.

Daily's developer platform powers audio and video experiences for millions of people worldwide, with customers using APIs and client SDKs to build features into applications and websites. The company is exploring automation in video editing as part of its AI Week initiative, with a focus on short-form video content that has become increasingly popular on platforms like TikTok, Instagram, and YouTube. This format combines the challenges of creating high-quality, engaging content quickly, while also requiring significant manual effort to produce polished results. Daily's solution, CutBot, uses a partnership between an expert system and a large language model (LLM) to automate video editing tasks, with the LLM making creative decisions and the expert system posing questions to guide the process. The company has developed an open-source tooling framework called VCSRender that enables batch rendering of short-form videos, which can be used in conjunction with CutBot's AI-powered video editing capabilities.

The Daily's developer platform powers audio and video experiences for millions worldwide. The company is exploring voice-driven AI applications, leveraging large language models (LLMs), WebRTC, and video capabilities. LLMs are good at summarizing text, answering questions, and conversing. To build a voice-driven LLM app, developers need to consider speech-to-text, text-to-speech, and the LLM itself. The platform recommends running everything in the cloud for improved reliability and lower latency. WebRTC is preferred over web sockets for real-time audio streaming due to its ability to deliver audio at low latency across various network connections. The demo showcases a choose-your-own-adventure story with DALL-E generative art, highlighting the potential of combining these technologies.

The Daily engineering team has formed a working group to evaluate the safety and utility of various AI tools, including GitHub Copilot and ChatGPT, as they are increasingly being used for coding and other tasks. The team identified potential risks such as ethical implications, leaking code and secrets, inaccurate results, and noise in the output generated by these tools. However, they also recognized potential benefits like efficiency gains and a better understanding of AI strengths and limitations. To mitigate risks and maximize benefits, the team recommends using judgment when selecting AI tools, preferring established organizations, paying attention to data transmission, and understanding how the output will be used.

Daily's developer platform has partnered with Cerebrium to enable developers to run Daily's Python SDK seamlessly as part of a Cerebrium application, eliminating the need to manage underlying infrastructure. This partnership allows developers to deploy machine learning models alongside voice and video streams in real-time, using pre-built models such as Llama 2 and GPT4All. The integration enables features like object tracking, object segmentation, and speech transcription with minimal latency and scaling requirements, making it easier for developers to build AI-powered applications at scale.