fix: infinite loading after denying camera access

Expensify · Mar 20, 2024 · 6ad4da1 · 6ad4da1
1 parent bc89304
commit 6ad4da1
Showing 1 changed file with 33 additions and 29 deletions.
diff --git a/src/pages/iou/request/step/IOURequestStepScan/index.js b/src/pages/iou/request/step/IOURequestStepScan/index.js
@@ -93,38 +93,42 @@ function IOURequestStepScan({
             return;
         }
 
-        navigator.mediaDevices.getUserMedia({video: {facingMode: {exact: 'environment'}, zoom: {ideal: 1}}}).then((stream) => {
-            _.forEach(stream.getTracks(), (track) => track.stop());
-            // Only Safari 17+ supports zoom constraint
-            if (Browser.isMobileSafari() && stream.getTracks().length > 0) {
-                const deviceId = _.chain(stream.getTracks())
-                    .map((track) => track.getSettings())
-                    .find((setting) => setting.zoom === 1)
-                    .get('deviceId')
-                    .value();
-                if (deviceId) {
-                    setVideoConstraints({deviceId});
-                    return;
+        const defaultConstraints = {facingMode: {exact: 'environment'}};
+        navigator.mediaDevices
+            .getUserMedia({video: {facingMode: {exact: 'environment'}, zoom: {ideal: 1}}})
+            .then((stream) => {
+                _.forEach(stream.getTracks(), (track) => track.stop());
+                // Only Safari 17+ supports zoom constraint
+                if (Browser.isMobileSafari() && stream.getTracks().length > 0) {
+                    const deviceId = _.chain(stream.getTracks())
+                        .map((track) => track.getSettings())
+                        .find((setting) => setting.zoom === 1)
+                        .get('deviceId')
+                        .value();
+                    if (deviceId) {
+                        setVideoConstraints({deviceId});
+                        return;
+                    }
                 }
-            }
-            if (!navigator.mediaDevices.enumerateDevices) {
-                setVideoConstraints({facingMode: {exact: 'environment'}});
-                return;
-            }
-            navigator.mediaDevices.enumerateDevices().then((devices) => {
-                const lastBackDeviceId = _.chain(devices)
-                    .filter((item) => item.kind === 'videoinput')
-                    .last()
-                    .get('deviceId', '')
-                    .value();
-
-                if (!lastBackDeviceId) {
-                    setVideoConstraints({facingMode: {exact: 'environment'}});
+                if (!navigator.mediaDevices.enumerateDevices) {
+                    setVideoConstraints(defaultConstraints);
                     return;
                 }
-                setVideoConstraints({deviceId: lastBackDeviceId});
-            });
-        });
+                navigator.mediaDevices.enumerateDevices().then((devices) => {
+                    const lastBackDeviceId = _.chain(devices)
+                        .filter((item) => item.kind === 'videoinput')
+                        .last()
+                        .get('deviceId', '')
+                        .value();
+
+                    if (!lastBackDeviceId) {
+                        setVideoConstraints(defaultConstraints);
+                        return;
+                    }
+                    setVideoConstraints({deviceId: lastBackDeviceId});
+                });
+            })
+            .catch(() => setVideoConstraints(defaultConstraints));
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [isTabActive]);