navigator.mediaDevices.getUserMedia issue on iphone

[RuslanDashtoyan]

import { RefObject, useMemo, useState } from "react";
import { useZxing } from "react-zxing";

import Typography from "@/components/Typography";
import { cn } from "@/utils";

export const useQrScanner = () => {
    const [qrValue, setQrValue] = useState<string>("");
    const [active, setActive] = useState<boolean>(false);

    const { ref: scannerRef } = useZxing({
        onDecodeResult(result) {
            setQrValue(result.getText());
            setActive(false);
        },
        onError: (err) => {
            console.log(err);
        },
        onDecodeError: (err) => {
            console.log(err);
        },
        paused: !active,
    });

    const QrScanner = useMemo(() => {
        return active ? (
            <div
                className={cn(
                    "fixed top-0 left-0 z-999",
                    "flex items-center justify-center",
                    "w-full h-full bg-dark/70"
                )}
            >
                <div
                    className={cn(
                        "flex flex-col items-center justify-center",
                        "bg-dark px-5 py-5 rounded-lg w-80 border-2 border-gray gap-4"
                    )}
                >
                    <Typography variant="text-lg" color="text-white_brand">
                        Scan QR Code
                    </Typography>

                    <video
                        ref={scannerRef as RefObject<HTMLVideoElement>}
                        className={cn("border-2 border-red rounded-se")}
                    />

                    <button onClick={() => setActive(false)} className="mt-4 text-white hover:underline">
                        Cancel
                    </button>
                </div>
            </div>
        ) : null;
    }, [active, scannerRef]);

    return { QrScanner, qrValue, active, setActive, setQrValue };
};

Works perfect on web , even on macbook, except of iphone.