Posted on

How to record a screencast with an overlay from the web camera on macOS

It is possible to create a screen recording on macOS with your camera feed overlaid somewhere in the corner without using any third party apps or services like https://www.loom.com.

You can create a screen recording (screencast) on macOS using a built-in Screenshot app (cmd+shift+5 shortcut), or with a QuickTime player (File → New Screen Recording).

The question is — how to get an overlay frame with your face from the web camera?

Although there are some apps that can do this, it is possible to do this only with the tools you already have.

Create a video.html file with the following content:

<!DOCTYPE html>
<title>Camera</title>
<video id="video" controls autoplay></video>
<script>
    var video = document.getElementById('video');
    if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices.getUserMedia({video:true}).then(function(stream) {
            video.srcObject = stream;
            video.play();
        });
    }
</script>

Now if you open this file in Safari and allow it to use your camera, you'll see a live feed from your camera. Click on the "picture in picture" icon on the video controls, that will detach video to an "always-on-top" overlay frame. You can now minimize the Safari window and record your screen, while having a feed from your camera in the corner of your screen.

Note that by default such picture in picture overlay automatically sticks to one of the four screen corners. To place it to an arbitrary position on the screen, drag it while holding a cmd button.