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

Ich habe mir zum Ziel gesetzt, die einfachste Bildschirmaufzeichnungssoftware der Welt zu entwickeln, und habe in den letzten Monaten langsam an dem Projekt herumgeschraubt (ich meine wirklich langsam).

In früheren Beiträgen hatte ich das screen recording and a voice overlay indem ich mit den Streams aus allen screen recording and a voice overlay herumgebastelt hatte. Ein Bereich der Frustration war jedoch, dass ich nicht herausfinden konnte, wie ich das Audio vom Desktop * bekommen und * das Audio vom Lautsprecher überlagern kann. Ich habe endlich herausgefunden, wie es geht.

Erstens erlaubt getDisplayMedia in Chrome jetzt die getDisplayMedia Audiodaten. Es scheint ein seltsames Versehen in der Spezifikation zu geben, dass Sie audio: true im Funktionsaufruf angeben audio: true Jetzt können Sie es.

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

Zweitens hatte ich ursprünglich gedacht, dass ich durch das Erstellen von zwei Spuren im Audiostream das bekommen würde, was ich wollte, aber ich habe erfahren, dass die MediaRecorder API von Chrome nur eine Spur MediaRecorder kann, und MediaRecorder hätte es sowieso nicht funktioniert, weil Spuren Wie bei der DVD gibt es mehrere Audiospuren, die jeweils nur von einer abgespielt werden können.

Die Lösung ist wahrscheinlich für viele Menschen einfach, aber für mich war sie neu: Verwenden Sie Web-Audio.

Es stellt sich heraus, dass die WebAudio-API über createMediaStreamSource und createMediaStreamDestination verfügt. Beide APIs werden zur Lösung des Problems benötigt. Das createMediaStreamSource kann Streams von meinem Desktop-Audio und meinem Mikrofon createMediaStreamSource Durch Verbinden der beiden Streams zu dem von createMediaStreamDestination erstellten createMediaStreamDestination kann ich diesen einen Stream in die 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();
};

Simples.

Den vollständigen Code finden Sie auf my glitch . Die Demo finden Sie hier: 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.