Screen Recorder: recording microphone and the desktop audio at the same time

私は世界で最もシンプルなスクリーンレコーディングソフトウェアを構築することを目標としており、この2か月間、プロジェクトについてゆっくりとうろついています(本当に遅いということです)。

以前の投稿では、すべての入力ソースからのストリームをscreen recording and a voice overlayてWORDS0を取得しscreen recording and a voice overlayた。しかし、フラストレーションの1つの領域は、デスクトップからオーディオを取得する方法と、スピーカーからのオーディオをオーバーレイする方法を見つけることができなかったことです。私は最終的にそれを行う方法を考え出した。

まず、ChromeのgetDisplayMediaでオーディオキャプチャが可能になりました。機能呼び出しでaudio: trueを指定できなかったという点で、仕様に奇妙な見落としがあるようです。

const audio = audioToggle.checked || false;
desktopStream = await navigator.mediaDevices.getDisplayMedia({ video:true, audio: audio });

第二に、もともとオーディオストリームに2つのトラックを作成することで、必要なものを取得できると考えていましたが、ChromeのMediaRecorder APIは1つのトラックしか出力できないこと、そして2つ目は、とにかく機能しなかったことを学びました一度に1つしか再生できないという点で、DVDの複数のオーディオトラックに似ています。

解決策はおそらく多くの人にとっては簡単ですが、私にとっては新しいものでした:Web Audioを使用します。

WebAudio APIには、問題を解決するために必要なAPIであるcreateMediaStreamSourcecreateMediaStreamDestinationがあります。 createMediaStreamSourceは、デスクトップオーディオとマイクからストリームをcreateMediaStreamSourceできます。この2つをcreateMediaStreamDestinationで作成されたオブジェクトに接続することにより、この1つのストリームをMediaRecorder APIにパイプすることがMediaRecorderます。

const mergeAudioStreams = (desktopStream, voiceStream) => {
  const context = new AudioContext();
    
  // Create a couple of sources
  const source1 = context.createMediaStreamSource(desktopStream);
  const source2 = context.createMediaStreamSource(voiceStream);
  const destination = context.createMediaStreamDestination();
  
  const desktopGain = context.createGain();
  const voiceGain = context.createGain();
    
  desktopGain.gain.value = 0.7;
  voiceGain.gain.value = 0.7;
   
  source1.connect(desktopGain).connect(destination);
  // Connect source2
  source2.connect(voiceGain).connect(destination);
    
  return destination.stream.getAudioTracks();
};

シンプル。

完全なコードはmy glitchにあり、デモはhttps://screen-record-voice.glitch.me/にあります。

{{<fast-youtube oGIdqcMFKlA>}}

About Me: Paul Kinlan

I lead the Chrome Developer Relations team at Google.

We want people to have the best experience possible on the web without having to install a native app or produce content in a walled garden.

Our team tries to make it easier for developers to build on the web by supporting every Chrome release, creating great content to support developers on web.dev, contributing to MDN, helping to improve browser compatibility, and some of the best developer tools like Lighthouse, Workbox, Squoosh to name just a few.