I am working on the reactjs project that is recording the microphone as well as system audios and then sending to assemblyAI for transcription, separation of audios and some other processing. So basically I am using media recorder API to records the audios. It is recording the microphone sounds ,system speaker sounds but not from online platforms like youtube, google meeting or zoom meeting etc due to the security and access issues. I want to record the sounds of users during the google meeting using my reactjs application.

So please tell me any way to records the audios from these platforms using reactjs.

Here is the code of my start recording function that is controlling all this process.

const startRecording = async () => {

try {

  setShowProcessingText(true);


  
  const microphoneStream = await navigator.mediaDevices.getUserMedia({
  audio: {
    echoCancellation: true,
    noiseSuppression: true,
    sampleRate: 44100,

  }, });
  
   
  // Get camera video stream (including audio)
  const cameraStream = await navigator.mediaDevices.getDisplayMedia({

    video: {
      mediaSource: "screen",
      cursor: "always",
    },

    audio: {
      echoCancellation: true,
      noiseSuppression: true,
      sampleRate: 44100,

    },

  });
  // Combine microphone and speaker streams
  const combinedStream = new MediaStream();

  combinedStream.addTrack(microphoneStream.getAudioTracks()[0]);
  combinedStream.addTrack(cameraStream.getVideoTracks()[0]);
  // Create MediaRecorder with the combined stream



mediaRecorder.current = new MediaRecorder(combinedStream);

  // Previous part

  mediaRecorder.current.ondataavailable = (event) => {

    if (event.data.size > 0) {
      chunks.current.push(event.data);
    }
  };

  mediaRecorder.current.onstop = async () => {

    const audioBlob = new Blob(chunks.current, { type: "video/webm" });
    try {

      const myAudios = await uploadAudioToCloudinary(audioBlob);
      console.log("myAudios:", myAudios);
      console.log("uterances", myAudios.transcriptText.utterances);
      console.log("Your Audios cloudinary url", myAudios.cloudinaryFileUrl);
      setTranscriptionResult(myAudios.transcriptText.text);
      console.log("Transcriptions", myAudios.transcriptText.text);
      const claudiourl = dispatch(AddAudio({ text: myAudios }));
      console.log("data sending to redux", claudiourl);
      console.log("Summary: ", myAudios.summary);
      const summary =  myAudios.summary;
      
      dispatch(addSummary({summary}));

      const utterances = myAudios.transcriptText.utterances;

      const speakerAUtterances = utterances.filter((utterance) => utterance.speaker === 'A');
      const speakerBUtterances = utterances.filter((utterance) => utterance.speaker === 'B' |  'UNK' );
      

      console.log('Speaker A Utterances:', speakerAUtterances.text);
      console.log('Speaker B Utterances:', speakerBUtterances.text);
   const utterancesTranscription =   dispatch(addTypesTranscriptionsFiles({ speakerAUtterances, speakerBUtterances }));
      console.log("transcriptions in meeting record",utterancesTranscription);
      
      // ... other dispatch or state updates ...
    } catch (error) {
      console.error("Error handling transcript text from cloudinary:", error);
    }
    
  };

  mediaRecorder.current.start();
  setIsRecording(true);
const isRecordingRedux =   dispatch(startRecordingRed())
 console.log("redux recording status", isRecordingRedux);
videoRef.current.srcObject = cameraStream;



  // Start recording timer
  timerRef.current = setInterval(() => {
    setRecordingTime((prevTime) => prevTime + 1);
  }, 1000);
  
  
} catch (error) {
  console.error("Error starting recording:", error);
}

};

I have tried many ways and explore many documentaions but can't find any way to records the audios from these online platfroms because of the security problems and permissions. So now I am looking forward for help if you provide any guidance about this my problem that I have stated above.

0

There are 0 best solutions below