Skip to content

Conversation

1egoman
Copy link
Contributor

@1egoman 1egoman commented Aug 1, 2025

Adds agent video support to the popup style embed. Right now the behavior is that if a video track is published by an agent, the video track is shown, covering up the transcriptions. There's no way for now to programmatically switch which one is visible.

Note

Important callout: I am not totally satisfied yet with the animation when the video is initially shown. It turns out this is kinda a tricky problem to do well because the video track / associated <video> element shows up and begins animating in before the video stream has fully initialized, leading to the first half of the animation being in practice hard to see with a dark video background over a dark popup background.

Demo

Screen.Recording.2025-09-05.at.10.43.37.AM.mov

(note - no sound is expected, I didn't capture it as part of the demo)

## A few other smaller assorted things:

  • Fix the message scroll behavior - previously, there was a bug that led to no message scrollback, so users could only see the messages on the screen and that was it.
  • Migrate to the pre-existing agent-starter-react room connection code - this logic nicely handles enabling the microphone before the room may be fully connected, so a user can start speaking ASAP.

@1egoman 1egoman force-pushed the fix-scrolling-and-add-video branch from 202df47 to 070685f Compare August 1, 2025 14:41
@1egoman 1egoman requested review from bcherry and lukasIO August 1, 2025 14:45
Copy link
Contributor

@bcherry bcherry left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is amazing

Copy link
Contributor

@lukasIO lukasIO left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚀

Copy link

vercel bot commented Sep 5, 2025

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Preview Comments Updated (UTC)
agent-starter-embed Ready Ready Preview Comment Sep 5, 2025 2:45pm

Big issue though: I can't get the animation fade in to look decent, the
problem is the video element shows up before the data stream fully
starts which means regular fade in animations mostly happen while the
video is black which makes them invisible
@1egoman
Copy link
Contributor Author

1egoman commented Sep 5, 2025

I have rebased this pull request on top of the latest main, adapting what I had before to work on top of the new interface changes introduced in #8.

@thomasyuill-livekit I updated the demo video in the pull request description, but the note about the animation not being all that great still stands. I'm tempted to just merge this given it's something it seems like is being requested exist in the demo. That being said, if you have any suggestions for a better animation (given the challenges with the video animation potentially starting while the video is black), I'd be more than willing to work with you to make it happen.

@1egoman 1egoman changed the title Add agent video support and some cleanup Add agent video support Sep 5, 2025
@thomasyuill-livekit
Copy link
Contributor

thomasyuill-livekit commented Sep 8, 2025

@1egoman

This is great. I think we can merge as is and fix forward.
I'll take a look at the animation when I get some time this week.

I also think we should remove the audio visualizer when we have an avatar/video element as it does not provide much value.

@1egoman 1egoman merged commit 07a69e9 into main Sep 8, 2025
6 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants