Closed RuckieOfficial closed 2 years ago
@RuckieOfficial does the demo work for you?
What iPhone are you using? What iOS version?
@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.
If you create a CodePen of your implementation it will be easier to help you.
@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
@RuckieOfficial both your Codesandbox and application work for me.
As in, they are using the camera. But I think it might be a styling issue on mobile.
@mozmorris I think it was problem with videoConstraints. It works now. Test it on Codesandbox was good point. Thank you.
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'>
); }