# deniza-png/snap architecture

> Architecture diagram of the GitHub repository deniza-png/snap, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-28). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/deniza-png/snap
- Repository: https://github.com/deniza-png/snap

## Overview

Snap is a local Chrome extension that replaces the Meet camera video track with a canvas-rendered feed. The main workflow is camera capture → empty-room reference capture → live/person-mask comparison → particle vanish/return → replacement video track in the call. Controls can trigger transitions manually or through microphone snap detection; hotkeys and sensitivity settings are additional capabilities. The excerpts show these connections; manifest details and other unsampled implementation are not inferred.

Main entry points: [`inject.js`](https://github.com/deniza-png/snap/blob/main/inject.js) (Camera and controls), [`effect.js`](https://github.com/deniza-png/snap/blob/main/effect.js) (Video pipeline), [`snapdetect.js`](https://github.com/deniza-png/snap/blob/main/snapdetect.js) (Snap detector)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_controls["Controls"]
  node_controls_ui["Control pill<br/>[inject.js]"]
  node_hotkeys["Keyboard shortcuts<br/>[inject.js]"]
  node_settings["Sensitivity setting<br/>[snapdetect.js]"]
end

subgraph group_video["Video effects"]
  node_pipeline["Video pipeline<br/>[effect.js]"]
  node_reference["Empty-room reference<br/>[effect.js]"]
  node_mask["Person mask<br/>[effect.js]"]
  node_particles["Particle transition<br/>[effect.js]"]
  node_canvas["Rendered canvas<br/>[effect.js]"]
end

subgraph group_audio["Snap detection"]
  node_detector["Snap detector<br/>[snapdetect.js]"]
  node_microphone["Microphone stream"]
end

subgraph group_meet["Meet integration"]
  node_orchestrator["Camera and controls<br/>[inject.js]"]
  node_camera["Camera stream"]
  node_replacement["Replacement video track<br/>[inject.js]"]
  node_call_audio["Call audio track<br/>[inject.js]"]
end

node_user(("Meet user"))
node_meet["Google Meet"]
node_meet_call["Meet call"]

node_user -->|"joins call"| node_meet
node_meet -->|"requests camera"| node_orchestrator
node_orchestrator -->|"acquires"| node_camera
node_camera -->|"provides frames"| node_pipeline
node_orchestrator -->|"creates"| node_pipeline
node_controls_ui -->|"captures room"| node_orchestrator
node_orchestrator -->|"captures reference"| node_pipeline
node_pipeline -->|"averages frames"| node_reference
node_pipeline -->|"compares frames"| node_mask
node_reference -->|"background reference"| node_mask
node_mask -->|"drives dissolve"| node_particles
node_pipeline -->|"renders effect"| node_canvas
node_particles -->|"draws particles"| node_canvas
node_canvas -->|"captures stream"| node_replacement
node_orchestrator -->|"returns track"| node_replacement
node_replacement -->|"replaces camera video"| node_meet_call
node_call_audio -->|"preserves audio"| node_meet_call
node_controls_ui -->|"toggles effect"| node_orchestrator
node_hotkeys -->|"toggles effect"| node_orchestrator
node_orchestrator -->|"starts detector"| node_detector
node_detector -->|"requests audio"| node_microphone
node_detector -->|"signals snap"| node_orchestrator
node_settings -->|"sets sensitivity"| node_detector
node_user -->|"uses controls"| node_controls_ui
node_user -->|"uses shortcuts"| node_hotkeys

click node_controls_ui "https://github.com/deniza-png/snap/blob/main/inject.js"
click node_hotkeys "https://github.com/deniza-png/snap/blob/main/inject.js"
click node_settings "https://github.com/deniza-png/snap/blob/main/snapdetect.js"
click node_orchestrator "https://github.com/deniza-png/snap/blob/main/inject.js"
click node_replacement "https://github.com/deniza-png/snap/blob/main/inject.js"
click node_call_audio "https://github.com/deniza-png/snap/blob/main/inject.js"
click node_pipeline "https://github.com/deniza-png/snap/blob/main/effect.js"
click node_reference "https://github.com/deniza-png/snap/blob/main/effect.js"
click node_mask "https://github.com/deniza-png/snap/blob/main/effect.js"
click node_particles "https://github.com/deniza-png/snap/blob/main/effect.js"
click node_canvas "https://github.com/deniza-png/snap/blob/main/effect.js"
click node_detector "https://github.com/deniza-png/snap/blob/main/snapdetect.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_controls_ui,node_hotkeys,node_settings,node_user toneBlue
class node_pipeline,node_reference,node_mask,node_particles,node_canvas toneAmber
class node_detector,node_microphone toneMint
class node_orchestrator,node_camera,node_replacement,node_call_audio toneRose
class node_meet,node_meet_call toneIndigo
```

## Components

### Controls

- [Control pill](https://github.com/deniza-png/snap/blob/main/inject.js): `inject.js`
- [Keyboard shortcuts](https://github.com/deniza-png/snap/blob/main/inject.js): `inject.js`
- [Sensitivity setting](https://github.com/deniza-png/snap/blob/main/snapdetect.js): `snapdetect.js`

### Video effects

- [Video pipeline](https://github.com/deniza-png/snap/blob/main/effect.js): `effect.js`
- [Empty-room reference](https://github.com/deniza-png/snap/blob/main/effect.js): `effect.js`
- [Person mask](https://github.com/deniza-png/snap/blob/main/effect.js): `effect.js`
- [Particle transition](https://github.com/deniza-png/snap/blob/main/effect.js): `effect.js`
- [Rendered canvas](https://github.com/deniza-png/snap/blob/main/effect.js): `effect.js`

### Snap detection

- [Snap detector](https://github.com/deniza-png/snap/blob/main/snapdetect.js): `snapdetect.js`
- **Microphone stream**

### Meet integration

- [Camera and controls](https://github.com/deniza-png/snap/blob/main/inject.js): `inject.js`
- **Camera stream**
- [Replacement video track](https://github.com/deniza-png/snap/blob/main/inject.js): `inject.js`
- [Call audio track](https://github.com/deniza-png/snap/blob/main/inject.js): `inject.js`

### Other components

- **Meet user**
- **Google Meet**
- **Meet call**

## Connections

- Meet user → Google Meet: joins call
- Google Meet → Camera and controls: requests camera
- Camera and controls → Camera stream: acquires
- Camera stream → Video pipeline: provides frames
- Camera and controls → Video pipeline: creates
- Control pill → Camera and controls: captures room
- Camera and controls → Video pipeline: captures reference
- Video pipeline → Empty-room reference: averages frames
- Video pipeline → Person mask: compares frames
- Empty-room reference → Person mask: background reference
- Person mask → Particle transition: drives dissolve
- Video pipeline → Rendered canvas: renders effect
- Particle transition → Rendered canvas: draws particles
- Rendered canvas → Replacement video track: captures stream
- Camera and controls → Replacement video track: returns track
- Replacement video track → Meet call: replaces camera video
- Call audio track → Meet call: preserves audio
- Control pill → Camera and controls: toggles effect
- Keyboard shortcuts → Camera and controls: toggles effect
- Camera and controls → Snap detector: starts detector
- Snap detector → Microphone stream: requests audio
- Snap detector → Camera and controls: signals snap
- Sensitivity setting → Snap detector: sets sensitivity
- Meet user → Control pill: uses controls
- Meet user → Keyboard shortcuts: uses shortcuts