@rapidmx/meet-plugin 0.5.0 → 0.8.0

package/dist/apps/meet/_CallControls.js

@@ -7,15 +7,18 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * The in-call control bar, fixed to the bottom of the call (`_CallView.tsx` lays it out below the tiles, never over
  * them). Its menus open upward, centered on the whole bar on a phone (where the bar wraps onto two rows and a menu
  * hung from its own button would run off the edge) and from their own button on a wider window: microphone and camera (each a mute/unmute or on/off button next to a menu that picks the device), share
- * screen, reactions, raise hand, grid/focus and leave.
+ * screen, reactions, raise hand, grid/focus and leave. The effects button opens the video filter picker
+ * (`_EffectsPanel.tsx`) and lights up while any filter is on.
  *
  * The microphone button shows a live level while it is unmuted - bars that move with the sound the microphone is
  * picking up, so a participant can see their audio is being sent - and the camera button shows a green dot while a
  * camera is sending. Both are driven by `LocalMedia` (`apps/shared/media/useLocalMedia.ts`).
  */
 import { useEffect, useRef, useState } from "react";
+import { filtersActive } from "../shared/media/filters/filterTypes.js";
 import { REACTION_EMOJIS } from "../shared/webrtc/types.js";
-import { ChevronUpIcon, EmojiIcon, FocusIcon, GridIcon, HandIcon, LeaveIcon, MicIcon, MicOffIcon, ScreenShareIcon, VideoIcon, VideoOffIcon, } from "./_icons.js";
+import EffectsPanel from "./_EffectsPanel.js";
+import { ChevronUpIcon, EffectsIcon, EmojiIcon, FocusIcon, GridIcon, HandIcon, LeaveIcon, MicIcon, MicOffIcon, ScreenShareIcon, VideoIcon, VideoOffIcon, } from "./_icons.js";
 const BUTTON = "flex items-center justify-center h-12 rounded-full transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80";
 const NEUTRAL = "bg-[#3c4043] text-white hover:bg-[#4b4f53]";
 const ALERT = "bg-[#f9dedc] text-[#8c1d18] hover:bg-[#f2c4c0]";
