electron录制窗口+系统声音和麦克风声音

Question

想在Electron中实现录制当前窗口的视频+系统声音+麦克风声音。试了N种方式，总是不能同时获取系统声音和麦克风声音。

有没有做过类似程序的朋友，给个思路。先谢过了。

Answer 1

  // 混音
  const mergeAudioStreams = (desktopStream, voiceStream) => {
    const context = new AudioContext();
    const destination = context.createMediaStreamDestination();
    const hasDesktop = false;
    const hasVoice = false;
    if (desktopStream && desktopStream.getAudioTracks().length > 0) {
      const source1 = context.createMediaStreamSource(desktopStream);
      const desktopGain = context.createGain();
      desktopGain.gain.value = 0.7;
      source1.connect(desktopGain).connect(destination);
    }
    if (voiceStream && voiceStream.getAudioTracks().length > 0) {
      const source2 = context.createMediaStreamSource(voiceStream);
      const voiceGain = context.createGain();
      voiceGain.gain.value = 0.7;
      source2.connect(voiceGain).connect(destination);
    }
    return (hasDesktop || hasVoice) ? destination.stream.getAudioTracks() : [];
  };
  // 屏幕画面&系统声音
  let desktopStream = await navigator.mediaDevices.getDisplayMedia({ video:true, audio: true });
  // 麦克风声音
  let voiceStream = await navigator.mediaDevices.getUserMedia({ video: false, audio: true });
  const tracks = [
   ...desktopStream.getVideoTracks(), 
   ...mergeAudioStreams(desktopStream, voiceStream)
  ];
  // TODO: 生成视频文件

Answer 2

不知道您这个问题解决了吗？

Answer 3

const { remote } = require('electron');

......

stream = await navigator.mediaDevices.getUserMedia({
        // 桌面的声音
        audio: {
          mandatory: {
            chromeMediaSource: 'desktop',
          }
        },
        // 获取指定窗口视频
        video: {
          mandatory: {
            chromeMediaSource: 'desktop',
            chromeMediaSourceId: remote.getCurrentWindow().getMediaSourceId(),
          }
        }
      })

      // 使用Web Audio API来捕获系统声音和麦克风声音，将它们合并到同一个MediaStream中。
      const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
      const systemSoundSource = audioCtx.createMediaStreamSource(stream);
      const systemSoundDestination = audioCtx.createMediaStreamDestination();
      systemSoundSource.connect(systemSoundDestination);
      
      const micStream = await navigator.mediaDevices.getUserMedia({ audio: true });
      const micSoundSource = audioCtx.createMediaStreamSource(micStream);
      micSoundSource.connect(systemSoundDestination);

      // 合并音频流与视频流
      const combinedSource = new MediaStream([...stream.getVideoTracks(), ...systemSoundDestination.stream.getAudioTracks()]);
      //开始录制
         recorder = new MediaRecorder(combinedSource, {
            mimeType: 'video/webm;codecs=vp9,opus',
            videoBitsPerSecond: 1.5e6,
          })
......

实测可以哦！