mediapipe

mediapipe copied to clipboard

System information

• Packages used for development

  1. Reactjs - v16.10.2
  2. Typescript - v4.2.4
  3. react-webcam - v7.0.1 (for capturing the image taken from a camera)
  4. mediapipe/camera_utils - v0.3.1640029074
  5. mediapipe/face_detection - v0.4.1646425229
  6. react-use-face-detection - v1.0.1 (which acts as a react hook and also a wrapper for mediapipe face detection js)

• Mobile device: All iOS Devices

• Browser and version Google Chrome, Safari on iOS

I'm implementing face detection using Reactjs on the web and for that, I'm using the Face Detection JS library. But whenever I try to open the app on iOS devices on Google Chrome and Safari, the app doesn't ask for camera permissions and also returns a blank screen

Do I need to change or implement any configurations to make it work on iOS devices? Thanks!

My Code

import Webcam from 'react-webcam';
import { CameraOptions, useFaceDetection } from 'react-use-face-detection';
import FaceDetection from '@mediapipe/face_detection';
import { Camera } from '@mediapipe/camera_utils';

const { webcamRef, boundingBox, detected, facesDetected } = useFaceDetection({
    faceDetectionOptions: {
      model: 'short',
      selfieMode: true,
    },
    faceDetection: new FaceDetection.FaceDetection({
      locateFile: file => `https://cdn.jsdelivr.net/npm/@mediapipe/face_detection/${file}`,
    }),
    camera: ({ mediaSrc, onFrame }: CameraOptions) =>
      new Camera(mediaSrc, {
        onFrame,
        width: 1280,
        height: 720,
      }),
  });
  
  
  return (
               <Flex direction="column" h="full" position="relative">
		                     <Webcam
		                      audio={false}
		                      width="100%"
		                      style={{ objectFit: 'cover', height: '500px', borderRadius: '10px' }}
		                      screenshotFormat="image/jpeg"
		                      imageSmoothing
		                      mirrored
		                      ref={webcamRef}
		                      onUserMediaError={_ => setCameraPermission(true)}
		                    >
			                        {({ getScreenshot }) => (
			                          <Flex>
			                            <Button
			                              type="button"
			                              bg="blue.400"
			                              color="white"
			                              isFullWidth={false}
			                              fontWeight="normal"
			                              marginBottom="12"
			                              marginTop="4"
			                              px="10"
			                              py="3"
			                              mx="auto"
			                              borderRadius="2xl"
			                              isDisabled={
			                                !detected ||
			                                facesDetected > 1 ||
			                                faceDetectionStatus !== FaceDetectionStatusMessage.PERFECT_FACE
			                              }
			                              _hover={{ bg: 'blue.500' }}
			                              onClick={() => {
			                                setImgSrc(getScreenshot());
			                                setCurrentStep(prev => prev + 1);
			                              }}
			                            >
				                                Capture photo
				                              </Button>
				                            </Flex>
				                          )}
		                    </Webcam>
		                    </Flex>
  )
  

Hi @suyash-bureau, Currently the camera option is unavailable in Chrome on the iOS device. MediaPipe has tested successfully on this platform mentioned in documentation.

Could you please confirm that the issue is still persisting in Safari on the iOS device?

Thank you!

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you.

Closing as stale. Please reopen if you'd like to work on this further.

Are you satisfied with the resolution of your issue? Yes No