Is there any way to record both microphone audio + chrome tab audio

[Nitin Singh]

Hi i am trying to make simple extension to record audio of any meet using mic + chrome tabcapture , i have wrote some code to do so it works good only for first few lines ,but after some time it stops to record audio 

document.getElementById('startRecording').addEventListener('click',async () => {

    var context = new AudioContext();

    try{

  chrome.tabCapture.capture({ audio: true }, async (stream) => {

    if (stream) {

        context.createMediaStreamSource(stream).connect(context.destination);

        const mic= await navigator.mediaDevices.getUserMedia({

            audio: true,

          });

         

        stream.addTrack(mic.getTracks()[0]);

   

    }

    const mic= await navigator.mediaDevices.getUserMedia({

      audio: true,

    });

   

  stream.addTrack(mic.getTracks()[0]);

 

  context.createMediaStreamSource(stream).connect(context.destination);

 

[Deco]

It's possible the AudioContext state is being suspended and/or it and the MediaStream is being collected via GC, you'll need to store them to avoid this. Also, you are duplicating an unnecessary implementation here with getting the user's microphone and adding it to the stream both inside and outside the if block, it only has to be done once.

Refactor your implementation like so:

```

let audioContext; // Keep a reference to avoid garbage collection
let finalStream; 

document.getElementById('startRecording').addEventListener('click', async () => {
  try {
    audioContext = new AudioContext();

    const mic = await navigator.mediaDevices.getUserMedia({ audio: true });

    chrome.tabCapture.capture({ audio: true }, async (stream) => {
      if (stream) {

        // Combine both streams
        finalStream = new MediaStream([...stream.getTracks(), ...mic.getTracks()]);

        const source = audioContext.createMediaStreamSource(finalStream);
        source.connect(audioContext.destination);

        if (audioContext.state === 'suspended') {
          audioContext.resume();
        }
      } else {
        console.error('Could not capture tab audio');
      }
    });
  } catch (error) {
    console.error('Error:', error);
  }
});

```

To investigate where it is going wrong.

Cheers,

Deco

  

--
You received this message because you are subscribed to the Google Groups "Chromium Extensions" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-extens...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-extensions/42dd97d9-9831-4ace-bb95-804363f4bec5n%40chromium.org.

[Nitin Singh]

i have updated popup.js , and still i am not able to capture both user mic + chrome tab audio  , 
after few seconds it give error my variables are already declared

Uncaught SyntaxError: Identifier 'userMicStream' has already been declared

let userMicStream;

let audioContext;

let finalStream

let recognition;

document.getElementById('startRecording').addEventListener('click',async () => {

   

    try{

      audioContext = new AudioContext();

      const mic = await navigator.mediaDevices.getUserMedia({ audio: true });

  chrome.tabCapture.capture({ audio: true }, async (stream) => {

    if (stream) {

      finalStream = new MediaStream([...stream.getTracks(), ...mic.getTracks()]);

      const source = audioContext.createMediaStreamSource(finalStream);

      source.connect(audioContext.destination);

      if (audioContext.state === 'suspended') {

        audioContext.resume();

      }

 

    }

    recognition = new webkitSpeechRecognition();

    recognition.lang = 'en-US';

    recognition.continuous = true;

    recognition.interimResults = true;

    recognition.onresult = function (event) {

      let finalTranscript = '';

      for (let i = event.resultIndex; i < event.results.length; ++i) {

        if (event.results[i].isFinal) {

          finalTranscript += event.results[i][0].transcript + ' ';

        }

      }

      document.getElementById('output').textContent += finalTranscript;

    };

    recognition.onerror = function (event) {

      console.error(event.error);

    };

    recognition.onend = function () {

      console.log('Recognition ended');

    };

    recognition.start();

  });

}catch(err){

    console.log(Err)

}

});

document.getElementById('stopRecording').addEventListener('click', () => {

  if (recognition) {

    recognition.stop();

  }

});