如何使用NodeJS播放输入源音频？（Electron跨平台桌面应用开发）

一、视频采集与播放（摄像头/EasyCap等设备） #

Electron渲染进程完全支持浏览器原生的getUserMedia API，实现逻辑和网页端一致，以下是可直接运行的示例：

渲染进程代码（index.html） #

<video id="videoPlayer" autoplay playsinline width="1280" height="720"></video>

<script>
async function startVideoCapture() {
  try {
    // 请求视频流，可指定设备ID（通过enumerateDevices获取）或使用默认设备
    const stream = await navigator.mediaDevices.getUserMedia({
      video: {
        width: { ideal: 1280 },
        height: { ideal: 720 },
        deviceId: undefined // 替换为目标设备ID即可指定设备
      }
    });
    // 将媒体流绑定到video元素
    document.getElementById('videoPlayer').srcObject = stream;
  } catch (err) {
    console.error('视频采集失败:', err);
  }
}

// 启动视频采集
startVideoCapture();
</script>

主进程配置（main.js） #

需要确保窗口允许媒体权限访问：

const { app, BrowserWindow } = require('electron');

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 1400,
    height: 900,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  });

  mainWindow.loadFile('index.html');

  // 自动允许媒体权限请求（也可让用户手动授权）
  mainWindow.webContents.session.setPermissionRequestHandler((_, permission, callback) => {
    callback(permission === 'media');
  });
}

app.whenReady().then(createWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit();
});

二、音频采集与播放（麦克风/设备音频） #

音频采集同样基于getUserMedia，可单独采集音频或与视频同步采集，以下是两种常见场景：

1. 单独音频采集播放 #

<!-- 在index.html中添加音频元素 -->
<audio id="audioPlayer" autoplay></audio>

<script>
async function startAudioCapture() {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({
      audio: {
        echoCancellation: false,
        noiseSuppression: false,
        deviceId: undefined // 可指定音频设备ID
      }
    });
    document.getElementById('audioPlayer').srcObject = stream;
  } catch (err) {
    console.error('音频采集失败:', err);
  }
}

// 启动音频采集
// startAudioCapture();
</script>

2. 同步采集音视频 #

如果需要同时播放音视频，只需在getUserMedia中同时指定audio和video参数：

async function startMediaCapture() {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({
      video: { width: { ideal: 1280 }, height: { ideal: 720 } },
      audio: true
    });
    const videoPlayer = document.getElementById('videoPlayer');
    videoPlayer.srcObject = stream;
    // 部分设备/平台下，video元素会自动播放音频，无需单独audio元素，可根据测试结果调整
  } catch (err) {
    console.error('音视频采集失败:', err);
  }
}

3. 获取并选择指定设备 #

如果需要让用户选择EasyCap等特定设备，可通过enumerateDevices获取所有可用音视频设备：

async function listMediaDevices() {
  const devices = await navigator.mediaDevices.enumerateDevices();
  const videoDevices = devices.filter(d => d.kind === 'videoinput');
  const audioDevices = devices.filter(d => d.kind === 'audioinput');
  
  console.log('可用视频设备:', videoDevices);
  console.log('可用音频设备:', audioDevices);
  
  // 示例：选择第一个视频设备启动采集
  if (videoDevices.length) {
    const stream = await navigator.mediaDevices.getUserMedia({
      video: { deviceId: videoDevices[0].deviceId }
    });
    document.getElementById('videoPlayer').srcObject = stream;
  }
}

// 调用获取设备列表
// listMediaDevices();

三、关键注意事项 #

• 权限配置：打包应用时，需根据平台添加权限描述：
  • macOS：在Info.plist中添加NSCameraUsageDescription和NSMicrophoneUsageDescription
  • Windows：在应用清单中配置摄像头、麦克风权限
• 设备兼容性：确保EasyCap等设备的系统驱动正常，Electron依赖系统媒体栈，系统能识别的设备即可被getUserMedia捕获
• 跨平台差异：不同平台的设备命名、权限提示逻辑略有不同，需分别测试验证
• 性能调优：可通过getUserMedia的参数限制分辨率、帧率，避免资源占用过高

内容的提问来源于stack exchange，提问作者RBFraphael