[WC-1337]: Fix barcode-scanner (#35)

Author: Illia Obukhau

packages/pluggableWidgets/barcode-scanner-web/CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Fixed
+
+-   We fixed an issue where the camera kept capturing after the widget was closed.
+
 ## [2.2.1] - 2022-07-27
 
 ### Fixed

packages/pluggableWidgets/barcode-scanner-web/package.json

@@ -1,7 +1,7 @@
 {
   "name": "barcode-scanner-web",
   "widgetName": "BarcodeScanner",
-  "version": "2.2.1",
+  "version": "2.2.2",
   "description": "Displays a barcode scanner",
   "copyright": "© Mendix Technology BV 2022. All rights reserved.",
   "license": "Apache-2.0",

packages/pluggableWidgets/barcode-scanner-web/src/components/__tests__/BarcodeScanner.spec.tsx

@@ -1,5 +1,5 @@
 import "@testing-library/jest-dom";
-import { render, waitFor } from "@testing-library/react";
+import { act, render, waitFor, screen } from "@testing-library/react";
 import { createElement } from "react";
 import { Dimensions } from "@mendix/pluggable-widgets-commons";
 import { NotFoundException } from "@zxing/library/cjs";
@@ -66,51 +66,14 @@ describe("Barcode scanner", () => {
     describe("shows an appropriate error to the user", () => {
         it("in the form of text when a generic error occurs", async () => {
             useReaderMock.mockImplementationOnce((args: any) => {
-                setTimeout(() => args.onError(new Error("this is unexpected error")), 100);
+                setTimeout(() => args.onError(new Error("some error message")), 100);
             });
             mockGetUserMedia(jest.fn());
 
-            const { container } = render(<BarcodeScanner class="" showMask {...dimensions} />);
-
-            await waitFor(() =>
-                expect(container).toHaveTextContent(
-                    "Error in barcode scanner: an unexpected error occurred while retrieving the camera media stream."
-                )
-            );
-        });
-
-        it("in the form of text when no device was found", async () => {
-            useReaderMock.mockImplementationOnce((args: any) => {
-                setTimeout(() => {
-                    const error = new Error("This is an error message");
-                    error.name = "NotFoundError";
-                    args.onError(error);
-                }, 100);
-            });
-
-            mockGetUserMedia(jest.fn());
-
-            const { container } = render(<BarcodeScanner class="" showMask {...dimensions} />);
-
-            await waitFor(() =>
-                expect(container).toHaveTextContent("Error in barcode scanner: no camera media devices were found.")
-            );
-        });
-
-        it("not in the form of text since that is handled by the design when the users denies access to the camera", async () => {
-            useReaderMock.mockImplementationOnce((args: any) => {
-                setTimeout(() => {
-                    const error = new Error("This is an error message");
-                    error.name = "NotAllowedError";
-                    args.onError(error);
-                }, 100);
+            await act(async () => {
+                render(<BarcodeScanner class="" showMask {...dimensions} />);
             });
-
-            mockGetUserMedia(jest.fn());
-
-            const { container } = render(<BarcodeScanner class="" showMask {...dimensions} />);
-
-            await waitFor(() => expect(container).not.toHaveTextContent(/Error in barcode scanner:/));
+            await waitFor(() => expect(screen.getByText(/some error message/i)).toBeVisible());
         });
 
         it("in the form of text when the code scanner unexpectedly fails", async () => {
@@ -122,13 +85,10 @@ describe("Barcode scanner", () => {
 
             mockGetUserMedia(jest.fn());
 
-            const { container } = render(<BarcodeScanner class="" showMask {...dimensions} />);
-
-            await waitFor(() =>
-                expect(container).toHaveTextContent(
-                    "Error in barcode scanner: an unexpected error occurred while detecting a barcode in the camera media stream."
-                )
-            );
+            await act(async () => {
+                render(<BarcodeScanner class="" showMask {...dimensions} />);
+            });
+            await waitFor(() => expect(screen.getByText(/Unable to decode from stream/i)).toBeVisible());
         });
     });
 });

packages/pluggableWidgets/barcode-scanner-web/src/hooks/useCustomErrorMessage.ts

@@ -1,27 +1,15 @@
-import { Exception } from "@zxing/library/cjs";
 import { useState, useCallback } from "react";
 
 type ErrorCb<E extends Error = Error> = (error: E) => void;
 
 type UseCustomErrorMessageHook = () => [string | null, ErrorCb];
 
 function getErrorMessage<E extends Error>(error: E): string | null {
-    // Error comes from `zxing`
-    if (error instanceof Exception) {
-        return "Error in barcode scanner: an unexpected error occurred while detecting a barcode in the camera media stream.";
+    if (error instanceof Error) {
+        return error.message;
     }
 
-    if (error.name === "NotFoundError") {
-        return "Error in barcode scanner: no camera media devices were found.";
-    }
-
-    // Ignore error if user restricted camera access
-    if (error.name === "NotAllowedError") {
-        return null;
-    }
-
-    // Anything else will be a DOMException that we show as media stream error
-    return "Error in barcode scanner: an unexpected error occurred while retrieving the camera media stream.";
+    return "Unexpected error in barcode scanner.";
 }
 
 export const useCustomErrorMessage: UseCustomErrorMessageHook = () => {

packages/pluggableWidgets/barcode-scanner-web/src/hooks/useReader.ts

@@ -1,5 +1,5 @@
 import { useEffect, useRef, RefObject } from "react";
-import { BarcodeFormat, BrowserMultiFormatReader, DecodeHintType } from "@zxing/library/cjs";
+import { BarcodeFormat, BrowserMultiFormatReader, DecodeHintType, NotFoundException } from "@zxing/library/cjs";
 import { useEventCallback } from "@mendix/pluggable-widgets-commons";
 
 const hints = new Map();
@@ -30,47 +30,48 @@ export const useReader: UseReaderHook = args => {
     const onSuccess = useEventCallback(args.onSuccess);
     const onError = useEventCallback(args.onError);
 
-    function setup(): (() => void) | void {
-        if (!videoRef.current) {
-            return;
-        }
-        let isCanceled = false;
-        let reader: BrowserMultiFormatReader | null = null;
-        const elt = videoRef.current;
+    useEffect(() => {
+        let stopped = false;
+        const reader = new BrowserMultiFormatReader(hints, 2000);
 
-        const cleanup = (): void => {
-            if (!isCanceled && reader) {
-                reader.reset();
-                reader = null;
-                isCanceled = true;
-            }
+        const stop = (): void => {
+            stopped = true;
+            reader.stopAsyncDecode();
+            reader.reset();
         };
 
-        const decodeFromReader = (): void => {
-            const fn = async (): Promise<void> => {
-                reader = new BrowserMultiFormatReader(hints, 2000);
-                try {
-                    const result = await reader.decodeOnceFromConstraints(mediaStreamConstraints, elt);
-                    onSuccess(result.getText());
-                } catch (e) {
-                    console.log(e.message);
-                    if (!isCanceled && onError) {
-                        onError(e);
+        const start = async (): Promise<void> => {
+            let stream;
+            try {
+                stream = await navigator.mediaDevices.getUserMedia(mediaStreamConstraints);
+                if (!stopped && videoRef.current) {
+                    const result = await reader.decodeOnceFromStream(stream, videoRef.current);
+                    if (!stopped) {
+                        onSuccess(result.getText());
+                    }
+                }
+            } catch (error) {
+                // Suppress not found error if widget is closed normally (eg. leaving page);
+                const isNotFound = stopped && error instanceof NotFoundException;
+                if (!isNotFound) {
+                    if (error instanceof Error) {
+                        console.error(error.message);
+                    }
+                    if (onError) {
+                        onError(error);
                     }
-                } finally {
-                    cleanup();
                 }
-            };
-            fn();
+            } finally {
+                stop();
+                stream?.getVideoTracks().forEach(track => track.stop());
+            }
         };
 
-        decodeFromReader();
-
-        return cleanup;
-    }
+        start();
 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    useEffect(setup, []);
+        return stop;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
 
     return videoRef;
 };

packages/pluggableWidgets/barcode-scanner-web/src/package.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="Barcode Scanner" version="2.2.1" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="Barcode Scanner" version="2.2.2" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="BarcodeScanner.xml" />
         </widgetFiles>