-
Background removal and custom image replacement using React Hooks and MediaPipe
I wanted to share this fun tutorial from our friends at WebRTC Ventures... Learn how to use React Hooks and MediaPipe for: Removing the background from your call Replacing it with a custom image If you give it a try, let us know how it goes!
-
Hackathon Project: Adding hand gesture detection to Daily Prebuilt
It can be difficult to get back into the swing of things after the holiday season, so at Daily, we decided to spend the first week of the year hacking around on projects both personal and Daily-related ⚒️ On Monday morning, the start of our hackathon week, I hadn’t yet decided on a project. I knew I wanted to do something…
-
Hackathon Project: Daily "cable access TV" with nginx
Hackathon Recap Repo here: https://github.com/vipyne/nginx-rtmp-docker The Idea A coworker and I were talking about how we enjoyed learning from our other colleagues, even if it was just watching them screenshare and squash a bug or delve through logs or push a small feature. And sometimes we missed just general office…
-
Hackathon Project: Transcription using VCS and GStreamer
Summary Going into the new year, had not decided on a project for the hackathon. Colleague suggested the idea of integrating transcription as part of the existing VCS feature already on offer. While this has been shared before already here and here, what remained to be seen was how good a sync could be achieved between…
-
Get audio level from a mediastream
Firstly let’s start with creating audio level processor (where we process the frames to calculate the volume) class AudioLevelProcessor extends AudioWorkletProcessor { volume; interval; nextFrame; constructor() { super(); this.volume = 0; this.interval = 25; this.nextFrame = this.interval; } get intervalInFrames() { //…
-
Retrieving information about the latest active Daily meeting session
Quick TypeScript snippet to retrieve info about the latest active Daily meeting session for a given room name via our REST API. I'm trying out a version of this in a Netlify func to implement some admin webinar functionality, to let hosts see who is already in a webinar room before they join. // getActiveMeetingSession()…
-
Circular video tiles with an animated border for the active speaker
Threw together a small example to show how someone could implement some tile styling (making tiles circular), and consume Daily's active speaker events to create an animated border around the active speaker. The border color also serves as an indicator to whether someone has their mic on or off (yellow for mic on, black…
-
Ever wanted to save your device preferences for a Daily call?
If you’re building a custom call UI with Daily’s callObject, you can save the user’s device preference (i.e. their preferred mic, camera, and speakers) by passing the useDevicePreferenceCookies property to dailyConfig while creating the callObject, like below: const callObject = DailyIframe.createCallObject({ url:…
-
Transcript on top of Daily recordings
If you'd like to add captions to your Daily recordings, you can combine the transcription feature with the new VCS recording feature like so: callObject.on('app-message', (newText) => { if (msg.fromId === 'transcription' && msg.data.is_final) { call.updateLiveStreaming({ layout: { preset: "custom", composition_params: {…
-
Add transcripts to your recordings
Using a custom VCS layout and live transcription, you can make sure those transcripts show up on the recorded stream using this code snippet: callObject.on('app-message', (newText) => { if (msg.fromId === 'transcription' && msg.data.is_final) { call.updateRecording({ layout: { preset: "custom", composition_params: {…