muaz-khan / RecordRTC

RecordRTC is WebRTC JavaScript library for audio/video as well as screen activity recording. It supports Chrome, Firefox, Opera, Android, and Microsoft Edge. Platforms: Linux, Mac and Windows.
https://www.webrtc-experiment.com/RecordRTC/
MIT License
6.52k stars 1.75k forks source link

Looking for a simple way to use recordRTC in React #707

Open liadbelad opened 3 years ago

liadbelad commented 3 years ago

Hello everyone ! I am fairly new to this awesome libary I try to implement the things here using React.js I looked at this repo https://github.com/szwang/recordrtc-react/blob/master/src/RecordPage.react.js

Unfortunatly, I couldn't figure myself how to make it an audio recording component instead of a video I am trying to record one wav file with 44100 sample rate , mono, 16bit so I can send it to a server

https://danielstorey.github.io/webrtc-audio-recording/ I used this as it successfully working on my local host but isn't working on production and no changes was made Also, the code is very VERY long here

I will appricate any help as I am stuck on this issue for almost a week !

Thank you !

kauly commented 3 years ago

Just make a funcation that return a RecordRTC instance and store it in your state

const getAudioRecord = async () => {
  if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
    throw new Error('Habilite o audio ou não suportado');
  }
  try {
    const userMicStream = await navigator.mediaDevices.getUserMedia({
      audio: {
        echoCancellation: true,
      },
    });

    const options = {
      type: 'audio',
      numberOfAudioChannels: 2,
      checkForInactiveTracks: true,
      sampleRate: 44100,
      bufferSize: 4096,
      audioBitsPerSecond: 210000,
      // use StereoAudioRecorder for get a .wav
      recorderType: StereoAudioRecorder,
    };
    const recorder = RecordRTC(userMicStream, options);

    return recorder;
  } catch (err) {
    throw err;
  }
};