Company
Date Published
Author
Jess Mitchell
Word count
2527
Language
English
Hacker News points
None

Summary

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.