Won't show camera on iOS

[RuckieOfficial]

import { Fab, useMediaQuery, useTheme } from '@mui/material'; import { Box } from '@mui/system'; import React, { useState } from 'react'; import Webcam from 'react-webcam'; import AddAPhotoIcon from '@mui/icons-material/AddAPhoto'; import LoopIcon from '@mui/icons-material/Loop';

const FACING_MODE_USER = 'user'; const FACING_MODE_ENVIRONMENT = 'environment';

export default function WebcamCapture(): JSX.Element { const webcamRef: any = React.useRef(null); const [image, setImage] = useState('');

const [deviceId, setDeviceId]: any = React.useState({}); const [devices, setDevices]: any = React.useState([]);

const [facingMode, setFacingMode] = React.useState(FACING_MODE_USER);

const capture = React.useCallback(() => { const imageSrc = webcamRef.current.getScreenshot(); setImage(imageSrc); }, [webcamRef]);

const theme = useTheme();

const isMatch = useMediaQuery(theme.breakpoints.down('sm')); //const isMatch = false;

let videoConstraints: { width?: any; height?: any; facingMode?: any; deviceId?: any; } = { width: '500px', height: '500px', facingMode: FACING_MODE_USER, deviceId: deviceId, };

if (isMatch) { videoConstraints = { width: '216px', height: '384px', facingMode: FACING_MODE_USER, deviceId: deviceId, }; }

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

const handleDevices = React.useCallback( (mediaDevices) => setDevices(mediaDevices.filter(({ kind }: any) => kind === 'videoinput')), [setDevices] );

React.useEffect(() => { navigator.mediaDevices.enumerateDevices().then(handleDevices); }, [handleDevices]);

return ( <> <Box className='fabPanel' sx={{ '& > :not(style)': { m: 1 } }}> {image === '' ? ( <Fab onClick={() => capture()} color='primary' aria-label='add'>

      </Fab>
    ) : (
      <Fab onClick={() => setImage('')} color='primary' aria-label='add'>
        <LoopIcon />
      </Fab>
    )}
  </Box>
  <div className='webcam-container'>
    <div className='webcam-img'>
      {image === '' ? (
        <Webcam
          className='webcam'
          audio={false}
          ref={webcamRef}
          screenshotFormat='image/jpeg'
          videoConstraints={{
            ...videoConstraints,
            facingMode,
          }}
          screenshotQuality={1}
        />
      ) : (
        <img
          src={image}
          alt='Scan'
          style={{ width: '500px', height: 'auto' }}
        />
      )}
    </div>
    {devices.map((device: any, key: any) => (
      <button
        key={device.deviceId}
        onClick={() => setDeviceId(device.deviceId)}
      >
        {device.label || `Device ${key + 1}`}
      </button>
    ))}
    <button onClick={handleClick}>Switch camera</button>
  </div>
</>

); }

[mozmorris]

@RuckieOfficial does the demo work for you?

What iPhone are you using? What iOS version?

[RuckieOfficial]

@mozmorris iphone 7, 14.2 it works here: https://codepen.io/mozmorris/pen/KKwdOPO just fine. But I think in my app it check avaible cameras before permission is granted.

[mozmorris]

If you create a CodePen of your implementation it will be easier to help you.

[RuckieOfficial]

@mozmorris I feel dumb it work there aswell https://codesandbox.io/s/frosty-einstein-5pm4x? But I needed to removi mui stuff mby bad set up dependencies there. Or do you think it could be some sort of doain/ssl problem? https://skoda-opensensor.ys-beta.cz/Scan

[mozmorris]

@RuckieOfficial both your Codesandbox and application work for me.

[mozmorris]

As in, they are using the camera. But I think it might be a styling issue on mobile.

[RuckieOfficial]

@mozmorris I think it was problem with videoConstraints. It works now. Test it on Codesandbox was good point. Thank you.