Stop button works with android device but not working with iphone

[nishadtu]

import React, { useEffect, useState } from "react";
import Webcam from "react-webcam";
import axios from 'axios';
// import {BaseUrl} from '../../utils/constant';
// import { FilePond, File, registerPlugin } from 'react-filepond'

const FACING_MODE_USER = "user";
const FACING_MODE_ENVIRONMENT = "environment";
const videoConstraints = {
  aspectRatio: 0.6666666667,
  facingMode: 'user',
  width: { min: 300 },
  height: { min: 500 },
};

const audioConstraints = {
  suppressLocalAudioPlayback: true,
  noiseSuppression: true,
  echoCancellation: true,
};



const WebcamStreamCapture = () => {
  const webcamRef = React.useRef(null);
  const mediaRecorderRef = React.useRef(null);
  const [capturing, setCapturing] = React.useState(false);
  const [recordedChunks, setRecordedChunks] = React.useState([]);
  const [videoSrc, setVideoSrc] = React.useState(null);
  const isInitialMount = React.useRef(true);
  const [facingMode, setFacingMode] = React.useState(FACING_MODE_USER);
  const [startButton, setstartButton] = useState("Start Video");
  

  useEffect(() => {
    if (isInitialMount.current) {
      isInitialMount.current = false;
    } else {
      if (!capturing) {
        // console.log('running handleDownload')
        handleDownload();
      }
    }
  }, [recordedChunks])

  const handleClick = React.useCallback(() => {
    setFacingMode(
        prevState =>
            prevState === FACING_MODE_USER
                ? FACING_MODE_ENVIRONMENT
                : FACING_MODE_USER
    );
    console.log(facingMode);
}, []);

  const handleStartCaptureClick = React.useCallback(() => {
    setCapturing(true);
    mediaRecorderRef.current = new MediaRecorder(webcamRef.current.stream, {
      mimeType: "video/webm"
    });
    mediaRecorderRef.current.addEventListener(
      "dataavailable",
      handleDataAvailable
    );

    mediaRecorderRef.current.start();
    console.log("mediaRecorderRef.current.state", mediaRecorderRef.current.state);  // "recording"

    setTimeout(() => {
      mediaRecorderRef.current.stop();
      setCapturing(false);
      setstartButton("Retake Video");
      console.log("mediaRecorderRef.current", mediaRecorderRef.current);  // "recording stop"
      console.log("mediaRecorderRef.current.state", mediaRecorderRef.current.state);  // "recording stop"
      
  }, 5000);

  }, [webcamRef, setCapturing, mediaRecorderRef]);

  const handleDataAvailable = React.useCallback(
    ({ data }) => {
      if (data.size > 0) {
        setRecordedChunks((prev) => prev.concat(data));
      }
    },
    [setRecordedChunks]
  );

  const handleStopCaptureClick = React.useCallback(() => {
    mediaRecorderRef.current.stop();
    setCapturing(false);
    setstartButton("Retake Video");
    console.log("mediaRecorderRef.current", mediaRecorderRef.current);  // "recording stop"
      console.log("mediaRecorderRef.current.state", mediaRecorderRef.current.state);  // "recording stop"
      
  }, [mediaRecorderRef, webcamRef, setCapturing]);
  const handleDownload = React.useCallback(() => {
    if (recordedChunks.length) {
      const blob = new Blob(recordedChunks, {
        type: "video/webm"
      });
      const url = URL.createObjectURL(blob);
      const video = document.getElementById("video-replay");
      video.src = url
    }
  }, [recordedChunks]);

  const handleSave = React.useCallback(() => {
    if (recordedChunks.length) {
      const blob = new Blob(recordedChunks, {
        type: "video/webm"
      });
      const url = URL.createObjectURL(blob);
      const formData = new FormData();
      var file = new File([blob], "webm");
      formData.append("file", file);
      const apiUrl = 'https://provisionevents.co.uk/2024/video-app/video.php';
      // axios.post("2024/video-app/upload/", formData);
      console.log(formData);
      const config = {
        headers: {
          'content-type': 'multipart/form-data',
        },
      };
      axios.post(apiUrl, formData, config)
      .then((response) => {
        // handle the response
        console.log(response);
        console.log("Video saved");
      })
      .catch((error) => {
        // handle errors
        console.log(error);
        console.log("video error ");
      });


    }
  }, [recordedChunks]);

  return (
    <>
      <div className="d-flex flex-column align-items-center">
        <Webcam audio={true} muted={true} ref={webcamRef} videoConstraints={{ videoConstraints, facingMode }} audioConstraints={audioConstraints} height={400} width={500} />
        <video id="video-replay" height="400" width="500" controls></video>
        <br></br>
            <button onClick={handleClick}>Switch camera</button>
            
        {capturing ? (
          <button className="btn btn-danger" onClick={handleStopCaptureClick}>Stop Capture</button>
        ) : (
          <button className="btn btn-danger" onClick={handleStartCaptureClick}>{startButton}</button>
        )}
        {recordedChunks.length > 0 && (
          <div>
            <input type="file" name="file" id="file" style={{ display : 'none'}}/>
            <button onClick={handleSave}>Upload to server</button>
          </div>
        )}
      </div>
      {/* from vilidation : */}

    </>
  );
};
export default WebcamStreamCapture

[digwa-ing]

Same problem here as well. Any idea how to fix it?
Best regards. 🤔

[JiteshVT]

@digwa-ing how did you resolved this ?