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

Saya memiliki tujuan membangun perangkat lunak perekaman layar paling sederhana di dunia dan saya perlahan-lahan mencari-cari proyek selama beberapa bulan terakhir (maksud saya benar-benar lambat).

Dalam posting sebelumnya, saya telah mendapatkan screen recording and a voice overlay dengan screen recording and a voice overlay - screen recording and a voice overlay dengan aliran dari semua sumber input. Satu hal yang membuat frustrasi adalah saya tidak dapat menemukan cara untuk mendapatkan audio dari desktop * dan * overlay audio dari speaker. Saya akhirnya berhasil melakukannya.

Pertama, getDisplayMedia di Chrome sekarang memungkinkan penangkapan audio, sepertinya ada kekeliruan yang aneh dalam Spec karena itu tidak memungkinkan Anda untuk menentukan audio: true dalam pemanggilan fungsi, sekarang Anda bisa.

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

Kedua, saya awalnya berpikir bahwa dengan membuat dua lagu dalam aliran audio saya akan bisa mendapatkan apa yang saya inginkan, namun saya belajar bahwa API MediaRecorder Chrome hanya dapat menghasilkan satu lagu, dan ke-2, itu tidak akan berhasil karena trek seperti DVD trek audio mutliple di mana hanya satu yang dapat diputar pada satu waktu.

Solusinya mungkin sederhana bagi banyak orang, tetapi itu baru bagi saya: Gunakan Audio Web.

Ternyata WebAudio API memiliki createMediaStreamSource dan createMediaStreamDestination , keduanya merupakan API yang diperlukan untuk menyelesaikan masalah. createMediaStreamSource dapat mengambil stream dari audio desktop dan mikrofon saya, dan dengan menghubungkan keduanya bersama-sama ke objek yang dibuat oleh createMediaStreamDestination itu memberi saya kemampuan untuk menyalurkan aliran yang satu ini ke dalam MediaRecorder API.

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();
};

Sederhana.

Kode lengkap dapat ditemukan di my glitch , dan demo dapat ditemukan di sini: 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.