VideoWhisper Webcam-Microphone-Screen-Recorder is a self-hosted, browser-based recorder for webcam video, microphone audio, screen capture, photos, and screenshots. It runs in modern browsers and lets people preview, review, and explicitly accept media before it is uploaded.
Try the official demo · Contact VideoWhisper
- Capture webcam video, microphone audio, screen video, photos, and screenshots.
- Select another available camera or microphone before capture.
- Review a result, retry it, or accept it for upload.
- Return browser-reported media details such as duration, dimensions, codecs, and frame rate where available.
- Use the recorder from React, a vanilla JavaScript page, an iframe, or the included PHP demo.
- Keep uploads on your own server through the multipart upload adapter.
The recorder requests practical browser capture settings. The browser, selected device, operating system, and permission choice ultimately determine the delivered media settings.
- Webcam video requests a maximum 640px long edge at up to 30 fps (normally 640 ×ばつ 360 landscape or 360 ×ばつ 640 portrait) and records for up to five minutes.
- Screen recording requests 1280 ×ばつ 720 and records for up to one minute.
- Webcam photos and screenshots preserve aspect ratio within a 1280px long edge.
- The recording durations help avoid large uploads and server or network timeouts in typical self-hosted installations.
The application is provided as is with its current implemented capabilities. A commercial VideoWhisper Pro release will expand on the available capabilities and configuration options.
Download the ready-to-deploy package from the latest GitHub release:
Download the PHP demo ZIP · View all releases
- Extract its top-level folder into an HTTPS-enabled web directory, for example
<document-root>/webcam-microphone-screen-recorder/. - Use PHP 8.2+ with Apache, or configure your web server to route
api/*toapi/index.phpand the browser app routes toindex.html. - Make
api/app/storage/writable by PHP. - Before public use, copy
api/app/config/credentials.example.phptoapi/app/config/credentials.phpand choose a unique administrator username, password, and HMAC secret. - Open the deployed folder in a browser and allow the required capture permission.
The package detects its deployed base path automatically; its default upload endpoint is the neighbouring api/ directory. The ZIP includes a DEPLOYMENT.md with server-routing details.
Requirements: Node.js 20+ and npm. PHP 8.2+ is additionally required for the included upload/admin demo.
npm install npm run build npm run dev
Open the URL printed by Vite, allow browser media permissions, and choose a capture mode. For the browser app together with the PHP upload demo, run:
npm run dev:local
The local demo uses http://127.0.0.1:5177/; its PHP backend is served on port 8080. See the PHP demo guide for deployment, media storage, and admin-security guidance.
npm run package:demo
The command creates the same self-hosted demo ZIP used for the GitHub release. For most installations, download the release ZIP above instead of rebuilding it.
The recorder is bundled by VideoWhisper's WordPress recorder plugins:
The plugins can save accepted media to the WordPress Media Library and expose recorder media information on the resulting attachment. Their integration options control which capture types are available in each workflow.
For shortcode examples, supported events, and instructions for updating the bundled app in those plugins, read WordPress integration.
npm run typecheck
npm run test
npm run buildRun npm run test:e2e when Playwright browsers are installed and the change affects browser capture behavior.
Media capture requires a secure context (HTTPS, except localhost). Before putting the PHP demo on a public site, set unique administrator credentials and a unique HMAC secret in its protected configuration. Review SECURITY.md before deployment.
This project is licensed under GPL-2.0-or-later. See LICENSES.md for third-party and design-asset notices.