Electron 如何操作本地的音视频设备

之前的文章中提到过，安卓等移动端APP在采集音视频数据时，需要打开本地摄像头和麦克风设备。同理，桌面端应用程序在采集音视频数据时也需要依赖本地的音视频设备，今天本文的主要内容就是讨论Electron是如何操作本地的麦克风和摄像头以及如何控制麦克风和摄像头采集音视频数据。

获取音视频设备

在实时音视频通讯场景中，常见的音视频设备包括麦克风、摄像头和扬声器等。麦克风设备用于采集本地的声音，摄像头设备用于采集本地的视频画面，扬声器设备用于在本地播放系统声音。三者的功能各不相同，就算是相同设备，其存在具体形式也存在差异，比如有些设备是机器自身内置的，有些设备是外接的，有些设备是蓝牙连接的，下面详细介绍一下如何获取不同的音视频设备。

1. 获取麦克风设备

一般来说，一台电脑可以支持非常多的麦克风设备，包括内置麦克风、USB外接麦克风以及蓝牙麦克风设备等。那么如何使用Electron获取本地电脑的麦克风设备列表呢？Electron框架是具备这种能力的，可以参考如下代码：

// 获取麦克风设备
navigator.mediaDevices.enumerateDevices()
    .then((devices) => {
          devices.forEach((device) => {
              if (device.kind == 'audioinput') {
                  console.log(`麦克风: ${device.label} id = ${device.deviceId}`);});
              }
          }).catch((err) => {
              console.error(`错误发生 ${err.name}: ${err.message}`);
          }
    );

效果展示：

2. 获取摄像头设备

笔记本电脑除了自带的摄像头设备之外，也可以外接USB摄像头，特别是台式机电脑，一般默认是没有内置摄像头的，必须使用外接的摄像头。就像获取麦克风设备一样，使用Electron框架也可以非常容易的获取当前电脑的摄像头设备列表，具体方式可以参考如下代码：

// 获取摄像头设备
navigator.mediaDevices.enumerateDevices()
    .then((devices) => {
          devices.forEach((device) => {
              if (device.kind == 'videoinput') {
                  console.log(`摄像头: ${device.label} id = ${device.deviceId}`);});
              }
          }).catch((err) => {
              console.error(`错误发生 ${err.name}: ${err.message}`);
          }
    );

效果展示：

3. 获取扬声器设备

无论是笔记本电脑，还是台式机电脑，都支持外接USB音箱或者蓝牙音箱，它们也是常见的扬声器设备。Electron框架也支持此类设备的检测，只有先检测到了，才能被后续流程所使用。我们可以使用如下代码获取当前电脑所有的扬声器设备列表：

// 获取扬声器设备
navigator.mediaDevices.enumerateDevices()
    .then((devices) => {
          devices.forEach((device) => {
              if (device.kind == 'audiooutput') {
                  console.log(`扬声器: ${device.label} id = ${device.deviceId}`);});
              }
          }).catch((err) => {
              console.error(`错误发生 ${err.name}: ${err.message}`);
          }
    );

效果展示：

控制音视频设备

上文已经介绍了如何获取电脑上常见的音视频设备，接下来，我们看一下如何控制这些设备进行简单的使用。

打开麦克风设备

麦克风设备的主要作用就是采集本地的声音，我们在上文已经获取到了麦克风设备列表，如果存在多个设备，我们如何指定具体使用哪一个设备进行声音采集呢？好了，不卖关子了，直接看下面的代码吧。

  const audioDevice = audioInputSelect.value;
  const constraints = {
    audio: {deviceId: audioDevice ? {exact: audioDevice} : undefined}
  };
  navigator.mediaDevices.getUserMedia(constraints).then(dosomething).catch(handleError);

具体的做法就是把设备列表中对应麦克风的设备ID传递给getUserMedia()方法接口，就可以打开对应的麦克风设备进行声音采集了，所以，我们在获取麦克风设备列表时记录对应的设备ID就变得非常重要。

打开摄像头设备

摄像头设备的主要作用就是采集本地的视频画面内容，拿到摄像头的设备列表后，我们也可以指定具体使用哪个摄像头进行视频采集，具体示例代码如下：

  const videoDevice = videoInputSelect.value;
  const constraints = {
    video: {deviceId: videoDevice ? {exact: videoDevice} : undefined}
  };
  navigator.mediaDevices.getUserMedia(constraints).then(dosomething).catch(handleError);

和麦克风设备一样，指定设备时也是利用设备ID。
整体效果如下图所示：

常见问题

1. Electron下载失败或者进度卡住不动

这种情况经常发生，特别是基于Electron框架开发的工程，在首次执行 npm install 命令时，经常会遇到。一般情况下都是网络原因导致的，可以通过指定Electron仓库源的方式解决，具体命令如下：

npm config set ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/

然后，再执行 npm install 命令。

2. 操作设备提示：Permission denied NotAllowedError

如果你是 mac OS 系统有可能会遇到这个问题，这个问题和权限相关，在 macOS 10.13 High Sierra 及以下版本是不需要用户授权的，但是 macOS 10.14 Mojave 及以上版本需要进行授权，可以使用 askForMediaAccess() 接口。

3. 窗口加载时显示白屏

Electron客户端加载窗口时，有时候会遇到白屏现象，原因大体可以分为两类，第一类是代码问题，比如加载的页面内部存在逻辑错误导致页面崩溃白屏，或者是 html 页面路径加载设置错误；第二类是时机问题，由于Electron自身模块加载也需要一定的时间，和页面（内容复杂的话）可能会存在显示时间差。因此，针对第一类问题可以通过自查自纠的方式定位原因，第二类问题可以在 app 模块加载完成后再 load 页面，也就是 ready 事件抛出后再处理。

结论

Electron作为优秀的桌面端跨平台技术方案，现在非常火热，所以它的应用也非常广泛。很多音视频厂商都推出了自己的Electron SDK，便于传统PC端研发集成和开发，ZEGO即构也有对应的 Electron SDK，可点击了解。