react-audio-recorder icon indicating copy to clipboard operation
react-audio-recorder copied to clipboard

Safari support

Open juliandierker opened this issue 1 year ago • 2 comments

is there any support for Safari < v17 ? atm this recorder only supports webm and this makes it unusable for safari users which are not on the latest > 17 version. could you please make it downwards compatible or allow to use mp3 as file format?

juliandierker avatar Oct 13 '23 09:10 juliandierker

I am having the same issue.

TijlDeclerckWd avatar Nov 29 '23 04:11 TijlDeclerckWd

I needed this to work on Safari for iPhone so had to fork the code and make the adjustments myself:

const startRecording: () => void = useCallback(() => {
    if (timerInterval != null) return;

    navigator.mediaDevices
      .getUserMedia({ audio: audioTrackConstraints ?? true })
      .then((stream) => {
        setIsRecording(true);
        const recorder: MediaRecorder = new MediaRecorder(
          stream,
            **{...mediaRecorderOptions, mimeType: "audio/mp4"}**
        );
        setMediaRecorder(recorder);
        recorder.start();
        _startTimer();

        recorder.addEventListener("dataavailable", (event) => {
          setRecordingBlob(event.data);
          recorder.stream.getTracks().forEach((t) => t.stop());
          setMediaRecorder(undefined);
        });
      })
      .catch((err: DOMException) => {
        console.log(err.name, err.message, err.cause);
        onNotAllowedOrFound?.(err);
      });
  }, [
    timerInterval,
    setIsRecording,
    setMediaRecorder,
    _startTimer,
    setRecordingBlob,
    onNotAllowedOrFound,
    mediaRecorderOptions,
  ]);

Explicitly setting the mediaRecorderOptions to use mimeType: "audio/mp4" seems to do the trick

bhurghundii avatar Sep 04 '24 19:09 bhurghundii