This section shows how to capture screenshots and videos of Electron's screens using the built-in desktopCapturer module and some other third-party modules. Internally, desktopCapturer uses the navigator.webkitGetUserMedia API to capture and manipulate media content. Capturing video can be done in your renderer process:

desktopCapturer.getSources({types: ['window', 'screen']}, (error, sources) => { 
  if (error) throw error 
   navigator.webkitGetUserMedia({ 
        audio: false, 
        video: { 
          mandatory: { 
            ChromeMediaSource: 'desktop', 
            ChromeMediaSourceId: sources[0].id, 
            minWidth: 1280, 
            maxWidth: 1280, 
            minHeight: 720, 
            maxHeight: 720 
          } 
        } 
      }, function(stream) { 
    document.querySelector('video').src = URL.createObjectURL(stream); 
}, function(error) { 
console.log(error); 
}) 
})

Sources are an array source object; each source represents a screen or individual window that can be captured. The preceding example captures the video from the first screen present inside the source array and streams it into an HTML video element inside the web page. The following code can be used to take a screenshot of a current page:

// In your renderer process 
var remote = require('electron').remote; 
remote.getCurrentWindow().capturePage(function handleCapture (img) { 
  remote.require('fs').writeFile(filename, img.toPng(), function() { 
    console.log('Screenshot created') 
  }) 
})

You can also use any of the Node.js APIs available for recording the video or taking the screenshot. We will see how we can use the media API to record and play the video using a camera or external devices in the following chapter.