×

Electron 教程

Electron 教程简介Electron 快速入门Electron 桌面环境集成Electron 在线/离线事件探测Electron 进程支持的 Chrome 命令行开关Electron 环境变量Electron 支持的平台Electron 应用部署Mac App Store 应用提交向导Electron 应用打包Electron 使用原生模块Electron 主进程调试使用 Selenium 和 WebDriverElectron DevTools扩展使用 Pepper Flash 插件使用 Widevine CDM 插件Electron 术语表Electron 离屏渲染Electron 交互式解释器 (REPL)Electron 自动更新功能autoUpdater

Electron API

Electron DOM File对象Electron DOM <webview>Electron window.open 函数

在主进程内可用的模块

Electron app 模块Electron autoUpdater 模块Electron BrowserWindow 模块Electron contentTracing 模块Electron dialog 模块Electron global-shortcut 模块Electron ipcMain 模块Electron menu 模块Electron MenuItem 模块Electron powerMonitor 模块Electron powerSaveBlockerElectron protocol 模块Electron session 模块Electron webContents 模块Electron Tray 模块Electron Locales

在渲染进程(网页)可用模块

Electron desktopCapturer模块Electron ipcRenderer 模块Electron remote 模块Electron webFrame 模块

两种进程都可用的模块

Electron clipboard 模块Electron crashReporter 模块Electron nativeImage 模块Electron screen 模块Electron shell 模块

Electron 开发

Electron 编码规范Electron 源码目录结构Electron 和 NW.js技术上的差异Electron 构建系统概览Electron 构建步骤 (OS X)Electron 构建步骤 (Windows)Electron 构建步骤 (Linux)调试中使用 Symbol ServerElectron 常见问题Electron 版本管理electron window 提交指南自动化持续集成系统(CI)测试Electron 文档风格指南

Electron desktopCapturer 模块


desktopCapturer 模块可用来获取可用资源,这个资源可通过 getUserMedia 捕获得到.

// 在渲染进程中.
var desktopCapturer = require('electron').desktopCapturer;

desktopCapturer.getSources({types: ['window', 'screen']}, function(error, sources) {
  if (error) throw error;
  for (var i = 0; i < sources.length; ++i) {
    if (sources[i].name == "Electron") {
      navigator.webkitGetUserMedia({
        audio: false,
        video: {
          mandatory: {
            chromeMediaSource: 'desktop',
            chromeMediaSourceId: sources[i].id,
            minWidth: 1280,
            maxWidth: 1280,
            minHeight: 720,
            maxHeight: 720
          }
        }
      }, gotStream, getUserMediaError);
      return;
    }
  }
});

function gotStream(stream) {
  document.querySelector('video').src = URL.createObjectURL(stream);
}

function getUserMediaError(e) {
  console.log('getUserMediaError');
}

当调用 navigator.webkitGetUserMedia 时创建一个约束对象,如果使用 desktopCapturer 的资源,必须设置 chromeMediaSource  "desktop" ,并且 audio  false.

如果你想捕获整个桌面的 audio 和 video,你可以设置 chromeMediaSource  "screen" ,和 audio  true. 当使用这个方法的时候,不可以指定一个 chromeMediaSourceId.

方法

desktopCapturer 模块有如下方法:

desktopCapturer.getSources(options, callback)

  • options Object
    • types Array - 一个 String 数组,列出了可以捕获的桌面资源类型, 可用类型为 screen  window.
    • thumbnailSize Object (可选) - 建议缩略可被缩放的 size, 默认为 {width: 150, height: 150}.
  • callback Function

发起一个请求,获取所有桌面资源,当请求完成的时候使用 callback(error, sources) 调用 callback .

sources 是一个 Source 对象数组, 每个 Source 表示了一个捕获的屏幕或单独窗口,并且有如下属性 :

  • id String - 在 navigator.webkitGetUserMedia 中使用的捕获窗口或屏幕的 id . 格式为 window:XX screen:XXXX 是一个随机数.
  • name String - 捕获窗口或屏幕的描述名 . 如果资源为屏幕,名字为 Entire Screen  Screen ; 如果资源为窗口, 名字为窗口的标题.
  • thumbnail NativeImage - 缩略图.

注意: 不能保证 source.thumbnail 的 size 和 options 中的 thumnbailSize 一直一致. 它也取决于屏幕或窗口的缩放比例.


分类导航

关注微信下载离线手册

bootwiki移动版 bootwiki
(群号:472910771)