How to Record Your Screen With Webcam and Microphone (Browser-Only)
Record your screen, window, or tab with a webcam overlay and microphone, pause and resume, then download the video. No install, nothing uploaded.
To record your screen with your webcam and microphone, you do not need installed software. Two browser APIs do the work. The Screen Capture API is the interface that returns a live video track, and the MediaRecorder API is the interface that turns that track into a downloadable file. Together they capture a screen, window, or tab, mix in your microphone, composite a small webcam overlay, and save the result to your device.
The Haivix Screen Recorder runs this entirely in the browser. Your screen, camera, and microphone never reach Haivix servers. Both APIs are documented on MDN as the Screen Capture API and MediaRecorder.
Key takeaways
- Screen, webcam, and microphone capture all run locally in the browser; nothing is uploaded.
- The MediaRecorder API is what turns the live capture into a file you download.
- Recordings are usually WebM, or MP4 where the browser supports it, decided by the browser rather than a setting.
- There is no built-in trim tool by design, because trimming means re-encoding the whole clip.
- Test your microphone and screen with the Screen Share Test before a long recording.
The three things you can include
Before you start, decide what belongs in the recording. The screen is whatever you pick in the browser picker — a whole display, one application window, or a single browser tab. The microphone option captures your voice for narration through the getUserMedia() call. The webcam overlay composites a small camera bubble into the corner of the video.
System or tab audio is captured when you choose an audio-sharing source in the picker, the same way as a live share. If you only need your voice, leave the microphone on and skip screen audio.
What each option adds to the file
| Option | What it adds | When to use it |
|---|---|---|
| Microphone | Your voice as an audio track. | Narration or live commentary. |
| Webcam overlay | A small camera bubble in a corner. | When you want to appear on screen. |
| Screen or tab audio | Sound the shared source plays. | Presenting a video, game, or demo. |
Record in five steps
Open the recorder and set your options first.
- Tick Microphone if you want narration, and Webcam overlay if you want to appear in the corner.
- Select Start recording and pick the screen, window, or tab to capture.
- Pause and resume with the pause button while you work; the timer and file size update as you go.
- Select Stop, preview the clip, and choose Download recording to save it.
- Select Record again to clear the result and start a new one.
What format you get, and why there is no trim
Recordings download as WebM in most browsers, or MP4 where the browser supports it. A container format is the wrapper that holds the video and audio tracks together, and WebM is the open container most browsers produce. The browser decides which format it can make, not the recorder. The MediaStream Recording specification covers how the output is produced, and your browser's MediaRecorder support sets the exact format, so it can differ between Chrome, Edge, and Firefox. A page can ask what a browser supports with MediaRecorder.isTypeSupported(), which is why the same recorder may hand you different files on different machines.
There is no built-in trim tool. Cutting video in the browser means re-encoding the file, which is slow and needs a large encoder, so the recorder deliberately leaves editing to a video editor and keeps the recording step fast and local. Trim in your editor after you download the clip, and keep the original until you are happy with the cut.
Tips for a clean recording
A few habits save you a re-record.
- Close notification pop-ups and messaging apps before you start.
- Share a single window or tab instead of the whole display to avoid exposing other content, for example an open inbox or chat.
- Decide in advance whether you want your voice, the system audio, or both — mixing both can bury one under the other.
- Test the microphone and screen first with the Screen Share Test.
- Very long recordings are limited by browser memory; split long sessions into parts.
If the recording will be published, add captions and a transcript so it works for people who cannot hear it, for example viewers in a noisy room or using a screen reader. The GSA's Section508.gov guidance on captions and transcripts is a practical checklist.
Recording or sharing live?
Use the Screen Recorder when you need a file to keep, send, or publish. Use Watch Together when you want people to watch in real time with no download. Both use the same capture permissions and require HTTPS, because browsers only allow screen and camera access in a secure context. If one works, the other usually does too.
About this guide
This guide is maintained by the Haivix editorial team. You can read more about us and how Haivix tests its tools on our about page, and send corrections through our contact page.