Made by the Pipe Recording Platform
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.
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.