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:

1. Validates permissions via Platform API (/api/media/stream)
2. Receives approved constraints from the platform
3. Calls the original getUserMedia with approved constraints
4. 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 fetch for 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:

1. Open Device Settings panel
2. Navigate to "Camera / Microphone" section
3. Select mode: Off, Virtual, or Real
4. For Virtual mode, choose media type and pattern
5. For Real mode, ensure Pro tier and valid authentication

Chrome Extension:

1. Click Emuluxe toolbar icon
2. Expand "Camera / Microphone" control
3. Use segmented control to select mode
4. Configure virtual pattern if needed

VS Code Extension:

1. Open Emuluxe panel (Cmd+Alt+E)
2. Navigate to Device Features
3. Toggle Camera/Microphone controls
4. 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:

1. Enable "Real" mode
2. Grant browser permission when prompted
3. Platform validates session and device
4. Stream starts with approved constraints
5. 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