First of all, you need to be familiar with the desktopCapturer API that Electron provides. According to the official documentation, this API allows you to do the following:
Access information about media sources that can be used to capture audio and video from the desktop using the navigator.mediaDevices.getUserMedia (https://developer.mozilla.org/en/docs/Web/API/MediaDevices/getUserMedia) API.
Now, we are going to walk through the basics and introduce the Snip button click event, which has access to the capturing sources:
- Update the onSnipClick function implementation according to the following code:
const onSnipClick = async () => {
const { desktopCapturer, remote } = window.require('electron');
const screen = remote.screen;
try {
const sources = await desktopCapturer.getSources...