desktopCapturer

通过[navigator.mediaDevices.getUserMedia] API ，可以访问那些用于从桌面上捕获音频和视频的媒体源信息。

进程: Renderer

下面的示例演示如何从标题为 Electron 的桌面窗口捕获视频:

  1. // In the renderer process.
  2. const { desktopCapturer } = require('electron')
  4. desktopCapturer.getSources({ types: ['window', 'screen'] }).then(async sources => {
  5.   for (const source of sources) {
  6.     if (source.name === 'Electron') {
  7.       try {
  8.         const stream = await navigator.mediaDevices.getUserMedia({
  9.           audio: false,
  10.           video: {
  11.             mandatory: {
  12.               chromeMediaSource: 'desktop',
  13.               chromeMediaSourceId: source.id,
  14.               minWidth: 1280,
  15.               maxWidth: 1280,
  16.               minHeight: 720,
  17.               maxHeight: 720
  18.             }
  19.           }
  20.         })
  21.         handleStream(stream)
  22.       } catch (e) {
  23.         handleError(e)
  24.       }
  25.       return
  26.     }
  27.   }
  28. })
  30. function handleStream (stream) {
  31.   const video = document.querySelector('video')
  32.   video.srcObject = stream
  33.   video.onloadedmetadata = (e) => video.play()
  34. }
  36. function handleError (e) {
  37.   console.log(e)
  38. }

若要从 desktopCapturer 提供的源捕获视频, 则传递给 [navigator.mediaDevices.getUserMedia] 的约束必须包括 chromeMediaSource: "desktop" 和 audio: false。

要从整个桌面同时捕获音频和视频, 传递给 [navigator.mediaDevices.getUserMedia] 的约束必须包括 chromeMediaSource: ' desktop ', 同时用于 audio 和 video, 但不应包括 chromeMediaSourceId 约束。

  1. const constraints = {
  2.   audio: {
  3.     mandatory: {
  4.       chromeMediaSource: 'desktop'
  5.     }
  6.   },
  7.   video: {
  8.     mandatory: {
  9.       chromeMediaSource: 'desktop'
  10.     }
  11.   }
  12. }

方法

desktopCapturer 模块有以下方法:

desktopCapturer.getSources(options, callback)

  • options 对象

    • typesString[]-列出要捕获的桌面源类型的字符串数组, 可用类型为 screen 和 window。
    • thumbnailSize Size (optional) - The size that the media source thumbnail should be scaled to. Default is 150 x 150. Set width or height to 0 when you do not need the thumbnails. This will save the processing time required for capturing the content of each window and screen.
    • 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 - 回调函数

    • error Error
    • sources DesktopCapturerSource[]开始收集所有有效桌面媒体源的信息，当结束时将调用 callback(error, sources)

sources 是 DesktopCapturerSource对象数组, 每个DesktopCapturerSource 代表一个屏幕或一个可捕获的独立窗口。

即将弃用

desktopCapturer.getSources(options)

  • options Object - 过滤器对象，包含过滤参数

    • typesString[]-列出要捕获的桌面源类型的字符串数组, 可用类型为 screen 和 window。
    • thumbnailSize Size (optional) - The size that the media source thumbnail should be scaled to. Default is 150 x 150. Set width or height to 0 when you do not need the thumbnails. This will save the processing time required for capturing the content of each window and screen.
    • 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.Returns Promise<DesktopCapturerSource[]> - Resolves with an array of DesktopCapturerSource objects, each DesktopCapturerSource represents a screen or an individual window that can be captured.

Caveats

navigator.mediaDevices.getUserMedia does not work on macOS for audio capture due to a fundamental limitation whereby apps that want to access the system's audio require a signed kernel extension. Chromium, and by extension Electron, does not provide this.

It is possible to circumvent this limitation by capturing system audio with another macOS app like Soundflower and passing it through a virtual audio input device. This virtual device can then be queried with navigator.mediaDevices.getUserMedia.