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

Paul Kinlan May 13 2019

Available in: English(Original), Español, Français, 日本語, मानक हिन्दी, русский язык, tiếng Việt, தமிழ், bahasa Indonesia, తెలుగు, Português

Ich habe mir zum Ziel gesetzt, die einfachste Bildschirmaufzeichnungssoftware der Welt zu entwickeln, und habe mich in den letzten Monaten langsam mit dem Projekt beschäftigt (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 es nicht möglich war, audio: true im Funktionsaufruf anzugeben. audio: true 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 Leute 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();
};