Switch branches/tags
1-3-x 1-4-x 1-5-x 1-6-x 1-7-x 1-8-x 2-0-x 2-1-x 3-0-x-appcontainer-trials 3-0-x 3-1-x 4-0-x 69_enable_logging add-args-spec add-vsts-status-to-readme add-web-frame-add-origin-access-whitelist-entry appcontainer-trials appveyor-test-reporter appveyor_gpu_test asan-tests better-spec-runner brenca/accessibility-tests brenca/cookie-store-backport-4-0-x brenca/fix-14908 brenca/fix-paste-and-match-style-3-0-x build-gn buildFromTemplate-fix chromium-upgrade/71 deprecate-webframe-api dialog-refactor-p1 docs-index e2e enable-mixed-sandbox enable-power-monitor-tests expect-browser-window-spec expect-crash-reporter-spec export-patches fetch-electron fetch_job_uaf_patch fix-build-with-enable_run_as_node-disabled fix-drag-region-crash fix-last-crash-report fix-memory-tracing fix-mixed-sandbox-tests fix-power-observer-dbus_3-0-x fix-remote-debugging fix-vsts-mac-gn fix-webview-in-contextisolation-4-0-x fix-window-close fix-windows-release-test fix-zoom-in-mac gn-add-nonproprietary-ffmpeg gn-babel gn-ci-builds gn-ci-sccache gn-circleci-mac gn-release-win gn-resource-conflict-omg-again-srsly gn-win-link ipc-filter jest-spike kthulu120/moveTopBackport lang lenient-locale-mkdirs make-cppcheck-happy master menu-accel migrate-setpath-logs miniak/desktop-capturer-filtering miniak/dock-api miniak/drop-mavericks miniak/fix-patch-description miniak/object-shorthand miniak/prefer-spread miniak/release-context miniak/remote-promise-invoke miniak/remove-deprecated miniak/return-type-annotation miniak/screen-reader-detection miniak/tray-focus mkt/add-debugging-tools-to-windows-docs mkt/better-release-notes-note more-timeout multiple-globals no-chrome-common no-exit-event nornagon/gn-ci-builds ppontes/8100-backport-window.opener-null-fix-to-3-0-x ppontes/8100-use-proper-site-instance-candidate promise-changes promisify-affinity-tests promisify-cookies promisify-importcert promisify-tests publish-nightly-to-nightly reenable-nativeimage-specs release-1-7-x remove-blink_local_frame.patch rename-electron-build-configs resource-file-conflict-patch-explanation restore-clipboard-dcheck restore-url-dchecks restore-wtf-string-dcheck revert-10204-fix-window-opener revert-12293-revert-12193-master revert-15698-ppontes/8100-backport-window.opener-null-fix-to-4 rich-dialog roll-libcc route-permission-checks sandbox-ci-test single-core-fix-3-1-x system_netwok_context t-g test-build-appx test-change test-cr test-dirty-frame test-skips test-symbols-win unsafe-secure-origins upgrade_sqlite_4_x url_fetcher_rewrite wc-exec-js webview-in-sandbox-renderer win-width-fix windows-powermonitor-shutdown-event wrap-docs-toc-in-element yolo-tests
Nothing to show
Find file Copy path
102 lines (84 sloc) 3.1 KB


Access information about media sources that can be used to capture audio and video from the desktop using the navigator.mediaDevices.getUserMedia API.

Process: Renderer

The following example shows how to capture video from a desktop window whose title is Electron:

// In the renderer process.
const { desktopCapturer } = require('electron')

desktopCapturer.getSources({ types: ['window', 'screen'] }, async (error, sources) => {
  if (error) throw error
  for (const source of sources) {
    if ( === 'Electron') {
      try {
        const stream = await navigator.mediaDevices.getUserMedia({
          audio: false,
          video: {
            mandatory: {
              chromeMediaSource: 'desktop',
              minWidth: 1280,
              maxWidth: 1280,
              minHeight: 720,
              maxHeight: 720
      } catch (e) {

function handleStream (stream) {
  const video = document.querySelector('video')
  video.srcObject = stream
  video.onloadedmetadata = (e) =>

function handleError (e) {

To capture video from a source provided by desktopCapturer the constraints passed to navigator.mediaDevices.getUserMedia must include chromeMediaSource: 'desktop', and audio: false.

To capture both audio and video from the entire desktop the constraints passed to navigator.mediaDevices.getUserMedia must include chromeMediaSource: 'desktop', for both audio and video, but should not include a chromeMediaSourceId constraint.

const constraints = {
  audio: {
    mandatory: {
      chromeMediaSource: 'desktop'
  video: {
    mandatory: {
      chromeMediaSource: 'desktop'


The desktopCapturer module has the following methods:

desktopCapturer.getSources(options, callback)

  • options Object
    • types String[] - An array of Strings that lists the types of desktop sources to be captured, available types are screen and window.
    • thumbnailSize Size (optional) - The size that the media source thumbnail should be scaled to. Default is 150 x 150.
    • fetchWindowIcons Boolean (optional) - Set to true to enable fetching window icons. The default value is false. When false the appIcon property of the sources return null. Same if a source has the type screen.
  • callback Function

Starts gathering information about all available desktop media sources, and calls callback(error, sources) when finished.

sources is an array of DesktopCapturerSource objects, each DesktopCapturerSource represents a screen or an individual window that can be captured.