基于WebRTC在Electron窗口间传输实时PCM音频流的技术咨询

Alright，咱们一步步来搞定这个需求——既然你已经通过Electron IPC搭好了窗口间的通信桥梁，而且不需要ICE/STUN服务器（毕竟是同一Electron实例下的同域渲染进程，逻辑和同域浏览器标签页完全一致），我们可以结合WebRTC的RTCPeerConnection + DataChannel来实现未压缩、未加密、原始PCM音频的实时传输，完全贴合你的场景要求。

1. 初始化PeerConnection（两个窗口都要做） #

因为不需要ICE/STUN，直接创建一个空配置的RTCPeerConnection就行：

// 窗口A和窗口B的渲染进程中都执行这段代码
const pc = new RTCPeerConnection({ iceServers: [] });

2. 用IPC传递WebRTC信令（替代外部信令服务器） #

既然没有外部服务器，咱们就用现成的IPC来传递SDP Offer和Answer：

窗口A（发起端）： #

// 先创建专门传PCM的DataChannel，配置成适合实时音频的参数
const pcmChannel = pc.createDataChannel('raw-pcm-stream', {
  ordered: true, // 必须保证PCM样本顺序，不然音频会乱
  maxRetransmits: 0 // 实时音频丢帧比延迟强，不需要重传
});

// 创建Offer并通过IPC发给窗口B
pc.createOffer()
  .then(offer => pc.setLocalDescription(offer))
  .then(() => {
    // 这里用你已经实现的IPC发送逻辑，比如ipcRenderer.sendTo()指定目标窗口
    ipcRenderer.sendTo(windowBWebContentsId, 'webrtc-offer', pc.localDescription);
  });

// 监听窗口B发来的Answer
ipcRenderer.on('webrtc-answer', (event, answer) => {
  pc.setRemoteDescription(new RTCSessionDescription(answer));
});

窗口B（接收端）： #

// 监听窗口A发来的Offer
ipcRenderer.on('webrtc-offer', (event, offer) => {
  pc.setRemoteDescription(new RTCSessionDescription(offer))
    .then(() => pc.createAnswer())
    .then(answer => pc.setLocalDescription(answer))
    .then(() => {
      // 同样用你的IPC逻辑把Answer发回窗口A
      ipcRenderer.sendTo(windowAWebContentsId, 'webrtc-answer', pc.localDescription);
    });
});

// 监听DataChannel的连接事件，拿到传输通道
pc.ondatachannel = (event) => {
  const pcmChannel = event.channel;
  // 后面的PCM接收逻辑就绑定这个channel
};

3. 提取原始PCM样本（发送端） #

要拿到未修改的原始PCM，得先从音频源（比如麦克风）获取MediaStream，然后用AudioContext提取原始样本：

// 发送端（比如窗口A）获取麦克风音频流
navigator.mediaDevices.getUserMedia({ audio: true })
  .then(stream => {
    const audioCtx = new AudioContext();
    const sourceNode = audioCtx.createMediaStreamSource(stream);
    
    // 用ScriptProcessorNode提取PCM（虽然标记为deprecated，但Electron环境兼容性拉满；追求现代方案可以用AudioWorklet）
    const processor = audioCtx.createScriptProcessor(4096, 1, 1); // 缓冲区大小、输入声道数、输出声道数

    sourceNode.connect(processor);
    processor.connect(audioCtx.destination); // 可选，如果你要本地监听麦克风声音

    // 每次音频缓冲区满了就提取PCM并发送
    processor.onaudioprocess = (event) => {
      const inputBuffer = event.inputBuffer;
      // 获取单声道的PCM数据（Float32Array格式，范围[-1, 1]）
      const rawPCM = inputBuffer.getChannelData(0);
      // 通道打开状态下直接发送ArrayBuffer
      if (pcmChannel.readyState === 'open') {
        pcmChannel.send(rawPCM.buffer);
      }
    };
  });

4. 接收并播放原始PCM（接收端） #

接收方拿到ArrayBuffer后，得用AudioContext把PCM转成可播放的音频：

// 接收端（窗口B）
const audioCtx = new AudioContext();
let playbackProcessor;
const pcmBufferQueue = [];

// 初始化音频播放处理器
function initPlayback() {
  playbackProcessor = audioCtx.createScriptProcessor(4096, 1, 1);
  playbackProcessor.connect(audioCtx.destination);

  // 每次需要填充播放缓冲区时，从队列里取PCM数据
  playbackProcessor.onaudioprocess = (event) => {
    const outputBuffer = event.outputBuffer;
    const channelData = outputBuffer.getChannelData(0);

    let offset = 0;
    // 用队列里的PCM数据填充输出缓冲区
    while (offset < channelData.length && pcmBufferQueue.length > 0) {
      const pcmChunk = pcmBufferQueue.shift();
      const chunkSize = Math.min(pcmChunk.length, channelData.length - offset);
      channelData.set(pcmChunk.subarray(0, chunkSize), offset);
      offset += chunkSize;
    }

    // 剩余位置填0，避免爆音
    if (offset < channelData.length) {
      channelData.fill(0, offset);
    }
  };
}

// 监听DataChannel的消息，接收PCM数据
pcmChannel.onmessage = (event) => {
  const rawPCM = new Float32Array(event.data);
  pcmBufferQueue.push(rawPCM);

  // 处理AudioContext的自动暂停限制（需要用户交互触发恢复）
  if (audioCtx.state === 'suspended') {
    audioCtx.resume();
    initPlayback();
  }
};

几个关键细节要注意 #

• 未加密/未修改保障：我们直接传输原始PCM的ArrayBuffer，而且同域Electron环境下WebRTC DataChannel默认不会加密（如果要彻底确保，创建DataChannel时可以加negotiated: true并指定固定id，完全跳过WebRTC的加密协商），绝对是原汁原味的原始数据。
• IPC的角色：这里IPC只负责传递WebRTC的SDP信令，实际的音频流是通过WebRTC DataChannel传输的——比直接用IPC传音频流效率更高、实时性更好，毕竟DataChannel是专门为实时流优化的。
• 缓冲区管理：音频播放对数据流连续性要求很高，接收端的队列一定要做好，不然容易出现卡顿或爆音。
• AudioContext状态：Electron继承了浏览器的安全策略，AudioContext会自动暂停，需要用户的交互操作（比如点击按钮）来恢复，不然播放不了哦。

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