Camera / Microphone
The Camera/Microphone feature simulates media capture capabilities, allowing you to test video and audio functionality without physical devices. This is particularly useful for testing WebRTC applications, video conferencing tools, and camera permission flows.
Overview
This feature provides three modes for media simulation:
- Off: Disables camera/microphone access entirely (simulates "no device found")
- Virtual: Generates high-fidelity mock media streams using canvas-based rendering
- Real: Bridges to actual hardware after platform validation (Pro tier only)
Target Users
- Frontend developers building video/audio applications
- QA engineers testing WebRTC implementations
- Mobile-first developers testing responsive camera UIs
- Security researchers testing permission flows
Use Cases
- Test camera permission dialogs on mobile devices
- Verify video capture UI at different resolutions
- Debug microphone access issues without physical devices
- Test video conferencing application flows
- Validate media constraint handling
How It Works
Technical Implementation
The feature intercepts browser media APIs in the MAIN world:
navigator.mediaDevices.getUserMedia(constraints)
navigator.mediaDevices.enumerateDevices()
Virtual Mode (Mock Streams)
In Virtual mode, the engine generates synthetic media streams:
Video Track: Canvas-based rendering with three patterns:
- Emuluxe Classic: Animated grid with branding and live indicator
- Color Bars: SMPTE color bars with timecode
- Static Noise: White noise with timestamp overlay
The mock stream respects requested constraints (width, height, framerate) and includes a custom applyConstraints override to always succeed, bypassing strict constraint checks.
Audio Track: Web Audio API oscillator generating a 440Hz sine wave at minimal volume (simulates microphone input).
Real Mode (Hardware Access)
In Real mode, the engine:
- Validates permissions via Platform API (
/api/media/stream) - Receives approved constraints from the platform
- Calls the original
getUserMediawith approved constraints - Manages stream lifecycle (start/stop via platform)
Virtual Device Enumeration
The engine injects virtual devices into enumerateDevices() results:
Emuluxe Virtual Camera(videoinput)Emuluxe Virtual Microphone(audioinput)
These appear first in the device list to ensure sites select them by default.
Architecture-Specific Implementation
Web Platform (Primary)
Location: src/engines/media-stream-engine.js
The Web Platform serves as the canonical implementation with:
- Dynamic script injection into simulated pages
- Platform API integration for authentication and validation
- Session-based configuration management
- Real-time mode switching via postMessage
Key Differences:
- Uses Platform API base URL derived from script source or window origin
- Communicates with platform via
fetchfor validation - Supports iframe-based stream injection
Chrome Extension
Location: engine/media-stream-engine.js
The extension implementation mirrors the platform with:
- MAIN world injection via content scripts
- Background script relay for CORS-bypassed API calls
- chrome.storage for configuration persistence
Key Differences:
- Uses chrome.runtime messaging for communication
- Background script handles platform API calls to avoid CORS
- Integrates with extension's device simulation panel
VS Code Extension
Location: src/extension.ts (UI controls only)
The VS Code extension provides:
- UI controls for mode selection (Off/Virtual/Real)
- Pattern selection for virtual camera (Classic/Color Bars/Noise)
- Media type selection (Camera/Microphone/Both)
- Delegates actual simulation to the platform
Integration: Sends commands to the platform via vscode.postMessage, which then injects the engine into the webview.
Testing Guide
Enabling the Feature
Web Platform:
- Open Device Settings panel
- Navigate to "Camera / Microphone" section
- Select mode: Off, Virtual, or Real
- For Virtual mode, choose media type and pattern
- For Real mode, ensure Pro tier and valid authentication
Chrome Extension:
- Click Emuluxe toolbar icon
- Expand "Camera / Microphone" control
- Use segmented control to select mode
- Configure virtual pattern if needed
VS Code Extension:
- Open Emuluxe panel (Cmd+Alt+E)
- Navigate to Device Features
- Toggle Camera/Microphone controls
- Select options from dropdown menus
Testing Virtual Camera Patterns
Emuluxe Classic:
- Default pattern with animated grid
- Shows "EMULUXE VIRTUAL CAMERA" branding
- Displays resolution and frame counter
- Red "LIVE" indicator blinks
Color Bars:
- SMPTE standard color bars
- Timecode overlay (TCR format)
- Professional broadcast look
Static Noise:
- Random white noise pattern
- ISO timestamp overlay
- Simulates signal loss
Testing Microphone Simulation
The virtual microphone generates:
- 440Hz sine wave (musical note A4)
- Minimal volume (-80dB) to avoid audio feedback
- Continuous stream for testing audio visualization
Testing Real Hardware Access (Pro Tier)
Prerequisites:
- Pro or higher subscription
- Valid authentication token
- Physical camera/microphone connected to host
Steps:
- Enable "Real" mode
- Grant browser permission when prompted
- Platform validates session and device
- Stream starts with approved constraints
- Stop stream via platform to release hardware
Common Issues and Troubleshooting
Issue: "Requested device not found" error
- Cause: Camera mode set to "Off"
- Fix: Switch to "Virtual" or "Real" mode
Issue: Mock stream shows black screen
- Cause: Canvas rendering failed or constraints too high
- Fix: Try lower resolution (640x480) or check console for errors
Issue: Real mode fails with "Plan limit reached"
- Cause: Free tier attempting real hardware access
- Fix: Upgrade to Pro tier or use Virtual mode
Issue: enumerateDevices doesn't show virtual devices
- Cause: Engine not injected or permission denied
- Fix: Reload page, check browser console for injection errors
Issue: Audio not playing from virtual microphone
- Cause: Browser autoplay policy or muted context
- Fix: Ensure page has user interaction before requesting audio
Recommended Testing Sites
WebRTC Testing
WebRTC Samples - https://webrtc.github.io/samples/
- Go to "src/content/devices/input-output" section
- Test camera and microphone selection
- Verify virtual devices appear in device list
- Test constraint handling (resolution, framerate)
TestRTC - https://testrtc.com/
- Comprehensive WebRTC testing suite
- Tests camera, microphone, and speaker
- Validates media stream quality
- Check that virtual camera passes basic tests
Video Conferencing
Jitsi Meet - https://meet.jit.si/
- Create a test room
- Enable camera and microphone
- Verify virtual camera displays correctly
- Test audio levels with virtual microphone
Zoom Web Client (Test Mode) - https://zoom.us/test
- Join test meeting
- Select virtual camera from device list
- Verify video preview
- Test microphone audio levels
Camera Permission Testing
Permission.site - https://permission.site/
- Test camera permission request flow
- Verify permission prompt appearance
- Test permission denial handling
- Check that virtual camera works after grant
Benefits for Users
Test Without Physical Devices
- No need for multiple phones/tablets
- Test camera flows on any device type
- Simulate devices you don't own
Test Camera Permission Flows
- Verify permission dialogs appear correctly
- Test denial handling and error states
- Validate UI states before/after permission grant
Test Video/Audio Capture in Different Resolutions
- Test constraint negotiation
- Verify UI adapts to different resolutions
- Debug resolution-related layout issues
Debug Camera-Related UI Issues
- Inspect mock stream in DevTools
- Test video element rendering
- Validate canvas-based video display
- Check audio visualization with mock audio
Cross-Platform Consistency
- Same behavior across Web Platform, Extension, and VS Code
- Reproducible mock streams for consistent testing
- No reliance on specific hardware