Work around for iOS main Camera compatibility issue

Author: natsukiai

package.json

@@ -104,7 +104,8 @@
     "react-native-webview": "^11.17.2",
     "react-redux": "^7.2.6",
     "react-responsive": "^9.0.0-beta.6",
-    "release-it": "^14.12.5",
+    "react-webcam": "^7.0.0",
+    "release-it": "^14.13.1",
     "screenfull": "^5.2.0",
     "webrtc-adapter": "^8.1.1",
     "yup": "^0.32.11"

packages/camera/package.json

@@ -49,6 +49,7 @@
     "react-native-canvas": "^0.1.38",
     "react-native-svg": "^12.1.1",
     "react-responsive": "^9.0.0-beta.6",
+    "react-webcam": "^7.0.0",
     "screenfull": "^5.2.0",
     "webrtc-adapter": "^8.1.1"
   },

packages/camera/src/components/Camera/index.js

@@ -4,9 +4,9 @@ import PropTypes from 'prop-types';
 
 import { Text, useWindowDimensions, View } from 'react-native';
 import { utils } from '@monkvision/toolkit';
+import Webcam from 'react-webcam';
 
 import { findDevices, findBestCandidate, setVideoSource } from './utils';
-import getOS from '../../utils/getOS';
 import styles from './styles';
 
 const { getSize } = utils.styles;
