Project 33, Media and real-time
Screen Recorder
Record a screen, window or tab, talk over it, and add your face in a corner. When you stop, watch it back and save the file. Nothing is uploaded.
- Main API
- Screen Capture, MediaRecorder
- Mixes audio with
- Web Audio API
- Dependencies
- None
- Your browser
- Checking
Record
Press Start recording and choose what to share.
Recordings
- Nothing recorded yet.
How it works
- Pick what to shareThe browser shows its own picker for screens, windows and tabs. The page never sees anything you did not pick.
- Mix the sourcesScreen video and webcam are drawn onto one canvas. Microphone and screen audio are mixed with an AudioContext.
- RecordMediaRecorder turns the combined stream into video chunks. On stop they become one file you can play or save.
const screen = await navigator.mediaDevices.getDisplayMedia({ video: true, audio: true });
const mic = await navigator.mediaDevices.getUserMedia({ audio: true });
// Mix screen audio and microphone into one track
const ctx = new AudioContext(), out = ctx.createMediaStreamDestination();
[screen, mic].forEach((s) => s.getAudioTracks().length && ctx.createMediaStreamSource(s).connect(out));
const stream = new MediaStream([...screen.getVideoTracks(), ...out.stream.getAudioTracks()]);
const rec = new MediaRecorder(stream, { mimeType: "video/webm;codecs=vp9,opus" });
rec.ondataavailable = (e) => chunks.push(e.data);
rec.onstop = () => download(new Blob(chunks, { type: rec.mimeType }));
rec.start(1000);