fix(barcode-scanner-web): cleanup video stream

- Now, we controlling stream explicitly to make sure it disposed after use
- add `stopAdyncDecode` coll to make sure we don't have setTimeout loops

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 issue with camera, when it keep capturing video after widget is 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/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 in barcode scanner: ${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 "Error in barcode scanner: an unexpected error.";
 }
 
 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>