Skip to content

Add wave for the recording mic + unify web cameras#1329

Merged
shomix merged 4 commits into
mainfrom
shomix-p-camera-wave
Jun 22, 2026
Merged

Add wave for the recording mic + unify web cameras#1329
shomix merged 4 commits into
mainfrom
shomix-p-camera-wave

Conversation

@shomix

@shomix shomix commented Jun 19, 2026

Copy link
Copy Markdown
Contributor

1. Removed the "local camera" path in the bubble

The camera bubble previously had two ways to show your face: the normal WebRTC relay from the popover, and a special "local camera" mode that kicked in during native full-screen recording. In local mode, the bubble owned the camera directly and had to relay device lists back to the popover, because WebKit blocks a second page from accessing the camera without muting the first one.

That entire local camera path is gone. The bubble now always receives video through WebRTC or the canvas relay, regardless of recording mode. This removes a large amount of coordination code — no more device list relay events, no more fallback camera/mic state in the popover, no more separate startup and teardown flow for the full-screen case. The recorder also no longer needs to choose between two different "hide chrome" commands based on who owns the camera.

2. Mic wave is now driven by real audio

The mic wave indicator was previously a CSS animation — four bars that pulsed on a loop with no connection to what the microphone was actually picking up.

It has been replaced with a real-time SVG wave line. A new useMicMeter hook opens an audio analyser on the selected mic, samples it 20 times per second, and draws an oscillating wave that reacts to actual sound — it moves when you speak and flattens when silent. The meter only runs while the popover is open and you are not recording.

The visual design also changed: from bars positioned at the bottom of the row to an inline wave line between the device name and the dropdown arrow, with a soft fade at both ends.
image

@netlify

This comment has been minimized.

@netlify

This comment has been minimized.

@netlify

This comment has been minimized.

@netlify

This comment has been minimized.

@netlify

This comment has been minimized.

@netlify

This comment has been minimized.

@netlify

This comment has been minimized.

@netlify

This comment has been minimized.

@netlify

This comment has been minimized.

@netlify

This comment has been minimized.

@netlify

This comment has been minimized.

@netlify

This comment has been minimized.

@netlify

This comment has been minimized.

@netlify

This comment has been minimized.

@netlify

This comment has been minimized.

@netlify

This comment has been minimized.

@github-actions

github-actions Bot commented Jun 19, 2026

Copy link
Copy Markdown
Contributor

Visual recap — generation failed

The visual recap could not be generated for this pull request. This is informational only and does not block the PR.

Diagnostic:

No plan URL: recap-url.txt was not created.

@shomix shomix changed the title Shomix p camera wave Add wave for the recording mic + unify web cameras Jun 19, 2026

@builder-io-integration builder-io-integration Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Builder reviewed your changes and found 3 potential issues 🔴

Review Details

This PR removes the bubble’s dedicated local-camera path and consolidates preview rendering onto the popover-owned WebRTC/canvas relay, while also replacing the fake mic bars with a live analyser-driven waveform. The simplification makes stream ownership easier to follow overall, and the updated comments/cleanup logic keep the popover as the long-lived owner of preview media, which is the right architectural direction for WebKit/Tauri.

Risk assessment: Standard (medium). The main risk here is cross-webview media-capture behavior on macOS, where small lifecycle changes can blank preview or reopen devices unexpectedly.

Key findings:

  • 🔴 The new mic meter is allowed to call getUserMedia while the camera bubble is live, reintroducing the WebKit capture-exclusion bug this PR is otherwise trying to avoid.
  • 🟡 The meter falls back to audio: true for the pseudo/default mic path, so opening the popover can activate the OS default microphone just to animate the waveform.
  • 🟡 The meter only disables after recorder installation, leaving a startup window where its mic stream overlaps the recorder’s own mic acquisition.

🧪 Browser testing: Will run after this review (PR touches UI code)

Comment thread templates/clips/desktop/src/app.tsx
Comment thread templates/clips/desktop/src/hooks/useMicMeter.ts
Comment thread templates/clips/desktop/src/app.tsx
@shomix shomix merged commit db46c90 into main Jun 22, 2026
110 checks passed
@shomix shomix deleted the shomix-p-camera-wave branch June 22, 2026 07:41
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.

2 participants