Compatibility - [iOS >17] [Safari Chrome] - Cannot start camera

[alexnguyenth]

Working fine on android and macOS but cannot on iOS 17

 const handleStartCamera = useCallback(() => {
    setMode('camera')
    setIsScanning(true)

    cameraRef.current = new Html5Qrcode('reader')
    cameraRef.current.start(
      { facingMode: cameraEnv },
      {
        fps: 10,
        qrbox: { width: 250, height: 250 },
      },
      onScanSuccess,
      onScanError,
    )
  }, [cameraEnv, onScanError, onScanSuccess])

const handleSwitchCamera = useCallback(() => {
    Html5Qrcode.getCameras().then((cameras) => {
      if (cameras.length < 2) {
        return
      }

      if (cameraRef.current) {
        setCameraEnv((prev) =>
          prev === 'environment' ? 'user' : 'environment',
        )

        cameraRef.current.stop().then(() => {
          handleStartCamera()
        })
      }
    })
  }, [handleStartCamera])

The element in Html5Qrcode instance created but canvasElement didn't create.