@@ -20,7 +20,6 @@ const Video = React.forwardRef(
 
 const Camera = ({ children, containerStyle, onCameraReady, title }, ref) => {
   const videoRef = useRef();
-  const expoCameraRef = useRef();
   const windowDimensions = useWindowDimensions();
 
   const [camera, setCamera] = useState({
@@ -29,6 +28,7 @@ const Camera = ({ children, containerStyle, onCameraReady, title }, ref) => {
     height: 0,
     ratio: '4:3',
     pictureSize: '',
+    constraints: {},
   });
 
   const [loading, setLoading] = useState(false);
@@ -41,9 +41,15 @@ const Camera = ({ children, containerStyle, onCameraReady, title }, ref) => {
   useImperativeHandle(ref, () => ({
     async takePicture() {
       if (!videoRef.current) { throw new Error('Camera is not ready!'); }
+
+      if (utils.getOS() === 'iOS') {
+        const uri = videoRef.current.getScreenshot();
+        return { uri };
+      }
+
       const { width, height, stream } = camera;
 
-      if (ImageCapture && getOS() !== 'ios') {
+      if (ImageCapture && utils.getOS() !== 'iOS') {
         const track = stream.getVideoTracks()[0];
         const imageCapture = new ImageCapture(track);
 
@@ -64,7 +70,7 @@ const Camera = ({ children, containerStyle, onCameraReady, title }, ref) => {
       canvas.getContext('2d')
         .drawImage(videoRef.current, 0, 0, width, height);
 
-      const imageType = utils.getOS() === 'ios' ? 'image/png' : 'image/webp';
+      const imageType = utils.getOS() === 'iOS' ? 'image/png' : 'image/webp';
       const uri = canvas.toDataURL(imageType);
 
       return { uri };
@@ -90,7 +96,9 @@ const Camera = ({ children, containerStyle, onCameraReady, title }, ref) => {
         const devices = await findDevices();
         const bestCandidate = await findBestCandidate(devices);
 
-        setVideoSource(videoRef.current, bestCandidate.stream);
+        if (utils.getOS() !== 'iOS') {
+          setVideoSource(videoRef.current, bestCandidate.stream);
+        }
 
         setCamera(bestCandidate);
         setLoading(false);
@@ -106,13 +114,27 @@ const Camera = ({ children, containerStyle, onCameraReady, title }, ref) => {
       accessibilityLabel="Camera container"
       style={[styles.container, containerStyle]}
     >
-      {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
-      <Video
-        autoPlay
-        playsInline
-        ref={videoRef}
-        {...videoSize}
-      />
+
+      {utils.getOS() === 'iOS' ? (
+        <Webcam
+          ref={videoRef}
+          screenshotQuality={1}
+          videoConstraints={camera.constraints.video}
+          audioConstraints={camera.constraints.audio}
+          minScreenshotHeight={camera.height}
+          minScreenshotWidth={camera.width}
+          style={videoSize}
+          {...videoSize}
+        />
+      ) : (
+        /* eslint-disable-next-line jsx-a11y/media-has-caption */
+        <Video
+          autoPlay
+          playsInline
+          ref={videoRef}
+          {...videoSize}
+        />
+      )}
       {children}
       <Text style={styles.title}>{title}</Text>
     </View>

packages/camera/src/components/Camera/utils.js

@@ -2,16 +2,6 @@ import 'webrtc-adapter';
 import { utils } from '@monkvision/toolkit';
 
 export const whitelist = [{
-  label: '4K(UHD) 4:3',
-  width: 3840,
-  height: 2880,
-  ratio: '4:3',
-}, {
-  label: '4K(UHD) 16:9',
-  width: 3840,
-  height: 2160,
-  ratio: '16:9',
-}, {
   label: 'FHD 4:3',
   width: 1920,
   height: 1440,
@@ -41,26 +31,6 @@ export const whitelist = [{
   width: 640,
   height: 480,
   ratio: '4:3',
-}, {
-  label: 'CIF',
-  width: 352,
-  height: 288,
-  ratio: '4:3',
-}, {
-  label: 'QVGA',
-  width: 320,
-  height: 240,
-  ratio: '4:3',
-}, {
-  label: 'QCIF',
-  width: 176,
-  height: 144,
-  ratio: '4:3',
-}, {
-  label: 'QQVGA',
-  width: 160,
-  height: 120,
-  ratio: '4:3',
 }];
 
 export function captureImageContext(video, { width, height }) {

packages/camera/src/components/Controls/index.js

@@ -85,9 +85,9 @@ Controls.propTypes = {
     onPress: PropTypes.func,
   })),
   enableComplianceCheck: PropTypes.bool,
+  loading: PropTypes.bool,
   onFinishUploadPicture: PropTypes.func,
   onStartUploadPicture: PropTypes.func,
-  loading: PropTypes.bool,
   state: PropTypes.shape({
     settings: PropTypes.objectOf(PropTypes.any),
     sights: PropTypes.objectOf(PropTypes.any),

src/screens/InspectionCreate/index.js

@@ -1,14 +1,18 @@
 import React, { useCallback, useState } from 'react';
-import { SafeAreaView } from 'react-native';
+import { SafeAreaView, StyleSheet } from 'react-native';
 
 import useScreen from 'screens/InspectionCreate/useScreen';
 
 import { Capture, Controls, Constants, useUploads } from '@monkvision/camera';
 
+const styles = StyleSheet.create({
+  safeArea: { backgroundColor: '#000' },
+});
+
 export default () => {
   const { request, isLoading, requestCount: updateTaskRequestCount, inspectionId } = useScreen();
 
-  const [cameraloading, setCameraLoading] = useState();
+  const [cameraLoading, setCameraLoading] = useState();
 
   // start the damage detection task
   const handleSuccess = useCallback(() => { if (updateTaskRequestCount === 0) { request(); } },
@@ -17,7 +21,7 @@ export default () => {
   const uploads = useUploads({ sightIds: Constants.defaultSightIds });
 
   const controls = [{
-    disabled: cameraloading,
+    disabled: cameraLoading,
     ...Controls.CaptureButtonProps,
 
     /** --- With custom capture handler ---
@@ -26,12 +30,12 @@ export default () => {
   }];
 
   return (
-    <SafeAreaView>
+    <SafeAreaView style={styles.safeArea}>
       <Capture
         sightIds={Constants.defaultSightIds}
         inspectionId={inspectionId}
         controls={controls}
-        loading={cameraloading}
+        loading={cameraLoading}
         uploads={uploads}
         isSubmitting={isLoading}
         enableComplianceCheck

yarn.lock

@@ -11631,6 +11631,11 @@ react-test-renderer@^17.0.2, react-test-renderer@~17.0.1:
     react-shallow-renderer "^16.13.1"
     scheduler "^0.20.2"
 
+react-webcam@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/react-webcam/-/react-webcam-7.0.0.tgz#11635a771d876d897dc54e642c758c0f6ba4987b"
+  integrity sha512-HKFiYyLhSCQCUYilzhgkJlDrUCxN60kB97i5OLSjjJ5HJyVQVkEsp8rAFyZZDiZK2fRauvUmaZHac94U4OhVhg==
+
 [email protected]:
   version "17.0.1"
   resolved "https://registry.yarnpkg.com/react/-/react-17.0.1.tgz#6e0600416bd57574e3f86d92edba3d9008726127"
@@ -11876,10 +11881,10 @@ release-it@*, release-it@^14.11.5:
     yaml "1.10.2"
     yargs-parser "20.2.9"
 
-release-it@^14.12.5:
-  version "14.12.5"
-  resolved "https://registry.yarnpkg.com/release-it/-/release-it-14.12.5.tgz#aaf9802545717f299e14d1dbf025afa7bf956668"
-  integrity sha512-mGFbbX8eEKMOhfjq5mZAgGppT8CME1T+vj6xA5tAPYSCuPpcNEDjqiG1tJfPy/XImZI4uS3U6pNP5KyDpy9etg==
+release-it@^14.13.1:
+  version "14.13.1"
+  resolved "https://registry.yarnpkg.com/release-it/-/release-it-14.13.1.tgz#d87bb2dc488904ea0d39eddf0b354081c645381f"
+  integrity sha512-mrng5bqZDFMr/7oCH3kuflwjKpKki4dUp6yYGxs20scYCvvd8rHAI5pdQOJHwI5BKHAC/pad0UjAEycMWQnEIw==
   dependencies:
     "@iarna/toml" "2.2.5"
     "@octokit/rest" "18.12.0"
@@ -11907,6 +11912,7 @@ release-it@^14.12.5:
     update-notifier "5.1.0"
     url-join "4.0.1"
     uuid "8.3.2"
+    wildcard-match "5.1.2"
     yaml "1.10.2"
     yargs-parser "20.2.9"
 
@@ -13908,6 +13914,11 @@ widest-line@^3.1.0:
   dependencies:
     string-width "^4.0.0"
 
+[email protected]:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/wildcard-match/-/wildcard-match-5.1.2.tgz#66b438001391674d8599b45da051e0bd9f33cd2a"
+  integrity sha512-qNXwI591Z88c8bWxp+yjV60Ch4F8Riawe3iGxbzquhy8Xs9m+0+SLFBGb/0yCTIDElawtaImC37fYZ+dr32KqQ==
+
 windows-release@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/windows-release/-/windows-release-4.0.0.tgz#4725ec70217d1bf6e02c7772413b29cdde9ec377"