Video Calls

The OmniBots widget supports live video calls between visitors and agents. Video calls are initiated by agents from the Agent Desktop and powered by the Telnyx Video SDK. This page covers the visitor's experience from receiving an invite to managing the call.

Call Flow

1. A live agent initiates a video call from the Agent Desktop chat header
2. The widget receives a video:invite event via WebSocket containing a session ID, room ID, and authentication token
3. The visitor sees a video invite banner with Accept and Decline buttons
4. If accepted, the VideoOverlay takes over the widget with the full video call interface
5. When the call ends (by either party), the widget returns to the chat view

Video Invite Banner

When the agent requests a video call, the visitor sees a banner in the chat window:

• Message: "Agent requesting video call" (or equivalent)
• Accept button: Joins the video call and opens the VideoOverlay
• Decline button: Dismisses the invite and sends a decline signal to the backend

imageVideo invite banner in the chat window showing 'Agent requesting video call' message with green Accept and red Decline buttons

Video call invite banner

One Active Invite

Only one video invite can be active at a time. If the visitor declines, the agent can send a new invite later.

VideoOverlay

After accepting a call, the VideoOverlay fills the widget area (or the entire screen on mobile). It contains the following elements:

Video Feeds

Feed	Position	Description
Remote video (agent)	Main area	Full-width/height video of the remote agent
Local video (visitor)	Bottom-right corner (PiP)	Small 112 x 80 px picture-in-picture of the visitor's camera

When the agent's video has not yet connected, a placeholder is shown with an avatar icon and "Connecting..." text.

When the visitor's camera is off, the local PiP displays a "Camera off" overlay with a camera-slash icon instead of the video feed.

imageVideo call overlay in the widget showing the agent's remote video feed in the main area, visitor's local camera in a small picture-in-picture corner, duration timer, and bottom control bar with mute, camera, blur, screen share, and end call buttons

Video call overlay with remote and local feeds

Duration Timer

A timer in the top-left corner of the video area displays the call duration in MM:SS format. It starts counting from 00:00 when the call begins and updates every second. The timer has a semi-transparent dark background for readability over the video.

Control Bar

The control bar is positioned at the bottom of the VideoOverlay and contains five buttons:

Button	Icon	Active State	Description
Mute/Unmute	Microphone	Red background when muted	Toggles the visitor's microphone
Camera On/Off	Video camera	Red background when off	Toggles the visitor's camera feed
Background Blur	Blur pattern	Blue background when active	Applies AI-powered background blur using MediaPipe. Shows a loading spinner while the segmentation model initializes
Screen Share	Monitor	Blue background when sharing	Shares the visitor's screen with the agent
End Call	Phone hangup	Always red background	Ends the video call for both parties

Button States

Buttons follow a consistent color scheme:

State	Background Color
Default (inactive)	Gray (#374151)
Hover	Lighter gray (#4B5563)
Active feature (blur, screen share)	Blue (#2563EB)
Danger (muted, camera off, end call)	Red (#DC2626)
Disabled (loading)	50% opacity, cursor changes to wait

All buttons are 36px circular buttons with white icons. They include aria-label attributes describing their current function (e.g., "Unmute" vs "Mute").

Background Blur

Background blur uses the MediaPipe Selfie Segmentation model to separate the visitor from their background and apply a blur effect. When the visitor clicks the blur button:

1. A loading spinner appears on the button while the model downloads and initializes
2. Once ready, the visitor's background is blurred in real time
3. Clicking again disables blur and returns to the normal camera feed

Performance

Background blur requires additional CPU/GPU processing. On lower-powered devices, it may impact frame rate. The feature is automatically disabled if the browser does not support the required WebGL capabilities.

Telnyx Video SDK

The video call infrastructure is powered by the Telnyx Video SDK. The widget manages the connection lifecycle:

1. Token exchange -- The backend generates a Telnyx room token for each participant
2. Room join -- The widget connects to the Telnyx room using the provided token
3. Stream management -- Remote and local media streams are attached to <video> elements
4. Cleanup -- On call end, streams are stopped, the room is left, and the overlay is dismissed

The WebSocket protocol handles signaling:

Message	Direction	Description
video:invite	Backend to Widget	Agent initiated a video call (includes session_id, room_id, token)
video:accept	Widget to Backend	Visitor accepted the call
video:decline	Widget to Backend	Visitor declined the call
video:end	Either direction	Call ended
video:ended	Backend to Widget	Server confirmed the call has ended

Accessibility

The VideoOverlay includes the following accessibility features:

• All control buttons have descriptive aria-label attributes that update based on the current state (e.g., "Mute" becomes "Unmute")
• The control bar is keyboard-navigable with Tab
• Focus indicators are visible on all buttons
• The duration timer uses tabular numeric font for consistent width as digits change

Responsive Behavior

On mobile devices, the VideoOverlay fills the entire screen. The control bar remains at the bottom with consistent button sizes. The local PiP video maintains its position in the bottom-right corner with the same 112 x 80 px dimensions.