@@ -53,7 +56,7 @@ export default function CallControls({ media, isPresenting, presentingElsewhereN
     function toggleMenu(menu) {
         setOpenMenu((prev) => (prev === menu ? null : menu));
     }
-    return (_jsxs("div", { ref: barRef, className: "relative flex flex-wrap items-center justify-center gap-2 px-3", role: "toolbar", "aria-label": "Call controls", children: [_jsxs("div", { className: "sm:relative flex items-stretch gap-px", children: [_jsx("button", { type: "button", className: `${BUTTON} w-9 rounded-r-none ${media.micOn ? NEUTRAL : ALERT}`, "aria-label": "Choose microphone", "aria-haspopup": "menu", "aria-expanded": openMenu === "audio", onClick: () => toggleMenu("audio"), children: _jsx(ChevronUpIcon, {}) }), _jsxs("button", { type: "button", className: `${BUTTON} min-w-14 gap-1.5 px-3 rounded-l-none ${media.micOn ? NEUTRAL : ALERT}`, "aria-label": media.micOn ? "Mute microphone" : "Unmute microphone", "aria-pressed": !media.micOn, onClick: () => void media.toggleMic(), children: [media.micOn && _jsx(LevelBars, { level: media.audioLevel }), media.micOn ? _jsx(MicIcon, {}) : _jsx(MicOffIcon, {})] }), openMenu === "audio" && _jsx(DeviceMenu, { kind: "audio", media: media, onClose: () => setOpenMenu(null) })] }), _jsxs("div", { className: "sm:relative flex items-stretch gap-px", children: [_jsx("button", { type: "button", className: `${BUTTON} w-9 rounded-r-none ${media.cameraOn ? NEUTRAL : ALERT}`, "aria-label": "Choose camera", "aria-haspopup": "menu", "aria-expanded": openMenu === "video", onClick: () => toggleMenu("video"), children: _jsx(ChevronUpIcon, {}) }), _jsxs("button", { type: "button", className: `${BUTTON} relative min-w-14 px-3 rounded-l-none ${media.cameraOn ? NEUTRAL : ALERT}`, "aria-label": media.cameraOn ? "Turn off camera" : "Turn on camera", "aria-pressed": !media.cameraOn, onClick: () => void media.toggleCamera(), children: [media.cameraOn ? _jsx(VideoIcon, {}) : _jsx(VideoOffIcon, {}), media.cameraOn && (_jsx("span", { className: "absolute top-2 right-2 w-2 h-2 rounded-full bg-[#34a853] animate-pulse", "data-testid": "camera-live", title: "Your camera is sending" }))] }), openMenu === "video" && _jsx(DeviceMenu, { kind: "video", media: media, onClose: () => setOpenMenu(null) })] }), _jsx("button", { type: "button", className: `${BUTTON} w-12 ${isPresenting ? ACTIVE : NEUTRAL} disabled:opacity-40 disabled:cursor-not-allowed`, "aria-label": isPresenting ? "Stop sharing" : "Share screen", "aria-pressed": isPresenting, disabled: shareDisabled, title: shareDisabled ? `${presentingElsewhereName} is presenting - stop their share to present yourself.` : undefined, onClick: onToggleShare, children: _jsx(ScreenShareIcon, {}) }), _jsxs("div", { className: "sm:relative", children: [_jsx("button", { type: "button", className: `${BUTTON} w-12 ${NEUTRAL}`, "aria-label": "Send a reaction", "aria-haspopup": "menu", "aria-expanded": openMenu === "emoji", onClick: () => toggleMenu("emoji"), children: _jsx(EmojiIcon, {}) }), openMenu === "emoji" && (_jsx("div", { role: "menu", "aria-label": "Reactions", className: "absolute bottom-full mb-3 left-1/2 -translate-x-1/2 w-max grid grid-cols-4 gap-1 p-2 rounded-2xl bg-[#2b2d30] shadow-xl", children: REACTION_EMOJIS.map((emoji) => (_jsx("button", { type: "button", role: "menuitem", className: "w-11 h-11 rounded-lg text-2xl hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80", "aria-label": `Send ${emoji}`, onClick: () => {
+    return (_jsxs("div", { ref: barRef, className: "relative flex flex-wrap items-center justify-center gap-2 px-3", role: "toolbar", "aria-label": "Call controls", children: [_jsxs("div", { className: "sm:relative flex items-stretch gap-px", children: [_jsx("button", { type: "button", className: `${BUTTON} w-9 rounded-r-none ${media.micOn ? NEUTRAL : ALERT}`, "aria-label": "Choose microphone", "aria-haspopup": "menu", "aria-expanded": openMenu === "audio", onClick: () => toggleMenu("audio"), children: _jsx(ChevronUpIcon, {}) }), _jsxs("button", { type: "button", className: `${BUTTON} min-w-14 gap-1.5 px-3 rounded-l-none ${media.micOn ? NEUTRAL : ALERT}`, "aria-label": media.micOn ? "Mute microphone" : "Unmute microphone", "aria-pressed": !media.micOn, onClick: () => void media.toggleMic(), children: [media.micOn && _jsx(LevelBars, { level: media.audioLevel }), media.micOn ? _jsx(MicIcon, {}) : _jsx(MicOffIcon, {})] }), openMenu === "audio" && _jsx(DeviceMenu, { kind: "audio", media: media, onClose: () => setOpenMenu(null) })] }), _jsxs("div", { className: "sm:relative flex items-stretch gap-px", children: [_jsx("button", { type: "button", className: `${BUTTON} w-9 rounded-r-none ${media.cameraOn ? NEUTRAL : ALERT}`, "aria-label": "Choose camera", "aria-haspopup": "menu", "aria-expanded": openMenu === "video", onClick: () => toggleMenu("video"), children: _jsx(ChevronUpIcon, {}) }), _jsxs("button", { type: "button", className: `${BUTTON} relative min-w-14 px-3 rounded-l-none ${media.cameraOn ? NEUTRAL : ALERT}`, "aria-label": media.cameraOn ? "Turn off camera" : "Turn on camera", "aria-pressed": !media.cameraOn, onClick: () => void media.toggleCamera(), children: [media.cameraOn ? _jsx(VideoIcon, {}) : _jsx(VideoOffIcon, {}), media.cameraOn && (_jsx("span", { className: "absolute top-2 right-2 w-2 h-2 rounded-full bg-[#34a853] animate-pulse", "data-testid": "camera-live", title: "Your camera is sending" }))] }), openMenu === "video" && _jsx(DeviceMenu, { kind: "video", media: media, onClose: () => setOpenMenu(null) })] }), _jsxs("div", { className: "sm:relative", children: [_jsx("button", { type: "button", className: `${BUTTON} w-12 ${filtersActive(media.filters) ? ACTIVE : NEUTRAL}`, "aria-label": "Video effects", "aria-haspopup": "dialog", "aria-expanded": openMenu === "effects", onClick: () => toggleMenu("effects"), children: _jsx(EffectsIcon, {}) }), openMenu === "effects" && (_jsx("div", { role: "dialog", "aria-label": "Video effects", className: "absolute bottom-full mb-3 left-1/2 -translate-x-1/2 w-96 max-w-[calc(100vw-1rem)] max-h-[60vh] overflow-y-auto p-3 rounded-2xl bg-[#2b2d30] text-white shadow-xl", children: _jsx(EffectsPanel, { media: media, tone: "dark" }) }))] }), _jsx("button", { type: "button", className: `${BUTTON} w-12 ${isPresenting ? ACTIVE : NEUTRAL} disabled:opacity-40 disabled:cursor-not-allowed`, "aria-label": isPresenting ? "Stop sharing" : "Share screen", "aria-pressed": isPresenting, disabled: shareDisabled, title: shareDisabled ? `${presentingElsewhereName} is presenting - stop their share to present yourself.` : undefined, onClick: onToggleShare, children: _jsx(ScreenShareIcon, {}) }), _jsxs("div", { className: "sm:relative", children: [_jsx("button", { type: "button", className: `${BUTTON} w-12 ${NEUTRAL}`, "aria-label": "Send a reaction", "aria-haspopup": "menu", "aria-expanded": openMenu === "emoji", onClick: () => toggleMenu("emoji"), children: _jsx(EmojiIcon, {}) }), openMenu === "emoji" && (_jsx("div", { role: "menu", "aria-label": "Reactions", className: "absolute bottom-full mb-3 left-1/2 -translate-x-1/2 w-max grid grid-cols-4 gap-1 p-2 rounded-2xl bg-[#2b2d30] shadow-xl", children: REACTION_EMOJIS.map((emoji) => (_jsx("button", { type: "button", role: "menuitem", className: "w-11 h-11 rounded-lg text-2xl hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80", "aria-label": `Send ${emoji}`, onClick: () => {
                                 onReaction(emoji);
                                 setOpenMenu(null);
                             }, children: emoji }, emoji))) }))] }), _jsx("button", { type: "button", className: `${BUTTON} w-12 ${handRaised ? ACTIVE : NEUTRAL}`, "aria-label": handRaised ? "Lower hand" : "Raise hand", "aria-pressed": handRaised, onClick: onToggleHand, children: _jsx(HandIcon, {}) }), _jsx("button", { type: "button", className: `${BUTTON} w-12 ${NEUTRAL}`, "aria-label": viewMode === "grid" ? "Switch to focused view" : "Switch to grid view", onClick: onToggleViewMode, children: viewMode === "grid" ? _jsx(FocusIcon, {}) : _jsx(GridIcon, {}) }), _jsx("button", { type: "button", className: `${BUTTON} w-16 bg-[#d93025] text-white hover:bg-[#b3261e]`, "aria-label": "Leave call", onClick: onLeave, children: _jsx(LeaveIcon, {}) })] }));

package/dist/apps/meet/_CallView.d.ts

@@ -42,6 +42,9 @@ export interface CallViewProps {
     selfName: string;
     meetingTitle: string;
     iceServers: RTCIceServer[];
+    /** Whether the server offers the WebSocket media relay, the last-resort path for a participant neither a direct
+     * connection nor the TURN server can reach - `VideoMeetingJoinResult.relayEnabled`. Off when absent. */
+    relayEnabled?: boolean;
     /** The camera and microphone, owned by the page (`[token].tsx`) - the lobby's tracks carried into the call. */
     media: LocalMedia;
     onLeave: () => void;
@@ -58,4 +61,4 @@ export declare function computeMainUid(options: {
  * from two devices - or two tabs - is two participants rather than one that ignores itself. It travels as the
  * `peer` of each message; `from` stays the exact authenticated uid, which the server requires. */
 export declare function newPeerId(selfUid: string): string;
-export default function CallView({ channel, token, selfUid, selfName, meetingTitle, iceServers, media, onLeave }: CallViewProps): React.JSX.Element;
+export default function CallView({ channel, token, selfUid, selfName, meetingTitle, iceServers, relayEnabled, media, onLeave }: CallViewProps): React.JSX.Element;

package/dist/apps/meet/_CallView.js

@@ -42,6 +42,7 @@ import { startLevelMeter } from "../shared/media/levelMeter.js";
 import { requestDisplayMedia, stopStream } from "../shared/media/deviceMedia.js";
 import { createBrowserPeerConnection } from "../shared/webrtc/realPeerConnection.js";
 import { MeshConnectionManager } from "../shared/webrtc/MeshConnectionManager.js";
+import { createRelayTransport } from "../shared/relay/RelayTransport.js";
 import { GuestSignalingClient } from "../shared/push/GuestSignalingClient.js";
 import CallControls from "./_CallControls.js";
 import ParticipantTile from "./_ParticipantTile.js";
@@ -69,7 +70,7 @@ export function computeMainUid(options) {
 export function newPeerId(selfUid) {
     return `${selfUid}~${globalThis.crypto?.randomUUID?.() ?? Math.random().toString(36).slice(2)}`;
 }
-export default function CallView({ channel, token, selfUid, selfName, meetingTitle, iceServers, media, onLeave }) {
+export default function CallView({ channel, token, selfUid, selfName, meetingTitle, iceServers, relayEnabled, media, onLeave }) {
     const [peerId] = useState(() => newPeerId(selfUid));
     const [connectError, setConnectError] = useState(null);
     const [participants, setParticipants] = useState([]);
@@ -85,6 +86,7 @@ export default function CallView({ channel, token, selfUid, selfName, meetingTit
     const [announcement, setAnnouncement] = useState("");
     const [audioBlocked, setAudioBlocked] = useState(false);
     const [audioNonce, setAudioNonce] = useState(0);
+    const [signalingReady, setSignalingReady] = useState(false);
     const managerRef = useRef(null);
     const screenStreamRef = useRef(null);
     const levelMetersRef = useRef({});
@@ -110,6 +112,7 @@ export default function CallView({ channel, token, selfUid, selfName, meetingTit
             iceServers,
             channel: client,
             createPeerConnection: createBrowserPeerConnection,
+            relay: relayEnabled ? createRelay(channel, peerId) : undefined,
             localAudioTrack: media.audioTrack,
             localVideoTrack: media.videoTrack,
             localState: { audioOn: media.micOn, videoOn: media.cameraOn },
@@ -162,6 +165,7 @@ export default function CallView({ channel, token, selfUid, selfName, meetingTit
             .then(() => {
             if (!cancelled) {
                 manager.start();
+                setSignalingReady(true);
             }
         })
             .catch((err) => {
@@ -266,8 +270,12 @@ export default function CallView({ channel, token, selfUid, selfName, meetingTit
     const presenterName = presenterUid ? (presenterUid === peerId ? selfName : (participants.find((p) => p.uid === presenterUid)?.name ?? "Someone")) : undefined;
     const raisedNames = [...(handRaised ? ["You"] : []), ...participants.filter((p) => p.handRaised).map((p) => p.name)];
     const alone = participants.length === 0;
-    const remoteTile = (p, className) => (_jsx(ParticipantTile, { name: p.name, stream: remoteStreams[p.uid] ?? null, cameraOff: !p.videoOn, micMuted: !p.audioOn, handRaised: p.handRaised, isFocused: mainUid === p.uid, contain: presenterUid === p.uid, className: className, onClick: () => togglePin(p.uid) }, p.uid));
-    const selfTile = (className) => (_jsx(ParticipantTile, { name: selfName, stream: media.videoStream, isLocal: true, cameraOff: !media.cameraOn, micMuted: !media.micOn, handRaised: handRaised, className: className }));
+    // This participant has no working link yet: the signaling channel is still opening, or there is someone in the call
+    // and every connection to them is still being made. Once any one is up (or nobody else is here) it is not shown,
+    // so someone already in the call is not told they are "connecting" each time a newcomer arrives.
+    const selfConnecting = !connectError && (!signalingReady || (!alone && participants.every((p) => p.transport === "connecting")));
+    const remoteTile = (p, className) => (_jsx(ParticipantTile, { name: p.name, stream: remoteStreams[p.uid] ?? null, cameraOff: !p.videoOn, micMuted: !p.audioOn, handRaised: p.handRaised, transport: p.transport, status: p.transport === "connecting" ? "Awaiting connection…" : undefined, isFocused: mainUid === p.uid, contain: presenterUid === p.uid, className: className, onClick: () => togglePin(p.uid) }, p.uid));
+    const selfTile = (className) => (_jsx(ParticipantTile, { name: selfName, stream: media.videoStream, isLocal: true, cameraOff: !media.cameraOn, micMuted: !media.micOn, handRaised: handRaised, status: selfConnecting ? "Connecting…" : undefined, className: className }));
     const mainParticipant = participants.find((p) => p.uid === mainUid);
     const thumbnails = participants.filter((p) => p.uid !== mainUid);
     let stage;
@@ -297,6 +305,12 @@ function RemoteAudio({ stream, onBlocked }) {
     }, [stream, onBlocked]);
     return _jsx("audio", { ref: audioRef, autoPlay: true, "data-testid": "remote-audio" });
 }
+/** The WebSocket media relay for this call, or `undefined` when this browser cannot run it (no WebCodecs) - the
+ * mesh then never falls back to it, and says so by marking an unreachable participant `"failed"`. */
+function createRelay(meetingUid, peerId) {
+    const relay = createRelayTransport({ meetingUid, peerId });
+    return relay.supported ? relay : undefined;
+}
 function stopLevelMeter(ref, uid) {
     ref.current[uid]?.stop();
     delete ref.current[uid];

package/dist/apps/meet/_EffectsPanel.d.ts

@@ -0,0 +1,17 @@
+/**
+ * The picker for the video filters (`apps/shared/media/filters/`): a background, a colour effect and a face accessory,
+ * each one of a short list, chosen independently so they combine. Shared by the lobby (on the page's light theme) and
+ * the in-call control bar (on its dark one) - `tone` picks the colours, nothing else differs.
+ *
+ * The background can also be a picture from the participant's own device: choosing "Custom image" with none picked yet
+ * opens the file picker, and once one is picked "Change image" is offered beside the options. The picture is read and
+ * kept in the browser (`filters/backgroundImage.ts`) - it is never uploaded.
+ */
+import React from "react";
+import type { LocalMedia } from "../shared/media/useLocalMedia.js";
+export type EffectsTone = "light" | "dark";
+export interface EffectsPanelProps {
+    media: LocalMedia;
+    tone: EffectsTone;
+}
+export default function EffectsPanel({ media, tone }: EffectsPanelProps): React.JSX.Element;

package/dist/apps/meet/_EffectsPanel.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz. All rights reserved.
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+/**
+ * The picker for the video filters (`apps/shared/media/filters/`): a background, a colour effect and a face accessory,
+ * each one of a short list, chosen independently so they combine. Shared by the lobby (on the page's light theme) and
+ * the in-call control bar (on its dark one) - `tone` picks the colours, nothing else differs.
+ *
+ * The background can also be a picture from the participant's own device: choosing "Custom image" with none picked yet
+ * opens the file picker, and once one is picked "Change image" is offered beside the options. The picture is read and
+ * kept in the browser (`filters/backgroundImage.ts`) - it is never uploaded.
+ */
+import { useRef, useState } from "react";
+import { ACCESSORY_OPTIONS, BACKGROUND_OPTIONS, EFFECT_OPTIONS, } from "../shared/media/filters/filterTypes.js";
+const CHIP = "flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm transition-colors focus:outline-none focus-visible:ring-2";
+const TONES = {
+    light: {
+        idle: "border border-border bg-surface text-text hover:bg-surface-alt",
+        selected: "border border-primary bg-surface-alt text-text font-semibold",
+        muted: "text-text-muted",
+        ring: "focus-visible:ring-primary",
+        link: "text-primary",
+    },
+    dark: {
+        idle: "bg-[#3c4043] text-white hover:bg-[#4b4f53]",
+        selected: "bg-[#a8c7fa] text-[#062e6f] hover:bg-[#8ab4f8]",
+        muted: "text-white/70",
+        ring: "focus-visible:ring-white/80",
+        link: "text-[#8ab4f8]",
+    },
+};
+export default function EffectsPanel({ media, tone }) {
+    const colors = TONES[tone];
+    const fileInput = useRef(null);
+    const [fileError, setFileError] = useState(null);
+    const { filters, filterStatus } = media;
+    function group(key, label, options, onChoose) {
+        return (_jsxs("div", { role: "group", "aria-label": label, className: "mt-3 first:mt-0", children: [_jsx("p", { className: `text-xs font-semibold uppercase tracking-wide mb-1.5 ${colors.muted}`, children: label }), _jsx("div", { className: "flex flex-wrap gap-1.5", children: options.map((option) => (_jsxs("button", { type: "button", className: `${CHIP} ${colors.ring} ${filters[key] === option.id ? colors.selected : colors.idle}`, "aria-pressed": filters[key] === option.id, onClick: () => onChoose(option.id), children: [_jsx("span", { "aria-hidden": "true", children: option.emoji }), option.label] }, option.id))) })] }));
+    }
+    async function handleFile(event) {
+        const input = event.target;
+        const file = input.files?.[0];
+        // Cleared so picking the same file again still counts as a change.
+        input.value = "";
+        if (file) {
+            setFileError(await media.chooseBackgroundImage(file));
+        }
+    }
+    function chooseBackground(id) {
+        setFileError(null);
+        if (id === "image" && !media.hasBackgroundImage) {
+            fileInput.current?.click();
+            return;
+        }
+        media.setFilters({ background: id });
+    }
+    return (_jsxs("div", { children: [group("background", "Background", BACKGROUND_OPTIONS, chooseBackground), media.hasBackgroundImage && (_jsx("button", { type: "button", className: `mt-1.5 text-sm underline ${colors.link} focus:outline-none focus-visible:ring-2 ${colors.ring}`, onClick: () => fileInput.current?.click(), children: "Change image" })), _jsx("input", { ref: fileInput, type: "file", accept: "image/*", className: "hidden", "aria-label": "Background image", onChange: handleFile }), fileError && (_jsx("p", { role: "alert", className: "mt-1.5 text-sm text-[#d93025]", children: fileError })), group("effect", "Look", EFFECT_OPTIONS, (id) => media.setFilters({ effect: id })), group("accessory", "Fun", ACCESSORY_OPTIONS, (id) => media.setFilters({ accessory: id })), filterStatus.loading && (_jsx("p", { role: "status", className: `mt-3 text-sm ${colors.muted}`, children: "Loading effects\u2026" })), filterStatus.error && (_jsx("p", { role: "alert", className: "mt-3 text-sm text-[#d93025]", children: filterStatus.error })), !media.cameraOn && _jsx("p", { className: `mt-3 text-sm ${colors.muted}`, children: "Turn on your camera to see effects." })] }));
+}

package/dist/apps/meet/_MeetLobby.d.ts

@@ -4,6 +4,10 @@
  * the page (`[token].tsx`) rather than by this component - the tracks previewed here are the tracks the call sends,
  * so leaving the lobby for the call must not (and does not) stop them.
  *
+ * The "Effects" section opens the video filter picker (`_EffectsPanel.tsx`), so the participant sees themselves with
+ * a blurred or replaced background, or a fun accessory, before anyone else does. What they chose last time is
+ * already applied when the lobby opens (`useLocalMedia()` remembers it).
+ *
  * Access is requested when the lobby opens, and again from the "Allow" / "Try again" button: a click is a user
  * gesture, which some browsers require before they will show a permission prompt at all. When access is refused, or
  * there is no camera or microphone, the lobby says so and why, and joining is still allowed - a participant with

package/dist/apps/meet/_MeetLobby.js

@@ -9,6 +9,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * the page (`[token].tsx`) rather than by this component - the tracks previewed here are the tracks the call sends,
  * so leaving the lobby for the call must not (and does not) stop them.
  *
+ * The "Effects" section opens the video filter picker (`_EffectsPanel.tsx`), so the participant sees themselves with
+ * a blurred or replaced background, or a fun accessory, before anyone else does. What they chose last time is
+ * already applied when the lobby opens (`useLocalMedia()` remembers it).
+ *
  * Access is requested when the lobby opens, and again from the "Allow" / "Try again" button: a click is a user
  * gesture, which some browsers require before they will show a permission prompt at all. When access is refused, or
  * there is no camera or microphone, the lobby says so and why, and joining is still allowed - a participant with
@@ -23,6 +27,8 @@ import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import Button from "@rapidmx/react-shared/components/buttons/Button.js";
 import FormField from "@rapidmx/react-shared/components/forms/FormField.js";
 import { LevelBars } from "./_CallControls.js";
+import EffectsPanel from "./_EffectsPanel.js";
+import { filtersActive } from "../shared/media/filters/filterTypes.js";
 import { MicIcon, MicOffIcon, VideoIcon, VideoOffIcon } from "./_icons.js";
 const INPUT_CLASS = "w-full text-base py-2.5 px-3.5 border border-border rounded-md bg-surface text-text focus:outline-none focus:border-primary";
 const ROUND_BUTTON = "flex items-center justify-center gap-1.5 h-12 min-w-12 px-3 rounded-full transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80";
@@ -50,6 +56,7 @@ function previewMessage(media) {
 }
 export default function MeetLobby({ meeting, media, initialName, onJoin }) {
     const [name, setName] = useState(initialName ?? "");
+    const [showEffects, setShowEffects] = useState(false);
     const videoRef = useRef(null);
     const { requestAccess } = media;
     // Asks once, when the lobby opens - see this module's doc comment for the button that asks again.
@@ -66,5 +73,5 @@ export default function MeetLobby({ meeting, media, initialName, onJoin }) {
     const cameraOk = media.status.video === "live" || media.status.video === "off";
     const needsAccess = media.supported && !media.requesting && (media.status.audio !== "live" || !cameraOk);
     const nothingToSend = !media.audioTrack && !media.videoTrack && !media.requesting;
-    return (_jsxs("div", { children: [_jsx("h1", { className: "text-2xl font-bold tracking-tight", children: meeting.title }), meeting.hostDisplayName && _jsxs("p", { className: "text-sm text-text-muted mt-1", children: ["Hosted by ", meeting.hostDisplayName] }), _jsxs("div", { className: "mt-6 grid sm:grid-cols-2 gap-6", children: [_jsxs("div", { children: [_jsxs("div", { className: "relative aspect-video bg-[#202124] rounded-lg overflow-hidden flex items-center justify-center", children: [media.videoStream ? (_jsx("video", { ref: videoRef, autoPlay: true, playsInline: true, muted: true, className: "w-full h-full object-cover [transform:scaleX(-1)]" })) : (_jsx("p", { className: "px-4 text-center text-white/70 text-sm", children: previewMessage(media) })), _jsxs("div", { className: "absolute bottom-3 inset-x-0 flex justify-center gap-3", children: [_jsxs("button", { type: "button", className: `${ROUND_BUTTON} ${media.micOn ? "bg-[#3c4043] text-white hover:bg-[#4b4f53]" : "bg-[#f9dedc] text-[#8c1d18] hover:bg-[#f2c4c0]"}`, "aria-label": media.micOn ? "Mute microphone" : "Unmute microphone", "aria-pressed": !media.micOn, onClick: () => void media.toggleMic(), children: [media.micOn && _jsx(LevelBars, { level: media.audioLevel }), media.micOn ? _jsx(MicIcon, {}) : _jsx(MicOffIcon, {})] }), _jsx("button", { type: "button", className: `${ROUND_BUTTON} ${media.cameraOn ? "bg-[#3c4043] text-white hover:bg-[#4b4f53]" : "bg-[#f9dedc] text-[#8c1d18] hover:bg-[#f2c4c0]"}`, "aria-label": media.cameraOn ? "Turn off camera" : "Turn on camera", "aria-pressed": !media.cameraOn, onClick: () => void media.toggleCamera(), children: media.cameraOn ? _jsx(VideoIcon, {}) : _jsx(VideoOffIcon, {}) })] })] }), !media.supported && (_jsx(Alert, { children: "This browser (or this page's connection) doesn't support camera/microphone access. Try a current browser over HTTPS - a link opened inside another app often needs to be opened in the browser itself." })), media.error && _jsx(Alert, { children: media.error.message }), needsAccess && (_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto mt-3", onClick: () => void requestAccess(), children: media.error ? "Try again" : "Allow camera and microphone" })), nothingToSend && _jsx("p", { className: "text-sm text-text-muted mt-3", children: "You'll join without a camera or microphone." }), media.devices.cameras.length > 1 && (_jsxs("label", { className: "block text-sm mt-3", children: ["Camera", _jsxs("select", { className: `${INPUT_CLASS} mt-1`, value: media.selectedDeviceIds.video ?? "", onChange: (e) => void media.selectDevice("video", e.target.value), children: [!media.selectedDeviceIds.video && _jsx("option", { value: "", children: "Choose a camera" }), media.devices.cameras.map((d, i) => (_jsx("option", { value: d.deviceId, children: d.label || `Camera ${i + 1}` }, d.deviceId)))] })] })), media.devices.microphones.length > 1 && (_jsxs("label", { className: "block text-sm mt-3", children: ["Microphone", _jsxs("select", { className: `${INPUT_CLASS} mt-1`, value: media.selectedDeviceIds.audio ?? "", onChange: (e) => void media.selectDevice("audio", e.target.value), children: [!media.selectedDeviceIds.audio && _jsx("option", { value: "", children: "Choose a microphone" }), media.devices.microphones.map((d, i) => (_jsx("option", { value: d.deviceId, children: d.label || `Microphone ${i + 1}` }, d.deviceId)))] })] }))] }), _jsxs("div", { className: "flex flex-col justify-center gap-3", children: [_jsx(FormField, { label: "Your name", htmlFor: "meet-name", children: _jsx("input", { id: "meet-name", type: "text", className: INPUT_CLASS, value: name, onChange: (e) => setName(e.target.value), placeholder: "Enter your name" }) }), _jsx(Button, { type: "button", className: "!w-auto", disabled: !name.trim(), onClick: () => onJoin(name.trim()), children: "Join meeting" })] })] })] }));
+    return (_jsxs("div", { children: [_jsx("h1", { className: "text-2xl font-bold tracking-tight", children: meeting.title }), meeting.hostDisplayName && _jsxs("p", { className: "text-sm text-text-muted mt-1", children: ["Hosted by ", meeting.hostDisplayName] }), _jsxs("div", { className: "mt-6 grid sm:grid-cols-2 gap-6", children: [_jsxs("div", { children: [_jsxs("div", { className: "relative aspect-video bg-[#202124] rounded-lg overflow-hidden flex items-center justify-center", children: [media.videoStream ? (_jsx("video", { ref: videoRef, autoPlay: true, playsInline: true, muted: true, className: "w-full h-full object-cover [transform:scaleX(-1)]" })) : (_jsx("p", { className: "px-4 text-center text-white/70 text-sm", children: previewMessage(media) })), _jsxs("div", { className: "absolute bottom-3 inset-x-0 flex justify-center gap-3", children: [_jsxs("button", { type: "button", className: `${ROUND_BUTTON} ${media.micOn ? "bg-[#3c4043] text-white hover:bg-[#4b4f53]" : "bg-[#f9dedc] text-[#8c1d18] hover:bg-[#f2c4c0]"}`, "aria-label": media.micOn ? "Mute microphone" : "Unmute microphone", "aria-pressed": !media.micOn, onClick: () => void media.toggleMic(), children: [media.micOn && _jsx(LevelBars, { level: media.audioLevel }), media.micOn ? _jsx(MicIcon, {}) : _jsx(MicOffIcon, {})] }), _jsx("button", { type: "button", className: `${ROUND_BUTTON} ${media.cameraOn ? "bg-[#3c4043] text-white hover:bg-[#4b4f53]" : "bg-[#f9dedc] text-[#8c1d18] hover:bg-[#f2c4c0]"}`, "aria-label": media.cameraOn ? "Turn off camera" : "Turn on camera", "aria-pressed": !media.cameraOn, onClick: () => void media.toggleCamera(), children: media.cameraOn ? _jsx(VideoIcon, {}) : _jsx(VideoOffIcon, {}) })] })] }), !media.supported && (_jsx(Alert, { children: "This browser (or this page's connection) doesn't support camera/microphone access. Try a current browser over HTTPS - a link opened inside another app often needs to be opened in the browser itself." })), media.error && _jsx(Alert, { children: media.error.message }), needsAccess && (_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto mt-3", onClick: () => void requestAccess(), children: media.error ? "Try again" : "Allow camera and microphone" })), nothingToSend && _jsx("p", { className: "text-sm text-text-muted mt-3", children: "You'll join without a camera or microphone." }), media.devices.cameras.length > 1 && (_jsxs("label", { className: "block text-sm mt-3", children: ["Camera", _jsxs("select", { className: `${INPUT_CLASS} mt-1`, value: media.selectedDeviceIds.video ?? "", onChange: (e) => void media.selectDevice("video", e.target.value), children: [!media.selectedDeviceIds.video && _jsx("option", { value: "", children: "Choose a camera" }), media.devices.cameras.map((d, i) => (_jsx("option", { value: d.deviceId, children: d.label || `Camera ${i + 1}` }, d.deviceId)))] })] })), _jsxs("div", { className: "mt-3", children: [_jsx("button", { type: "button", className: "text-sm text-primary underline focus:outline-none focus-visible:ring-2 focus-visible:ring-primary", "aria-expanded": showEffects, onClick: () => setShowEffects((shown) => !shown), children: filtersActive(media.filters) ? "Effects (on)" : "Effects" }), showEffects && (_jsx("div", { className: "mt-2", children: _jsx(EffectsPanel, { media: media, tone: "light" }) }))] }), media.devices.microphones.length > 1 && (_jsxs("label", { className: "block text-sm mt-3", children: ["Microphone", _jsxs("select", { className: `${INPUT_CLASS} mt-1`, value: media.selectedDeviceIds.audio ?? "", onChange: (e) => void media.selectDevice("audio", e.target.value), children: [!media.selectedDeviceIds.audio && _jsx("option", { value: "", children: "Choose a microphone" }), media.devices.microphones.map((d, i) => (_jsx("option", { value: d.deviceId, children: d.label || `Microphone ${i + 1}` }, d.deviceId)))] })] }))] }), _jsxs("div", { className: "flex flex-col justify-center gap-3", children: [_jsx(FormField, { label: "Your name", htmlFor: "meet-name", children: _jsx("input", { id: "meet-name", type: "text", className: INPUT_CLASS, value: name, onChange: (e) => setName(e.target.value), placeholder: "Enter your name" }) }), _jsx(Button, { type: "button", className: "!w-auto", disabled: !name.trim(), onClick: () => onJoin(name.trim()), children: "Join meeting" })] })] })] }));
 }

package/dist/apps/meet/_ParticipantTile.d.ts

@@ -6,6 +6,7 @@
  * own `<audio>` elements (`_CallView.tsx`'s `RemoteAudio`), so a tile that isn't showing video - or isn't on screen
  * in the current layout - can never silence anyone. */
 import React from "react";
+import type { MediaTransport } from "../shared/webrtc/types.js";
 export interface ParticipantTileProps {
     name: string;
     stream?: MediaStream | null;
@@ -14,6 +15,11 @@ export interface ParticipantTileProps {
     cameraOff?: boolean;
     micMuted?: boolean;
     handRaised?: boolean;
+    /** How this participant's media reaches you - a badge is shown for everything but a direct or still-connecting one. */
+    transport?: MediaTransport;
+    /** Says the connection is still being made, e.g. "Connecting..." on the local tile and "Awaiting connection..." on a
+     * participant's - shown with a spinner until the caller clears it. */
+    status?: string;
     /** Highlights this tile as the current presenter/focus. */
     isFocused?: boolean;
     /** Fits the whole picture inside the tile instead of filling it - a shared screen must not be cropped. */
@@ -21,4 +27,4 @@ export interface ParticipantTileProps {
     onClick?: () => void;
     className?: string;
 }
-export default function ParticipantTile({ name, stream, isLocal, cameraOff, micMuted, handRaised, isFocused, contain, onClick, className, }: ParticipantTileProps): React.JSX.Element;
+export default function ParticipantTile({ name, stream, isLocal, cameraOff, micMuted, handRaised, transport, status, isFocused, contain, onClick, className, }: ParticipantTileProps): React.JSX.Element;

package/dist/apps/meet/_ParticipantTile.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 ///////////////////////////////////////////////////////////////////////////////
 // Copyright (C) 2026 Jean-Philippe Steinmetz. All rights reserved.
 // SPDX-License-Identifier: MPL-2.0
@@ -12,10 +12,27 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * in the current layout - can never silence anyone. */
 import { useEffect, useRef } from "react";
 import { MicOffIcon } from "./_icons.js";
+/** What a tile says about how its participant's media is arriving, for the paths that are not the ordinary direct one
+ * (which needs no comment). Text rather than only an icon, so the reason a picture is degraded is never a guess. */
+const TRANSPORT_BADGES = {
+    turn: { label: "Relayed", title: "Connected through the relay server, because a direct connection was not possible." },
+    websocket: {
+        label: "Server relay",
+        title: "Sent through the server as a last resort, because no other connection was possible. Video is lower quality and sound may lag.",
+    },
+    failed: { label: "Can't connect", title: "This participant could not be reached from your network." },
+};
+/** A short line saying the connection is still being made, with a spinner - a polite live region (not `role="status"`,
+ * which the call view's own announcement region already is), so a participant who cannot see the tile still learns
+ * why nothing is happening yet. */
+function StatusPill({ status, className }) {
+    return (_jsxs("span", { "aria-live": "polite", "data-testid": "tile-status", className: `flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-black/60 text-white text-xs ${className ?? ""}`, children: [_jsx("span", { className: "inline-block w-3 h-3 rounded-full border-2 border-white/30 border-t-white animate-spin", "aria-hidden": "true" }), status] }));
+}
 function initialOf(name) {
     return (Array.from(name.trim())[0] ?? "?").toUpperCase();
 }
-export default function ParticipantTile({ name, stream, isLocal, cameraOff, micMuted, handRaised, isFocused, contain, onClick, className, }) {
+export default function ParticipantTile({ name, stream, isLocal, cameraOff, micMuted, handRaised, transport, status, isFocused, contain, onClick, className, }) {
+    const badge = transport ? TRANSPORT_BADGES[transport] : undefined;
     const videoRef = useRef(null);
     const showVideo = !!stream && !cameraOff;
     // The `<video>` element only exists while `showVideo`, so its stream is bound whenever it (re)appears too.
@@ -24,5 +41,5 @@ export default function ParticipantTile({ name, stream, isLocal, cameraOff, micM
             videoRef.current.srcObject = stream ?? null;
         }
     }, [stream, showVideo]);
-    return (_jsxs("div", { className: `relative overflow-hidden rounded-xl bg-[#3c4043] flex items-center justify-center min-h-[90px] ${isFocused ? "ring-2 ring-[#8ab4f8]" : ""} ${className ?? ""}`, onClick: onClick, role: onClick ? "button" : undefined, tabIndex: onClick ? 0 : undefined, "aria-label": onClick ? `${name}${isLocal ? " (you)" : ""}` : undefined, children: [showVideo ? (_jsx("video", { ref: videoRef, autoPlay: true, playsInline: true, muted: true, className: `w-full h-full ${contain ? "object-contain bg-black" : "object-cover"} ${isLocal && !contain ? "[transform:scaleX(-1)]" : ""}` })) : (_jsx("div", { className: "w-16 h-16 rounded-full bg-primary text-white flex items-center justify-center text-2xl font-bold", "aria-hidden": "true", children: initialOf(name) })), handRaised && (_jsx("span", { className: "absolute top-2 left-2 flex items-center justify-center w-8 h-8 rounded-full bg-[#a8c7fa] text-base", role: "img", "aria-label": "Hand raised", children: "\u270B" })), micMuted && (_jsx("span", { className: "absolute top-2 right-2 flex items-center justify-center w-7 h-7 rounded-full bg-black/60 text-white", role: "img", "aria-label": "Muted", children: _jsx("span", { className: "w-4 h-4 [&>svg]:w-4 [&>svg]:h-4", children: _jsx(MicOffIcon, {}) }) })), _jsxs("div", { className: "absolute bottom-2 left-2 max-w-[calc(100%-1rem)] truncate px-2 py-0.5 rounded bg-black/60 text-white text-sm", children: [name, isLocal ? " (you)" : ""] })] }));
+    return (_jsxs("div", { className: `relative overflow-hidden rounded-xl bg-[#3c4043] flex items-center justify-center min-h-[90px] ${isFocused ? "ring-2 ring-[#8ab4f8]" : ""} ${className ?? ""}`, onClick: onClick, role: onClick ? "button" : undefined, tabIndex: onClick ? 0 : undefined, "aria-label": onClick ? `${name}${isLocal ? " (you)" : ""}` : undefined, children: [showVideo ? (_jsxs(_Fragment, { children: [_jsx("video", { ref: videoRef, autoPlay: true, playsInline: true, muted: true, className: `w-full h-full ${contain ? "object-contain bg-black" : "object-cover"} ${isLocal && !contain ? "[transform:scaleX(-1)]" : ""}` }), status && _jsx(StatusPill, { status: status, className: "absolute top-2 left-1/2 -translate-x-1/2 whitespace-nowrap" })] })) : (_jsxs("div", { className: "flex flex-col items-center gap-2 max-w-full px-1", children: [_jsx("div", { className: "w-16 h-16 rounded-full bg-primary text-white flex items-center justify-center text-2xl font-bold", "aria-hidden": "true", children: initialOf(name) }), status && _jsx(StatusPill, { status: status })] })), handRaised && (_jsx("span", { className: "absolute top-2 left-2 flex items-center justify-center w-8 h-8 rounded-full bg-[#a8c7fa] text-base", role: "img", "aria-label": "Hand raised", children: "\u270B" })), micMuted && (_jsx("span", { className: "absolute top-2 right-2 flex items-center justify-center w-7 h-7 rounded-full bg-black/60 text-white", role: "img", "aria-label": "Muted", children: _jsx("span", { className: "w-4 h-4 [&>svg]:w-4 [&>svg]:h-4", children: _jsx(MicOffIcon, {}) }) })), badge && (_jsx("span", { className: `absolute bottom-2 right-2 px-2 py-0.5 rounded text-xs ${transport === "failed" ? "bg-[#601410] text-[#f9dedc]" : "bg-black/60 text-white"}`, title: badge.title, "data-testid": "transport-badge", children: badge.label })), _jsxs("div", { className: "absolute bottom-2 left-2 max-w-[calc(100%-1rem)] truncate px-2 py-0.5 rounded bg-black/60 text-white text-sm", children: [name, isLocal ? " (you)" : ""] })] }));
 }

package/dist/apps/meet/_icons.d.ts

@@ -13,3 +13,4 @@ export declare const LeaveIcon: () => React.JSX.Element;
 export declare const ChevronUpIcon: () => React.JSX.Element;
 /** A raised hand, as an emoji glyph - Material's own "back hand" path isn't among the ones bundled here. */
 export declare const HandIcon: () => React.JSX.Element;
+export declare const EffectsIcon: () => React.JSX.Element;

package/dist/apps/meet/_icons.js

@@ -14,3 +14,4 @@ export const LeaveIcon = () => (_jsx(Icon, { path: "M12 9c-1.6 0-3.15.25-4.6.72v
 export const ChevronUpIcon = () => _jsx(Icon, { path: "M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z", className: "w-5 h-5" });
 /** A raised hand, as an emoji glyph - Material's own "back hand" path isn't among the ones bundled here. */
 export const HandIcon = () => (_jsx("span", { className: "text-xl leading-none", "aria-hidden": "true", children: "\u270B" }));
+export const EffectsIcon = () => (_jsx(Icon, { path: "M19 9l1.25-2.75L23 5l-2.75-1.25L19 1l-1.25 2.75L15 5l2.75 1.25L19 9zm-7.5.5L9 4 6.5 9.5 1 12l5.5 2.5L9 20l2.5-5.5L17 12l-5.5-2.5zM19 15l-1.25 2.75L15 19l2.75 1.25L19 23l1.25-2.75L23 19l-2.75-1.25L19 15z" }));

package/dist/apps/meet/_meetApi.d.ts

@@ -35,6 +35,12 @@ export interface VideoMeetingJoinResult {
     token?: string;
     /** ISO 8601 instant `token` expires at. Present only when `authenticated` is `false`. */
     expiresAt?: string;
+    /** Whether the server offers the WebSocket media relay - the last-resort path for a participant neither a direct
+     * connection nor the TURN server can reach. Absent from a server that predates it, which reads as off. */
+    relayEnabled?: boolean;
+    /** The base URL the video filters' machine-learning runtime and models are hosted under, when the administrator
+     * hosts them (`mail:videoconf:effects:assets_url`). Absent means the public CDN defaults. */
+    effectsAssetsUrl?: string;
 }
 /** Resolves a join token (an invitee's own link) or a public meeting's slug to its meeting info, ICE servers, and
  * either a short-lived guest signaling token (the common anonymous case) or confirmation that the caller's own

package/dist/apps/shared/media/filters/VideoFilterProcessor.d.ts

@@ -0,0 +1,75 @@
+import { type VideoFilters } from "./filterTypes.js";
+import { type FaceTracker, type PersonSegmenter } from "./mlModels.js";
+/** A picture to show behind the participant. */
+export interface BackgroundPicture {
+    source: CanvasImageSource;
+    width: number;
+    height: number;
+}
+export interface FilterStatus {
+    /** A model the current filters need is still downloading. */
+    loading: boolean;
+    /** Why a filter isn't fully working, ready to show - `null` when all is well. */
+    error: string | null;
+}
+export interface ProcessorDeps {
+    createCanvas(): HTMLCanvasElement;
+    createVideo(): HTMLVideoElement;
+    createSegmenter(assetsUrl?: string): Promise<PersonSegmenter>;
+    createFaceTracker(assetsUrl?: string): Promise<FaceTracker>;
+    now(): number;
+}
+export interface VideoFilterProcessorOptions {
+    /** The camera's track. The processor only reads it - stopping it stays with whoever owns it. */
+    source: MediaStreamTrack;
+    filters: VideoFilters;
+    backgroundImage?: BackgroundPicture | null;
+    /** Where the models are hosted, when not on the default CDN - see `mlModels.ts`. */
+    assetsUrl?: string;
+    onStatus?: (status: FilterStatus) => void;
+    frameRate?: number;
+    deps?: Partial<ProcessorDeps>;
+}
+export declare class VideoFilterProcessor {
+    /** The filtered video - what to send in place of the camera's track. */
+    readonly track: MediaStreamTrack;
+    private readonly deps;
+    private readonly assetsUrl?;
+    private readonly onStatus?;
+    private readonly interval;
+    private readonly video;
+    private readonly canvas;
+    private readonly ctx;
+    private readonly layers;
+    private filters;
+    private backgroundImage;
+    private stopped;
+    private timer;
+    private segmenter;
+    private segmenterState;
+    private faceTracker;
+    private faceState;
+    private lastFace;
+    private framesWithoutFace;
+    private maskImage;
+    private renderFailed;
+    private status;
+    constructor(options: VideoFilterProcessorOptions);
+    /** Changes the filters (and the background picture) without interrupting the video. Also retries a model that failed
+     * to load, so choosing a filter again is a retry. */
+    update(filters: VideoFilters, backgroundImage: BackgroundPicture | null): void;
+    stop(): void;
+    private syncModels;
+    private publishStatus;
+    private tick;
+    /** A scratch canvas of the given size, kept between frames. */
+    private layer;
+    private render;
+    /** The background, then - once the segmentation model is ready - the participant on top of it. */
+    private drawBackground;
+    private segment;
+    private applyEffect;
+    private paintAccessory;
+    /** The face's landmarks for this frame - the last known ones for a few frames after it is lost. */
+    private trackFace;
+}