Screen + Webcam Recording Demo Using Web APIs
This demo uses getDisplayMedia(), getUserMedia(), MediaStream Recording API and HTML Canvas to simultaneously capture your screen and webcam along with audio from your microphone and system/tab sounds if available.
The screen content and webcam video are drawn onto an HTML5 <canvas>, which is then recorded using a MediaRecorder. This approach allows us to display your webcam as a picture-in-picture (PiP) overlay while recording the entire screen.
How It Works
1. When you click "Share Screen + Camera", we use the getDisplayMedia() API to capture your screen and getUserMedia() to access your webcam and microphone.
2. Both video sources are drawn onto an HTML5 <canvas> element. The webcam feed is positioned as an overlay in the corner.
3. The canvas content is captured and recorded using the
MediaRecorder API into a downloadable WebM file.
Browser Compatibility
- Chrome 72 and above
- Edge 79 and above
- Firefox 66 and above
- Opera 60 and above
Links
- Code for this demo on GitHub: https://github.com/addpipe/record-screen-and-camera-demo
- Blog post