Hello.

I am Paul Kinlan.

A Developer Advocate for Chrome and the Open Web at Google.

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

Paul Kinlan

私は世界で最もシンプルなスクリーンレコーディングソフトウェアを構築することを目標としており、この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であるcreateMediaStreamSourceとcreateMediaStreamDestinationがあります。 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.

Read More