@ekyc_qoobiss/qbs-ect-cmp 3.6.74 → 3.6.75

package/dist/cjs/agreement-check_18.cjs.entry.js

@@ -4388,6 +4388,71 @@ var Browser;
   Browser["Unknown"] = "unknown";
 })(Browser || (Browser = {}));
 
+// Unique ID creation requires a high quality random # generator. In the browser we therefore
+// require the crypto API and do not support built-in fallback to lower quality random number
+// generators (like Math.random()).
+let getRandomValues;
+const rnds8 = new Uint8Array(16);
+function rng() {
+  // lazy load so that environments that need to polyfill have a chance to do so
+  if (!getRandomValues) {
+    // getRandomValues needs to be invoked in a context where "this" is a Crypto implementation.
+    getRandomValues = typeof crypto !== 'undefined' && crypto.getRandomValues && crypto.getRandomValues.bind(crypto);
+
+    if (!getRandomValues) {
+      throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported');
+    }
+  }
+
+  return getRandomValues(rnds8);
+}
+
+/**
+ * Convert array of 16 byte values to UUID string format of the form:
+ * XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX
+ */
+
+const byteToHex = [];
+
+for (let i = 0; i < 256; ++i) {
+  byteToHex.push((i + 0x100).toString(16).slice(1));
+}
+
+function unsafeStringify(arr, offset = 0) {
+  // Note: Be careful editing this code!  It's been tuned for performance
+  // and works in ways you may not expect. See https://github.com/uuidjs/uuid/pull/434
+  return (byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + '-' + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + '-' + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + '-' + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + '-' + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]]).toLowerCase();
+}
+
+const randomUUID = typeof crypto !== 'undefined' && crypto.randomUUID && crypto.randomUUID.bind(crypto);
+const native = {
+  randomUUID
+};
+
+function v4(options, buf, offset) {
+  if (native.randomUUID && !buf && !options) {
+    return native.randomUUID();
+  }
+
+  options = options || {};
+  const rnds = options.random || (options.rng || rng)(); // Per 4.4, set bits for version and `clock_seq_hi_and_reserved`
+
+  rnds[6] = rnds[6] & 0x0f | 0x40;
+  rnds[8] = rnds[8] & 0x3f | 0x80; // Copy bytes to buffer, if provided
+
+  if (buf) {
+    offset = offset || 0;
+
+    for (let i = 0; i < 16; ++i) {
+      buf[offset + i] = rnds[i];
+    }
+
+    return buf;
+  }
+
+  return unsafeStringify(rnds);
+}
+
 var ImageFormat;
 (function (ImageFormat) {
   ImageFormat["JPEG"] = "image/jpeg";
@@ -4419,10 +4484,11 @@ class Stream {
   }
   constructor(mode) {
     this.streamPaused = false;
+    this.guid = v4();
     this.recordedChunks = [];
     this.videoSize = { width: 0, height: 0 };
     if (TranslationUtils.state.debug)
-      console.log('stream | constructor');
+      console.log(`stream ${this.guid} | constructor`);
     this.initFacePose();
     this.idML5Detector = IDML5Detector.getInstance(this, TranslationUtils.state.device.isMobile);
     this.faceML5Detector = FaceML5Detector.getInstance(this, TranslationUtils.state.device.isMobile);
@@ -4432,25 +4498,25 @@ class Stream {
     if (TranslationUtils.state.debug)
       console.log('stream | getNewInstance');
     if (!Stream.instance) {
-      if (TranslationUtils.state.debug)
-        console.log('stream | getNewInstance | new instance');
       Stream.instance = new Stream(mode);
+      if (TranslationUtils.state.debug)
+        console.log(`stream ${Stream.instance.guid} | getNewInstance | new instance`);
     }
     return Stream.instance;
   }
   autoCapturing() {
     if (TranslationUtils.state.debug)
-      console.log('stream | autoCapturing');
+      console.log(`stream ${this.guid} | autoCapturing`);
     this.callbackAutoCapturing();
   }
   timeElapsed() {
     if (TranslationUtils.state.debug)
-      console.log('stream | timeElapsed');
+      console.log(`stream ${this.guid} | timeElapsed`);
     this.callbackTimeElapsed();
   }
   verificationReady() {
     if (TranslationUtils.state.debug)
-      console.log('stream | verificationReady');
+      console.log(`stream ${this.guid} | verificationReady`);
     this.verificationFinished();
   }
   updateHtmlElements(videoElement, canvasElement, component) {
@@ -4461,7 +4527,7 @@ class Stream {
   }
   startStream(stream) {
     if (TranslationUtils.state.debug)
-      console.log('stream | startStream');
+      console.log(`stream ${this.guid} | startStream`);
     if (this.stream)
       this.stream.getTracks().forEach((track) => track.stop());
     this.stream = stream;
@@ -4494,7 +4560,7 @@ class Stream {
   }
   recordStream() {
     if (TranslationUtils.state.debug)
-      console.log('stream | recordStream');
+      console.log(`stream ${this.guid} | recordStream`);
     if (this.mediaRecorder && this.mediaRecorder.state == 'recording')
       return;
     var options = { mimeType: Stream.webmMimeType.mime, videoBitsPerSecond: 1500000 };
@@ -4506,12 +4572,12 @@ class Stream {
     this.mediaRecorder = new MediaRecorder(this.stream, options);
     this.mediaRecorder.ondataavailable = event => {
       if (TranslationUtils.state.debug)
-        console.log('stream | recordStream | ondataavailable');
+        console.log(`stream ${this.guid} | recordStream | ondataavailable`);
       this.recordedChunks.push(event.data);
     };
     this.mediaRecorder.onstop = _e => {
       if (TranslationUtils.state.debug)
-        console.log('stream | recordStream | onstop');
+        console.log(`stream ${this.guid} | recordStream | onstop`);
       var rec = new Blob(this.recordedChunks, {
         type: options.mimeType.split(';')[0],
       });
@@ -4543,7 +4609,7 @@ class Stream {
   }
   async takePhoto() {
     if (TranslationUtils.state.debug)
-      console.log('stream | takePhoto');
+      console.log(`stream ${this.guid} | takePhoto`);
     const canvas = document.createElement('canvas');
     canvas.style.visibility = 'hidden';
     canvas.width = this.videoElement.videoWidth;
@@ -4552,7 +4618,7 @@ class Stream {
   }
   getFrame(canvas) {
     if (TranslationUtils.state.debug)
-      console.log('stream | getFrame');
+      console.log(`stream ${this.guid} | getFrame`);
     return new Promise(resolve => {
       const context = canvas.getContext('2d');
       context.drawImage(this.videoElement, 0, 0, canvas.width, canvas.height);
@@ -4560,7 +4626,7 @@ class Stream {
         if (frame.type === ImageFormat.JPEG && !TranslationUtils.state.device.isAppleDevice) {
           try {
             if (TranslationUtils.state.debug)
-              console.log('stream | getFrame | addExifInImg');
+              console.log(`stream ${this.guid} | getFrame | addExifInImg`);
             addExifInImg(frame, this.stream.getTracks()[0], this.videoSize).then(updatedFrame => resolve(updatedFrame));
           }
           catch (e) {
@@ -4570,7 +4636,7 @@ class Stream {
         }
         else {
           if (TranslationUtils.state.debug)
-            console.log('stream | getFrame | resolve');
+            console.log(`stream ${this.guid} | getFrame | resolve`);
           resolve(frame);
         }
       }, ImageFormat.PNG, 1);
@@ -4821,10 +4887,12 @@ const HowToInfo = class {
     index.registerInstance(this, hostRef);
     this.apiErrorEvent = index.createEvent(this, "apiError", 7);
     this.loadImage = src => new Promise((resolve, reject) => {
-      this.image.onload = () => resolve(this.image);
+      this.image.onload = () => {
+        this.imageLoaded = true;
+        resolve(this.image);
+      };
       this.image.onerror = reject;
       this.image.src = src;
-      this.imageLoaded = true;
     });
     this.showVideo = undefined;
     this.topTitle = undefined;
@@ -4880,13 +4948,13 @@ const HowToInfo = class {
     this.buttonText = this.translations.HowToValues.IdButton;
   }
   render() {
-    let titleClass = 'color-white text-center';
+    let titleClass = 'color-black-2';
     let bgDemo = 'container';
     if (TranslationUtils.state.flowStatus == TranslationUtils.FlowStatus.IDBACKHOWTO) {
-      titleClass = 'color-black-2 text-center';
+      titleClass = 'color-white';
       bgDemo = 'container bg-black';
     }
-    return (index.h("div", { class: bgDemo }, index.h("div", { class: "row", hidden: TranslationUtils.state.flowStatus == TranslationUtils.FlowStatus.LIVENESSGESTUREHOWTO || this.imageLoaded == false }, index.h("div", { class: "div-ci align-center", hidden: this.showVideo }, index.h("img", { ref: el => (this.image = el) })), index.h("div", { hidden: this.showVideo == false }, index.h("video", { id: "howTo", class: "video-demo", playsinline: true, ref: el => (this.demoVideo = el) }, index.h("source", { type: "video/mp4" }))), index.h("div", { class: "text-center" }, index.h("h1", { class: titleClass }, this.topTitle), index.h("p", { class: "font-size-2", hidden: this.subTitle == '' }, this.subTitle)), index.h("div", { class: "pos-relative show-bottom" }, index.h("div", { class: "btn-buletin" }, index.h("button", { class: "main-button", disabled: !this.buttonEnabled, onClick: () => this.buttonClick(), hidden: this.showVideo == true }, this.buttonText), index.h("p", { class: "main-text font-size-18 text-right mb-0" }, this.translations.GlobalValues.FooterText))))));
+    return (index.h("div", { class: bgDemo }, index.h("div", { class: "row", hidden: this.imageLoaded == false }, index.h("div", { class: "div-ci align-center", hidden: this.showVideo }, index.h("img", { ref: el => (this.image = el) })), index.h("div", { hidden: this.showVideo == false }, index.h("video", { id: "howTo", class: "video-demo", playsinline: true, ref: el => (this.demoVideo = el) }, index.h("source", { type: "video/mp4" }))), index.h("div", { class: "text-center" }, index.h("h1", { class: titleClass }, this.topTitle), index.h("p", { class: "font-size-2", hidden: this.subTitle == '' }, this.subTitle)), index.h("div", { class: "pos-relative show-bottom" }, index.h("div", { class: "btn-buletin" }, index.h("button", { class: "main-button", disabled: !this.buttonEnabled, onClick: () => this.buttonClick(), hidden: this.showVideo == true }, this.buttonText), index.h("p", { class: "main-text font-size-18 text-right mb-0" }, this.translations.GlobalValues.FooterText))))));
   }
 };
 HowToInfo.style = howToInfoCss;
@@ -5041,6 +5109,7 @@ const IdCapture = class {
     this.eventPhotoCapture = index.createEvent(this, "photoIdCapture", 7);
     this.apiErrorEvent = index.createEvent(this, "apiError", 7);
     this.eventTimeElapsed = index.createEvent(this, "timeElapsed", 7);
+    this.guid = v4();
     this.videoStarted = undefined;
     this.cameraSize = undefined;
     this.captureTaken = undefined;
@@ -5058,7 +5127,7 @@ const IdCapture = class {
   }
   async componentWillLoad() {
     if (TranslationUtils.state.debug)
-      console.log('id-capture | componentWillLoad');
+      console.log(`id-capture ${this.guid} | componentWillLoad`);
     this.translations = await TranslationUtils.Translations.getValues();
     if (!navigator.mediaDevices) {
       this.apiErrorEvent.emit({ message: 'This browser does not support webRTC' });
@@ -5066,7 +5135,7 @@ const IdCapture = class {
   }
   initVariables() {
     if (TranslationUtils.state.debug)
-      console.log('id-capture | initVariables');
+      console.log(`id-capture ${this.guid} | initVariables`);
     if (TranslationUtils.state.flowStatus == TranslationUtils.FlowStatus.IDFRONT) {
       this.pose = IDPose.Straight;
       this.flowStep = TranslationUtils.FlowSteps.CiFrontCapture;
@@ -5088,7 +5157,7 @@ const IdCapture = class {
   }
   async componentDidLoad() {
     if (TranslationUtils.state.debug)
-      console.log('id-capture | componentDidLoad');
+      console.log(`id-capture ${this.guid} | componentDidLoad`);
     this.initVariables();
     await BaseComponent.logStep(this.flowStep, TranslationUtils.FlowMoments.Initialized);
     this.demoVideo.src = TranslationUtils.IdCaptureValues.IDPoseDemoMapping[this.pose];
@@ -5099,7 +5168,7 @@ const IdCapture = class {
   }
   async openCamera() {
     if (TranslationUtils.state.debug)
-      console.log('id-capture | openCamera');
+      console.log(`id-capture ${this.guid} | openCamera`);
     if (!TranslationUtils.state.cameraId) {
       await Cameras.InitCameras(TranslationUtils.state.device);
     }
@@ -5109,7 +5178,7 @@ const IdCapture = class {
         .getUserMedia(constraints)
         .then(stream => {
         if (TranslationUtils.state.debug)
-          console.log('id-capture | openCamera | streamObtained');
+          console.log(`id-capture ${this.guid} | openCamera | streamObtained`);
         const superStream = Stream.getNewInstance(this.verificationMode);
         superStream.initStream(stream);
       })
@@ -5121,34 +5190,34 @@ const IdCapture = class {
   }
   closeCamera() {
     if (TranslationUtils.state.debug)
-      console.log('id-capture | closeCamera');
+      console.log(`id-capture ${this.guid} | closeCamera`);
     if (Stream.instance) {
       Stream.instance.dropStream();
     }
   }
   disconnectedCallback() {
-    if (TranslationUtils.state.debug)
-      console.log('id-capture | disconnectedCallback');
     this.closeCamera();
     Stream.instance = null;
     IDML5Detector.instance = null;
     FaceML5Detector.instance = null;
+    if (TranslationUtils.state.debug)
+      console.log(`id-capture ${this.guid} | disconnectedCallback`);
   }
   async takePhoto() {
     if (TranslationUtils.state.debug)
-      console.log('id-capture | takePhoto');
+      console.log(`id-capture ${this.guid} | takePhoto`);
     if (this.captureTaken)
       return;
     this.captureTaken = true;
     if (TranslationUtils.state.debug)
-      console.log('id-capture | takePhoto | sendingPhoto');
+      console.log(`id-capture ${this.guid} | takePhoto | sendingPhoto`);
     let res = await Stream.instance.takePhoto();
     this.eventPhotoCapture.emit(res);
     await BaseComponent.logStep(this.flowStep, TranslationUtils.FlowMoments.Finalized);
   }
   async verificationFinished() {
     if (TranslationUtils.state.debug)
-      console.log('id-capture | verificationFinished');
+      console.log(`id-capture ${this.guid} | verificationFinished`);
     if (this.verified)
       return;
     this.verified = true;
@@ -5179,73 +5248,8 @@ const IdCapture = class {
 };
 IdCapture.style = idCaptureCss;
 
-// Unique ID creation requires a high quality random # generator. In the browser we therefore
-// require the crypto API and do not support built-in fallback to lower quality random number
-// generators (like Math.random()).
-let getRandomValues;
-const rnds8 = new Uint8Array(16);
-function rng() {
-  // lazy load so that environments that need to polyfill have a chance to do so
-  if (!getRandomValues) {
-    // getRandomValues needs to be invoked in a context where "this" is a Crypto implementation.
-    getRandomValues = typeof crypto !== 'undefined' && crypto.getRandomValues && crypto.getRandomValues.bind(crypto);
-
-    if (!getRandomValues) {
-      throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported');
-    }
-  }
-
-  return getRandomValues(rnds8);
-}
-
-/**
- * Convert array of 16 byte values to UUID string format of the form:
- * XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX
- */
-
-const byteToHex = [];
-
-for (let i = 0; i < 256; ++i) {
-  byteToHex.push((i + 0x100).toString(16).slice(1));
-}
-
-function unsafeStringify(arr, offset = 0) {
-  // Note: Be careful editing this code!  It's been tuned for performance
-  // and works in ways you may not expect. See https://github.com/uuidjs/uuid/pull/434
-  return (byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + '-' + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + '-' + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + '-' + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + '-' + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]]).toLowerCase();
-}
-
-const randomUUID = typeof crypto !== 'undefined' && crypto.randomUUID && crypto.randomUUID.bind(crypto);
-const native = {
-  randomUUID
-};
-
-function v4(options, buf, offset) {
-  if (native.randomUUID && !buf && !options) {
-    return native.randomUUID();
-  }
-
-  options = options || {};
-  const rnds = options.random || (options.rng || rng)(); // Per 4.4, set bits for version and `clock_seq_hi_and_reserved`
-
-  rnds[6] = rnds[6] & 0x0f | 0x40;
-  rnds[8] = rnds[8] & 0x3f | 0x80; // Copy bytes to buffer, if provided
-
-  if (buf) {
-    offset = offset || 0;
-
-    for (let i = 0; i < 16; ++i) {
-      buf[offset + i] = rnds[i];
-    }
-
-    return buf;
-  }
-
-  return unsafeStringify(rnds);
-}
-
 const name = "@ekyc_qoobiss/qbs-ect-cmp";
-const version$1 = "3.6.74";
+const version$1 = "3.6.75";
 const description = "Person Identification Component";
 const main = "./dist/index.cjs.js";
 const module$1 = "./dist/index.js";

package/dist/collection/components/common/how-to-info/how-to-info.js

@@ -11,10 +11,12 @@ import { IDPose } from '../../../libs/IDML5Detector/IDPose';
 export class HowToInfo {
   constructor() {
     this.loadImage = src => new Promise((resolve, reject) => {
-      this.image.onload = () => resolve(this.image);
+      this.image.onload = () => {
+        this.imageLoaded = true;
+        resolve(this.image);
+      };
       this.image.onerror = reject;
       this.image.src = src;
-      this.imageLoaded = true;
     });
     this.showVideo = undefined;
     this.topTitle = undefined;
@@ -70,13 +72,13 @@ export class HowToInfo {
     this.buttonText = this.translations.HowToValues.IdButton;
   }
   render() {
-    let titleClass = 'color-white text-center';
+    let titleClass = 'color-black-2';
     let bgDemo = 'container';
     if (store.flowStatus == FlowStatus.IDBACKHOWTO) {
-      titleClass = 'color-black-2 text-center';
+      titleClass = 'color-white';
       bgDemo = 'container bg-black';
     }
-    return (h("div", { class: bgDemo }, h("div", { class: "row", hidden: store.flowStatus == FlowStatus.LIVENESSGESTUREHOWTO || this.imageLoaded == false }, h("div", { class: "div-ci align-center", hidden: this.showVideo }, h("img", { ref: el => (this.image = el) })), h("div", { hidden: this.showVideo == false }, h("video", { id: "howTo", class: "video-demo", playsinline: true, ref: el => (this.demoVideo = el) }, h("source", { type: "video/mp4" }))), h("div", { class: "text-center" }, h("h1", { class: titleClass }, this.topTitle), h("p", { class: "font-size-2", hidden: this.subTitle == '' }, this.subTitle)), h("div", { class: "pos-relative show-bottom" }, h("div", { class: "btn-buletin" }, h("button", { class: "main-button", disabled: !this.buttonEnabled, onClick: () => this.buttonClick(), hidden: this.showVideo == true }, this.buttonText), h("p", { class: "main-text font-size-18 text-right mb-0" }, this.translations.GlobalValues.FooterText))))));
+    return (h("div", { class: bgDemo }, h("div", { class: "row", hidden: this.imageLoaded == false }, h("div", { class: "div-ci align-center", hidden: this.showVideo }, h("img", { ref: el => (this.image = el) })), h("div", { hidden: this.showVideo == false }, h("video", { id: "howTo", class: "video-demo", playsinline: true, ref: el => (this.demoVideo = el) }, h("source", { type: "video/mp4" }))), h("div", { class: "text-center" }, h("h1", { class: titleClass }, this.topTitle), h("p", { class: "font-size-2", hidden: this.subTitle == '' }, this.subTitle)), h("div", { class: "pos-relative show-bottom" }, h("div", { class: "btn-buletin" }, h("button", { class: "main-button", disabled: !this.buttonEnabled, onClick: () => this.buttonClick(), hidden: this.showVideo == true }, this.buttonText), h("p", { class: "main-text font-size-18 text-right mb-0" }, this.translations.GlobalValues.FooterText))))));
   }
   static get is() { return "how-to-info"; }
   static get originalStyleUrls() {

package/dist/collection/components/common/id-capture/id-capture.js

@@ -12,9 +12,11 @@ import { FlowMoments, FlowSteps } from '../../../models/FlowSteps';
 import { VerificationMode } from '../../../models/IVerificationMode';
 import { Translations } from '../../../helpers/TranslationUtils';
 import { FlowStatus } from '../../../models/FlowStatus';
+import * as uuid from 'uuid';
 // import { IDPose } from '../../libs/IDML5Detector/IDPose';
 export class IdCapture {
   constructor() {
+    this.guid = uuid.v4();
     this.videoStarted = undefined;
     this.cameraSize = undefined;
     this.captureTaken = undefined;
@@ -32,7 +34,7 @@ export class IdCapture {
   }
   async componentWillLoad() {
     if (store.debug)
-      console.log('id-capture | componentWillLoad');
+      console.log(`id-capture ${this.guid} | componentWillLoad`);
     this.translations = await Translations.getValues();
     if (!navigator.mediaDevices) {
       this.apiErrorEvent.emit({ message: 'This browser does not support webRTC' });
@@ -40,7 +42,7 @@ export class IdCapture {
   }
   initVariables() {
     if (store.debug)
-      console.log('id-capture | initVariables');
+      console.log(`id-capture ${this.guid} | initVariables`);
     if (store.flowStatus == FlowStatus.IDFRONT) {
       this.pose = IDPose.Straight;
       this.flowStep = FlowSteps.CiFrontCapture;
@@ -62,7 +64,7 @@ export class IdCapture {
   }
   async componentDidLoad() {
     if (store.debug)
-      console.log('id-capture | componentDidLoad');
+      console.log(`id-capture ${this.guid} | componentDidLoad`);
     this.initVariables();
     await BaseComponent.logStep(this.flowStep, FlowMoments.Initialized);
     this.demoVideo.src = IdCaptureValues.IDPoseDemoMapping[this.pose];
@@ -73,7 +75,7 @@ export class IdCapture {
   }
   async openCamera() {
     if (store.debug)
-      console.log('id-capture | openCamera');
+      console.log(`id-capture ${this.guid} | openCamera`);
     if (!store.cameraId) {
       await Cameras.InitCameras(store.device);
     }
@@ -83,7 +85,7 @@ export class IdCapture {
         .getUserMedia(constraints)
         .then(stream => {
         if (store.debug)
-          console.log('id-capture | openCamera | streamObtained');
+          console.log(`id-capture ${this.guid} | openCamera | streamObtained`);
         const superStream = Stream.getNewInstance(this.verificationMode);
         superStream.initStream(stream);
       })
@@ -95,34 +97,34 @@ export class IdCapture {
   }
   closeCamera() {
     if (store.debug)
-      console.log('id-capture | closeCamera');
+      console.log(`id-capture ${this.guid} | closeCamera`);
     if (Stream.instance) {
       Stream.instance.dropStream();
     }
   }
   disconnectedCallback() {
-    if (store.debug)
-      console.log('id-capture | disconnectedCallback');
     this.closeCamera();
     Stream.instance = null;
     IDML5Detector.instance = null;
     FaceML5Detector.instance = null;
+    if (store.debug)
+      console.log(`id-capture ${this.guid} | disconnectedCallback`);
   }
   async takePhoto() {
     if (store.debug)
-      console.log('id-capture | takePhoto');
+      console.log(`id-capture ${this.guid} | takePhoto`);
     if (this.captureTaken)
       return;
     this.captureTaken = true;
     if (store.debug)
-      console.log('id-capture | takePhoto | sendingPhoto');
+      console.log(`id-capture ${this.guid} | takePhoto | sendingPhoto`);
     let res = await Stream.instance.takePhoto();
     this.eventPhotoCapture.emit(res);
     await BaseComponent.logStep(this.flowStep, FlowMoments.Finalized);
   }
   async verificationFinished() {
     if (store.debug)
-      console.log('id-capture | verificationFinished');
+      console.log(`id-capture ${this.guid} | verificationFinished`);
     if (this.verified)
       return;
     this.verified = true;

package/dist/collection/helpers/Stream.js

@@ -5,6 +5,7 @@ import { FacePosePick } from '../libs/FaceML5Detector/FacePose';
 import { addExifInImg } from './security';
 import store from './store';
 import { Browser, MobileOS } from '../models/IDevice';
+import * as uuid from 'uuid';
 var ImageFormat;
 (function (ImageFormat) {
   ImageFormat["JPEG"] = "image/jpeg";
@@ -36,10 +37,11 @@ export class Stream {
   }
   constructor(mode) {
     this.streamPaused = false;
+    this.guid = uuid.v4();
     this.recordedChunks = [];
     this.videoSize = { width: 0, height: 0 };
     if (store.debug)
-      console.log('stream | constructor');
+      console.log(`stream ${this.guid} | constructor`);
     this.initFacePose();
     this.idML5Detector = IDML5Detector.getInstance(this, store.device.isMobile);
     this.faceML5Detector = FaceML5Detector.getInstance(this, store.device.isMobile);
@@ -49,25 +51,25 @@ export class Stream {
     if (store.debug)
       console.log('stream | getNewInstance');
     if (!Stream.instance) {
-      if (store.debug)
-        console.log('stream | getNewInstance | new instance');
       Stream.instance = new Stream(mode);
+      if (store.debug)
+        console.log(`stream ${Stream.instance.guid} | getNewInstance | new instance`);
     }
     return Stream.instance;
   }
   autoCapturing() {
     if (store.debug)
-      console.log('stream | autoCapturing');
+      console.log(`stream ${this.guid} | autoCapturing`);
     this.callbackAutoCapturing();
   }
   timeElapsed() {
     if (store.debug)
-      console.log('stream | timeElapsed');
+      console.log(`stream ${this.guid} | timeElapsed`);
     this.callbackTimeElapsed();
   }
   verificationReady() {
     if (store.debug)
-      console.log('stream | verificationReady');
+      console.log(`stream ${this.guid} | verificationReady`);
     this.verificationFinished();
   }
   updateHtmlElements(videoElement, canvasElement, component) {
@@ -78,7 +80,7 @@ export class Stream {
   }
   startStream(stream) {
     if (store.debug)
-      console.log('stream | startStream');
+      console.log(`stream ${this.guid} | startStream`);
     if (this.stream)
       this.stream.getTracks().forEach((track) => track.stop());
     this.stream = stream;
@@ -111,7 +113,7 @@ export class Stream {
   }
   recordStream() {
     if (store.debug)
-      console.log('stream | recordStream');
+      console.log(`stream ${this.guid} | recordStream`);
     if (this.mediaRecorder && this.mediaRecorder.state == 'recording')
       return;
     var options = { mimeType: Stream.webmMimeType.mime, videoBitsPerSecond: 1500000 };
@@ -123,12 +125,12 @@ export class Stream {
     this.mediaRecorder = new MediaRecorder(this.stream, options);
     this.mediaRecorder.ondataavailable = event => {
       if (store.debug)
-        console.log('stream | recordStream | ondataavailable');
+        console.log(`stream ${this.guid} | recordStream | ondataavailable`);
       this.recordedChunks.push(event.data);
     };
     this.mediaRecorder.onstop = _e => {
       if (store.debug)
-        console.log('stream | recordStream | onstop');
+        console.log(`stream ${this.guid} | recordStream | onstop`);
       var rec = new Blob(this.recordedChunks, {
         type: options.mimeType.split(';')[0],
       });
@@ -160,7 +162,7 @@ export class Stream {
   }
   async takePhoto() {
     if (store.debug)
-      console.log('stream | takePhoto');
+      console.log(`stream ${this.guid} | takePhoto`);
     const canvas = document.createElement('canvas');
     canvas.style.visibility = 'hidden';
     canvas.width = this.videoElement.videoWidth;
@@ -169,7 +171,7 @@ export class Stream {
   }
   getFrame(canvas) {
     if (store.debug)
-      console.log('stream | getFrame');
+      console.log(`stream ${this.guid} | getFrame`);
     return new Promise(resolve => {
       const context = canvas.getContext('2d');
       context.drawImage(this.videoElement, 0, 0, canvas.width, canvas.height);
@@ -177,7 +179,7 @@ export class Stream {
         if (frame.type === ImageFormat.JPEG && !store.device.isAppleDevice) {
           try {
             if (store.debug)
-              console.log('stream | getFrame | addExifInImg');
+              console.log(`stream ${this.guid} | getFrame | addExifInImg`);
             addExifInImg(frame, this.stream.getTracks()[0], this.videoSize).then(updatedFrame => resolve(updatedFrame));
           }
           catch (e) {
@@ -187,7 +189,7 @@ export class Stream {
         }
         else {
           if (store.debug)
-            console.log('stream | getFrame | resolve');
+            console.log(`stream ${this.guid} | getFrame | resolve`);
           resolve(frame);
         }
       }, ImageFormat.PNG, 1);