@ekyc_qoobiss/qbs-ect-cmp 3.6.74 → 3.6.76
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/agreement-check_18.cjs.entry.js +44 -49
- package/dist/collection/components/common/how-to-info/how-to-info.js +7 -5
- package/dist/collection/components/common/id-capture/id-capture.js +12 -16
- package/dist/collection/helpers/Stream.js +15 -15
- package/dist/collection/libs/IDML5Detector/IDML5Detector.js +3 -8
- package/dist/esm/agreement-check_18.entry.js +44 -49
- package/dist/qbs-ect-cmp/{p-f055f0ce.entry.js → p-1aec8825.entry.js} +1 -1
- package/dist/qbs-ect-cmp/qbs-ect-cmp.esm.js +1 -1
- package/dist/types/components/common/id-capture/id-capture.d.ts +0 -1
- package/dist/types/libs/IDML5Detector/IDML5Detector.d.ts +1 -3
- package/package.json +1 -1
|
@@ -1528,12 +1528,6 @@ const getLogMessage = (param_req_id = '', param_redirect_id = '', param_token =
|
|
|
1528
1528
|
};
|
|
1529
1529
|
};
|
|
1530
1530
|
|
|
1531
|
-
var VerificationMode;
|
|
1532
|
-
(function (VerificationMode) {
|
|
1533
|
-
VerificationMode[VerificationMode["Full"] = 0] = "Full";
|
|
1534
|
-
VerificationMode[VerificationMode["Tilt"] = 1] = "Tilt";
|
|
1535
|
-
})(VerificationMode || (VerificationMode = {}));
|
|
1536
|
-
|
|
1537
1531
|
class IDML5Detector {
|
|
1538
1532
|
static getInstance(stream, isMobile) {
|
|
1539
1533
|
if (!IDML5Detector.instance) {
|
|
@@ -1554,13 +1548,9 @@ class IDML5Detector {
|
|
|
1554
1548
|
this.canvasElement = canvasElement;
|
|
1555
1549
|
// this.component = component;
|
|
1556
1550
|
}
|
|
1557
|
-
initDetector(
|
|
1551
|
+
initDetector() {
|
|
1558
1552
|
this.initTime = Date.now();
|
|
1559
1553
|
this.continue = true;
|
|
1560
|
-
if (mode == VerificationMode.Full)
|
|
1561
|
-
this.targetedLabel = 'full';
|
|
1562
|
-
else
|
|
1563
|
-
this.targetedLabel = 'tilted';
|
|
1564
1554
|
// this.width = this.videoElement.videoWidth;
|
|
1565
1555
|
// this.height = this.videoElement.videoHeight;
|
|
1566
1556
|
this.drawFrame('white');
|
|
@@ -1588,14 +1578,14 @@ class IDML5Detector {
|
|
|
1588
1578
|
this.stream.timeElapsed();
|
|
1589
1579
|
return;
|
|
1590
1580
|
}
|
|
1591
|
-
if (results[0].label ==
|
|
1581
|
+
if (results[0].label == 'full' && results[0].confidence > 0.9 && !this.checked) {
|
|
1592
1582
|
this.checked = true;
|
|
1593
1583
|
if (TranslationUtils.state.debug)
|
|
1594
1584
|
console.log('idml5detector | gotResults | autoCapturing');
|
|
1595
1585
|
this.stream.autoCapturing();
|
|
1596
1586
|
await this.drawFrame('green');
|
|
1597
1587
|
}
|
|
1598
|
-
if (results[0].label ==
|
|
1588
|
+
if (results[0].label == 'tilted' && results[0].confidence > 0.8 && !this.checked) {
|
|
1599
1589
|
this.checked = true;
|
|
1600
1590
|
await this.drawFrame('green');
|
|
1601
1591
|
}
|
|
@@ -1719,6 +1709,12 @@ const faceWhiteSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUwIiBoZWlnaHQ9
|
|
|
1719
1709
|
|
|
1720
1710
|
const faceGreenSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUwIiBoZWlnaHQ9IjIyNC45OTk5OTk5OTk5OTk5NyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIHZlcnNpb249IjEuMSIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQogPGc+DQogIDx0aXRsZT5MYXllciAxPC90aXRsZT4NCiAgPGcgc3Ryb2tlPSJudWxsIiBpZD0iTGF5ZXIgMSI+DQogICA8cGF0aCBzdHJva2U9IiM0Y2E1ODUiIGlkPSJzdmdfMSIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgZmlsbD0ibm9uZSIgZD0ibTc0LjI3NzY1LDYuOTI3NjFjLTExLjM3NTk3LC0wLjAxNzEzIC0zMy41NjU1MSw1LjEwNDMzIC00Ni44MTMxNiwxOS40OTQ4MWMtNi43NDE0Myw3LjMyMjkyIC0xOC4xMjI2OSwyMy4wNjk2NyAtMTkuMjY3NTgsNTkuNjEzNjljLTAuNTE5MDYsMTYuNTY5MjEgNS4wNDUyNCw2MC42MjUzMyAxMC4yNDAwNiw3Ni40Njc3NWMzLjYzMTMsMTEuMDc0NjggMjcuNDgyMTUsNDMuOTMzNDkgNDQuNDkwNiw1My42ODI1MWM0LjgwNzkxLDIuNzU1NDYgMTEuMjk2NjgsMi42ODI1MSAxMi40MjI1NSwyLjY4MjUxYzEuMTg4NzYsLTAuMDg0NTcgNy4zMzAyNiwwLjA3Mjk0IDEyLjEzNzY1LC0yLjY4MjUxYzE3LjAwODQ2LC05Ljc0OTAyIDQwLjQwMjA4LC00Mi43Njg1MSA0NC40OTA2LC01My42ODI1MWM0LjQwMDM4LC0xMS43NDQ5MSAxMC43NTk2NSwtNTkuODk4NTQgMTAuMjQwMDYsLTc2LjQ2Nzc1Yy0xLjE0NDg5LC0zNi41NDQwMiAtMTIuNTI2MTUsLTUyLjI5MDc3IC0xOS4yNjc1OCwtNTkuNjEzNjljLTEzLjI0NzY1LC0xNC4zOTA0OCAtMzUuMzA2NjMsLTE5LjUyOTMzIC00Ni43NzgyNywtMTkuNDk0ODFjLTAuNzQ2ODgsMC4wMDIyMiAtMS44OTQ5NCwwIC0xLjg5NDk0LDB6IiBzdHJva2Utd2lkdGg9IjciLz4NCiAgPC9nPg0KIDwvZz4NCjwvc3ZnPg0K';
|
|
1721
1711
|
|
|
1712
|
+
var VerificationMode;
|
|
1713
|
+
(function (VerificationMode) {
|
|
1714
|
+
VerificationMode[VerificationMode["Full"] = 0] = "Full";
|
|
1715
|
+
VerificationMode[VerificationMode["Tilt"] = 1] = "Tilt";
|
|
1716
|
+
})(VerificationMode || (VerificationMode = {}));
|
|
1717
|
+
|
|
1722
1718
|
class FaceML5Detector {
|
|
1723
1719
|
static getInstance(stream, isMobile) {
|
|
1724
1720
|
if (!FaceML5Detector.instance) {
|
|
@@ -4422,7 +4418,7 @@ class Stream {
|
|
|
4422
4418
|
this.recordedChunks = [];
|
|
4423
4419
|
this.videoSize = { width: 0, height: 0 };
|
|
4424
4420
|
if (TranslationUtils.state.debug)
|
|
4425
|
-
console.log(
|
|
4421
|
+
console.log(`stream | constructor`);
|
|
4426
4422
|
this.initFacePose();
|
|
4427
4423
|
this.idML5Detector = IDML5Detector.getInstance(this, TranslationUtils.state.device.isMobile);
|
|
4428
4424
|
this.faceML5Detector = FaceML5Detector.getInstance(this, TranslationUtils.state.device.isMobile);
|
|
@@ -4432,25 +4428,25 @@ class Stream {
|
|
|
4432
4428
|
if (TranslationUtils.state.debug)
|
|
4433
4429
|
console.log('stream | getNewInstance');
|
|
4434
4430
|
if (!Stream.instance) {
|
|
4435
|
-
if (TranslationUtils.state.debug)
|
|
4436
|
-
console.log('stream | getNewInstance | new instance');
|
|
4437
4431
|
Stream.instance = new Stream(mode);
|
|
4432
|
+
if (TranslationUtils.state.debug)
|
|
4433
|
+
console.log(`stream | getNewInstance | new instance`);
|
|
4438
4434
|
}
|
|
4439
4435
|
return Stream.instance;
|
|
4440
4436
|
}
|
|
4441
4437
|
autoCapturing() {
|
|
4442
4438
|
if (TranslationUtils.state.debug)
|
|
4443
|
-
console.log(
|
|
4439
|
+
console.log(`stream | autoCapturing`);
|
|
4444
4440
|
this.callbackAutoCapturing();
|
|
4445
4441
|
}
|
|
4446
4442
|
timeElapsed() {
|
|
4447
4443
|
if (TranslationUtils.state.debug)
|
|
4448
|
-
console.log(
|
|
4444
|
+
console.log(`stream | timeElapsed`);
|
|
4449
4445
|
this.callbackTimeElapsed();
|
|
4450
4446
|
}
|
|
4451
4447
|
verificationReady() {
|
|
4452
4448
|
if (TranslationUtils.state.debug)
|
|
4453
|
-
console.log(
|
|
4449
|
+
console.log(`stream | verificationReady`);
|
|
4454
4450
|
this.verificationFinished();
|
|
4455
4451
|
}
|
|
4456
4452
|
updateHtmlElements(videoElement, canvasElement, component) {
|
|
@@ -4461,7 +4457,7 @@ class Stream {
|
|
|
4461
4457
|
}
|
|
4462
4458
|
startStream(stream) {
|
|
4463
4459
|
if (TranslationUtils.state.debug)
|
|
4464
|
-
console.log(
|
|
4460
|
+
console.log(`stream | startStream`);
|
|
4465
4461
|
if (this.stream)
|
|
4466
4462
|
this.stream.getTracks().forEach((track) => track.stop());
|
|
4467
4463
|
this.stream = stream;
|
|
@@ -4494,7 +4490,7 @@ class Stream {
|
|
|
4494
4490
|
}
|
|
4495
4491
|
recordStream() {
|
|
4496
4492
|
if (TranslationUtils.state.debug)
|
|
4497
|
-
console.log(
|
|
4493
|
+
console.log(`stream | recordStream`);
|
|
4498
4494
|
if (this.mediaRecorder && this.mediaRecorder.state == 'recording')
|
|
4499
4495
|
return;
|
|
4500
4496
|
var options = { mimeType: Stream.webmMimeType.mime, videoBitsPerSecond: 1500000 };
|
|
@@ -4506,12 +4502,12 @@ class Stream {
|
|
|
4506
4502
|
this.mediaRecorder = new MediaRecorder(this.stream, options);
|
|
4507
4503
|
this.mediaRecorder.ondataavailable = event => {
|
|
4508
4504
|
if (TranslationUtils.state.debug)
|
|
4509
|
-
console.log(
|
|
4505
|
+
console.log(`stream | recordStream | ondataavailable`);
|
|
4510
4506
|
this.recordedChunks.push(event.data);
|
|
4511
4507
|
};
|
|
4512
4508
|
this.mediaRecorder.onstop = _e => {
|
|
4513
4509
|
if (TranslationUtils.state.debug)
|
|
4514
|
-
console.log(
|
|
4510
|
+
console.log(`stream | recordStream | onstop`);
|
|
4515
4511
|
var rec = new Blob(this.recordedChunks, {
|
|
4516
4512
|
type: options.mimeType.split(';')[0],
|
|
4517
4513
|
});
|
|
@@ -4543,7 +4539,7 @@ class Stream {
|
|
|
4543
4539
|
}
|
|
4544
4540
|
async takePhoto() {
|
|
4545
4541
|
if (TranslationUtils.state.debug)
|
|
4546
|
-
console.log(
|
|
4542
|
+
console.log(`stream | takePhoto`);
|
|
4547
4543
|
const canvas = document.createElement('canvas');
|
|
4548
4544
|
canvas.style.visibility = 'hidden';
|
|
4549
4545
|
canvas.width = this.videoElement.videoWidth;
|
|
@@ -4552,7 +4548,7 @@ class Stream {
|
|
|
4552
4548
|
}
|
|
4553
4549
|
getFrame(canvas) {
|
|
4554
4550
|
if (TranslationUtils.state.debug)
|
|
4555
|
-
console.log(
|
|
4551
|
+
console.log(`stream | getFrame`);
|
|
4556
4552
|
return new Promise(resolve => {
|
|
4557
4553
|
const context = canvas.getContext('2d');
|
|
4558
4554
|
context.drawImage(this.videoElement, 0, 0, canvas.width, canvas.height);
|
|
@@ -4560,7 +4556,7 @@ class Stream {
|
|
|
4560
4556
|
if (frame.type === ImageFormat.JPEG && !TranslationUtils.state.device.isAppleDevice) {
|
|
4561
4557
|
try {
|
|
4562
4558
|
if (TranslationUtils.state.debug)
|
|
4563
|
-
console.log(
|
|
4559
|
+
console.log(`stream | getFrame | addExifInImg`);
|
|
4564
4560
|
addExifInImg(frame, this.stream.getTracks()[0], this.videoSize).then(updatedFrame => resolve(updatedFrame));
|
|
4565
4561
|
}
|
|
4566
4562
|
catch (e) {
|
|
@@ -4570,7 +4566,7 @@ class Stream {
|
|
|
4570
4566
|
}
|
|
4571
4567
|
else {
|
|
4572
4568
|
if (TranslationUtils.state.debug)
|
|
4573
|
-
console.log(
|
|
4569
|
+
console.log(`stream | getFrame | resolve`);
|
|
4574
4570
|
resolve(frame);
|
|
4575
4571
|
}
|
|
4576
4572
|
}, ImageFormat.PNG, 1);
|
|
@@ -4579,7 +4575,7 @@ class Stream {
|
|
|
4579
4575
|
async startIdDetection() {
|
|
4580
4576
|
if (this.streamPaused)
|
|
4581
4577
|
return;
|
|
4582
|
-
this.idML5Detector.initDetector(
|
|
4578
|
+
this.idML5Detector.initDetector();
|
|
4583
4579
|
}
|
|
4584
4580
|
async startFaceDetection() {
|
|
4585
4581
|
if (this.streamPaused)
|
|
@@ -4821,10 +4817,12 @@ const HowToInfo = class {
|
|
|
4821
4817
|
index.registerInstance(this, hostRef);
|
|
4822
4818
|
this.apiErrorEvent = index.createEvent(this, "apiError", 7);
|
|
4823
4819
|
this.loadImage = src => new Promise((resolve, reject) => {
|
|
4824
|
-
this.image.onload = () =>
|
|
4820
|
+
this.image.onload = () => {
|
|
4821
|
+
this.imageLoaded = true;
|
|
4822
|
+
resolve(this.image);
|
|
4823
|
+
};
|
|
4825
4824
|
this.image.onerror = reject;
|
|
4826
4825
|
this.image.src = src;
|
|
4827
|
-
this.imageLoaded = true;
|
|
4828
4826
|
});
|
|
4829
4827
|
this.showVideo = undefined;
|
|
4830
4828
|
this.topTitle = undefined;
|
|
@@ -4880,13 +4878,13 @@ const HowToInfo = class {
|
|
|
4880
4878
|
this.buttonText = this.translations.HowToValues.IdButton;
|
|
4881
4879
|
}
|
|
4882
4880
|
render() {
|
|
4883
|
-
let titleClass = 'color-
|
|
4881
|
+
let titleClass = 'color-black-2';
|
|
4884
4882
|
let bgDemo = 'container';
|
|
4885
4883
|
if (TranslationUtils.state.flowStatus == TranslationUtils.FlowStatus.IDBACKHOWTO) {
|
|
4886
|
-
titleClass = 'color-
|
|
4884
|
+
titleClass = 'color-white';
|
|
4887
4885
|
bgDemo = 'container bg-black';
|
|
4888
4886
|
}
|
|
4889
|
-
return (index.h("div", { class: bgDemo }, index.h("div", { class: "row", hidden:
|
|
4887
|
+
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))))));
|
|
4890
4888
|
}
|
|
4891
4889
|
};
|
|
4892
4890
|
HowToInfo.style = howToInfoCss;
|
|
@@ -5058,7 +5056,7 @@ const IdCapture = class {
|
|
|
5058
5056
|
}
|
|
5059
5057
|
async componentWillLoad() {
|
|
5060
5058
|
if (TranslationUtils.state.debug)
|
|
5061
|
-
console.log(
|
|
5059
|
+
console.log(`id-capture | componentWillLoad`);
|
|
5062
5060
|
this.translations = await TranslationUtils.Translations.getValues();
|
|
5063
5061
|
if (!navigator.mediaDevices) {
|
|
5064
5062
|
this.apiErrorEvent.emit({ message: 'This browser does not support webRTC' });
|
|
@@ -5066,29 +5064,26 @@ const IdCapture = class {
|
|
|
5066
5064
|
}
|
|
5067
5065
|
initVariables() {
|
|
5068
5066
|
if (TranslationUtils.state.debug)
|
|
5069
|
-
console.log(
|
|
5067
|
+
console.log(`id-capture | initVariables`);
|
|
5070
5068
|
if (TranslationUtils.state.flowStatus == TranslationUtils.FlowStatus.IDFRONT) {
|
|
5071
5069
|
this.pose = IDPose.Straight;
|
|
5072
5070
|
this.flowStep = TranslationUtils.FlowSteps.CiFrontCapture;
|
|
5073
5071
|
this.titleMesage = this.translations.IdCaptureValues.Title;
|
|
5074
|
-
this.verificationMode = VerificationMode.Full;
|
|
5075
5072
|
}
|
|
5076
5073
|
else if (TranslationUtils.state.flowStatus == TranslationUtils.FlowStatus.IDBACK) {
|
|
5077
5074
|
this.pose = IDPose.BackStraight;
|
|
5078
5075
|
this.flowStep = TranslationUtils.FlowSteps.CiBackCapture;
|
|
5079
5076
|
this.titleMesage = this.translations.IdCaptureValues.TtileRotate;
|
|
5080
|
-
this.verificationMode = VerificationMode.Full;
|
|
5081
5077
|
}
|
|
5082
5078
|
else if (TranslationUtils.state.flowStatus == TranslationUtils.FlowStatus.IDTILT) {
|
|
5083
5079
|
this.titleMesage = this.translations.IdCaptureValues.IDPoseMapping;
|
|
5084
5080
|
this.pose = IDPose.Tilted;
|
|
5085
5081
|
this.flowStep = TranslationUtils.FlowSteps.CiTilt;
|
|
5086
|
-
this.verificationMode = VerificationMode.Tilt;
|
|
5087
5082
|
}
|
|
5088
5083
|
}
|
|
5089
5084
|
async componentDidLoad() {
|
|
5090
5085
|
if (TranslationUtils.state.debug)
|
|
5091
|
-
console.log(
|
|
5086
|
+
console.log(`id-capture | componentDidLoad`);
|
|
5092
5087
|
this.initVariables();
|
|
5093
5088
|
await BaseComponent.logStep(this.flowStep, TranslationUtils.FlowMoments.Initialized);
|
|
5094
5089
|
this.demoVideo.src = TranslationUtils.IdCaptureValues.IDPoseDemoMapping[this.pose];
|
|
@@ -5099,7 +5094,7 @@ const IdCapture = class {
|
|
|
5099
5094
|
}
|
|
5100
5095
|
async openCamera() {
|
|
5101
5096
|
if (TranslationUtils.state.debug)
|
|
5102
|
-
console.log(
|
|
5097
|
+
console.log(`id-capture | openCamera`);
|
|
5103
5098
|
if (!TranslationUtils.state.cameraId) {
|
|
5104
5099
|
await Cameras.InitCameras(TranslationUtils.state.device);
|
|
5105
5100
|
}
|
|
@@ -5109,8 +5104,8 @@ const IdCapture = class {
|
|
|
5109
5104
|
.getUserMedia(constraints)
|
|
5110
5105
|
.then(stream => {
|
|
5111
5106
|
if (TranslationUtils.state.debug)
|
|
5112
|
-
console.log(
|
|
5113
|
-
const superStream = Stream.getNewInstance(
|
|
5107
|
+
console.log(`id-capture | openCamera | streamObtained`);
|
|
5108
|
+
const superStream = Stream.getNewInstance(null);
|
|
5114
5109
|
superStream.initStream(stream);
|
|
5115
5110
|
})
|
|
5116
5111
|
.catch(e => {
|
|
@@ -5121,34 +5116,34 @@ const IdCapture = class {
|
|
|
5121
5116
|
}
|
|
5122
5117
|
closeCamera() {
|
|
5123
5118
|
if (TranslationUtils.state.debug)
|
|
5124
|
-
console.log(
|
|
5119
|
+
console.log(`id-capture | closeCamera`);
|
|
5125
5120
|
if (Stream.instance) {
|
|
5126
5121
|
Stream.instance.dropStream();
|
|
5127
5122
|
}
|
|
5128
5123
|
}
|
|
5129
5124
|
disconnectedCallback() {
|
|
5130
|
-
if (TranslationUtils.state.debug)
|
|
5131
|
-
console.log('id-capture | disconnectedCallback');
|
|
5132
5125
|
this.closeCamera();
|
|
5133
5126
|
Stream.instance = null;
|
|
5134
5127
|
IDML5Detector.instance = null;
|
|
5135
5128
|
FaceML5Detector.instance = null;
|
|
5129
|
+
if (TranslationUtils.state.debug)
|
|
5130
|
+
console.log(`id-capture | disconnectedCallback`);
|
|
5136
5131
|
}
|
|
5137
5132
|
async takePhoto() {
|
|
5138
5133
|
if (TranslationUtils.state.debug)
|
|
5139
|
-
console.log(
|
|
5134
|
+
console.log(`id-capture | takePhoto`);
|
|
5140
5135
|
if (this.captureTaken)
|
|
5141
5136
|
return;
|
|
5142
5137
|
this.captureTaken = true;
|
|
5143
5138
|
if (TranslationUtils.state.debug)
|
|
5144
|
-
console.log(
|
|
5139
|
+
console.log(`id-capture | takePhoto | sendingPhoto`);
|
|
5145
5140
|
let res = await Stream.instance.takePhoto();
|
|
5146
5141
|
this.eventPhotoCapture.emit(res);
|
|
5147
5142
|
await BaseComponent.logStep(this.flowStep, TranslationUtils.FlowMoments.Finalized);
|
|
5148
5143
|
}
|
|
5149
5144
|
async verificationFinished() {
|
|
5150
5145
|
if (TranslationUtils.state.debug)
|
|
5151
|
-
console.log(
|
|
5146
|
+
console.log(`id-capture | verificationFinished`);
|
|
5152
5147
|
if (this.verified)
|
|
5153
5148
|
return;
|
|
5154
5149
|
this.verified = true;
|
|
@@ -5245,7 +5240,7 @@ function v4(options, buf, offset) {
|
|
|
5245
5240
|
}
|
|
5246
5241
|
|
|
5247
5242
|
const name = "@ekyc_qoobiss/qbs-ect-cmp";
|
|
5248
|
-
const version$1 = "3.6.
|
|
5243
|
+
const version$1 = "3.6.76";
|
|
5249
5244
|
const description = "Person Identification Component";
|
|
5250
5245
|
const main = "./dist/index.cjs.js";
|
|
5251
5246
|
const module$1 = "./dist/index.js";
|
|
@@ -11,10 +11,12 @@ import { IDPose } from '../../../libs/IDML5Detector/IDPose';
|
|
|
11
11
|
export class HowToInfo {
|
|
12
12
|
constructor() {
|
|
13
13
|
this.loadImage = src => new Promise((resolve, reject) => {
|
|
14
|
-
this.image.onload = () =>
|
|
14
|
+
this.image.onload = () => {
|
|
15
|
+
this.imageLoaded = true;
|
|
16
|
+
resolve(this.image);
|
|
17
|
+
};
|
|
15
18
|
this.image.onerror = reject;
|
|
16
19
|
this.image.src = src;
|
|
17
|
-
this.imageLoaded = true;
|
|
18
20
|
});
|
|
19
21
|
this.showVideo = undefined;
|
|
20
22
|
this.topTitle = undefined;
|
|
@@ -70,13 +72,13 @@ export class HowToInfo {
|
|
|
70
72
|
this.buttonText = this.translations.HowToValues.IdButton;
|
|
71
73
|
}
|
|
72
74
|
render() {
|
|
73
|
-
let titleClass = 'color-
|
|
75
|
+
let titleClass = 'color-black-2';
|
|
74
76
|
let bgDemo = 'container';
|
|
75
77
|
if (store.flowStatus == FlowStatus.IDBACKHOWTO) {
|
|
76
|
-
titleClass = 'color-
|
|
78
|
+
titleClass = 'color-white';
|
|
77
79
|
bgDemo = 'container bg-black';
|
|
78
80
|
}
|
|
79
|
-
return (h("div", { class: bgDemo }, h("div", { class: "row", hidden:
|
|
81
|
+
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))))));
|
|
80
82
|
}
|
|
81
83
|
static get is() { return "how-to-info"; }
|
|
82
84
|
static get originalStyleUrls() {
|
|
@@ -9,7 +9,6 @@ import { delay } from '../../../utils/utils';
|
|
|
9
9
|
import store from '../../../helpers/store';
|
|
10
10
|
import { BaseComponent } from '../../base-component';
|
|
11
11
|
import { FlowMoments, FlowSteps } from '../../../models/FlowSteps';
|
|
12
|
-
import { VerificationMode } from '../../../models/IVerificationMode';
|
|
13
12
|
import { Translations } from '../../../helpers/TranslationUtils';
|
|
14
13
|
import { FlowStatus } from '../../../models/FlowStatus';
|
|
15
14
|
// import { IDPose } from '../../libs/IDML5Detector/IDPose';
|
|
@@ -32,7 +31,7 @@ export class IdCapture {
|
|
|
32
31
|
}
|
|
33
32
|
async componentWillLoad() {
|
|
34
33
|
if (store.debug)
|
|
35
|
-
console.log(
|
|
34
|
+
console.log(`id-capture | componentWillLoad`);
|
|
36
35
|
this.translations = await Translations.getValues();
|
|
37
36
|
if (!navigator.mediaDevices) {
|
|
38
37
|
this.apiErrorEvent.emit({ message: 'This browser does not support webRTC' });
|
|
@@ -40,29 +39,26 @@ export class IdCapture {
|
|
|
40
39
|
}
|
|
41
40
|
initVariables() {
|
|
42
41
|
if (store.debug)
|
|
43
|
-
console.log(
|
|
42
|
+
console.log(`id-capture | initVariables`);
|
|
44
43
|
if (store.flowStatus == FlowStatus.IDFRONT) {
|
|
45
44
|
this.pose = IDPose.Straight;
|
|
46
45
|
this.flowStep = FlowSteps.CiFrontCapture;
|
|
47
46
|
this.titleMesage = this.translations.IdCaptureValues.Title;
|
|
48
|
-
this.verificationMode = VerificationMode.Full;
|
|
49
47
|
}
|
|
50
48
|
else if (store.flowStatus == FlowStatus.IDBACK) {
|
|
51
49
|
this.pose = IDPose.BackStraight;
|
|
52
50
|
this.flowStep = FlowSteps.CiBackCapture;
|
|
53
51
|
this.titleMesage = this.translations.IdCaptureValues.TtileRotate;
|
|
54
|
-
this.verificationMode = VerificationMode.Full;
|
|
55
52
|
}
|
|
56
53
|
else if (store.flowStatus == FlowStatus.IDTILT) {
|
|
57
54
|
this.titleMesage = this.translations.IdCaptureValues.IDPoseMapping;
|
|
58
55
|
this.pose = IDPose.Tilted;
|
|
59
56
|
this.flowStep = FlowSteps.CiTilt;
|
|
60
|
-
this.verificationMode = VerificationMode.Tilt;
|
|
61
57
|
}
|
|
62
58
|
}
|
|
63
59
|
async componentDidLoad() {
|
|
64
60
|
if (store.debug)
|
|
65
|
-
console.log(
|
|
61
|
+
console.log(`id-capture | componentDidLoad`);
|
|
66
62
|
this.initVariables();
|
|
67
63
|
await BaseComponent.logStep(this.flowStep, FlowMoments.Initialized);
|
|
68
64
|
this.demoVideo.src = IdCaptureValues.IDPoseDemoMapping[this.pose];
|
|
@@ -73,7 +69,7 @@ export class IdCapture {
|
|
|
73
69
|
}
|
|
74
70
|
async openCamera() {
|
|
75
71
|
if (store.debug)
|
|
76
|
-
console.log(
|
|
72
|
+
console.log(`id-capture | openCamera`);
|
|
77
73
|
if (!store.cameraId) {
|
|
78
74
|
await Cameras.InitCameras(store.device);
|
|
79
75
|
}
|
|
@@ -83,8 +79,8 @@ export class IdCapture {
|
|
|
83
79
|
.getUserMedia(constraints)
|
|
84
80
|
.then(stream => {
|
|
85
81
|
if (store.debug)
|
|
86
|
-
console.log(
|
|
87
|
-
const superStream = Stream.getNewInstance(
|
|
82
|
+
console.log(`id-capture | openCamera | streamObtained`);
|
|
83
|
+
const superStream = Stream.getNewInstance(null);
|
|
88
84
|
superStream.initStream(stream);
|
|
89
85
|
})
|
|
90
86
|
.catch(e => {
|
|
@@ -95,34 +91,34 @@ export class IdCapture {
|
|
|
95
91
|
}
|
|
96
92
|
closeCamera() {
|
|
97
93
|
if (store.debug)
|
|
98
|
-
console.log(
|
|
94
|
+
console.log(`id-capture | closeCamera`);
|
|
99
95
|
if (Stream.instance) {
|
|
100
96
|
Stream.instance.dropStream();
|
|
101
97
|
}
|
|
102
98
|
}
|
|
103
99
|
disconnectedCallback() {
|
|
104
|
-
if (store.debug)
|
|
105
|
-
console.log('id-capture | disconnectedCallback');
|
|
106
100
|
this.closeCamera();
|
|
107
101
|
Stream.instance = null;
|
|
108
102
|
IDML5Detector.instance = null;
|
|
109
103
|
FaceML5Detector.instance = null;
|
|
104
|
+
if (store.debug)
|
|
105
|
+
console.log(`id-capture | disconnectedCallback`);
|
|
110
106
|
}
|
|
111
107
|
async takePhoto() {
|
|
112
108
|
if (store.debug)
|
|
113
|
-
console.log(
|
|
109
|
+
console.log(`id-capture | takePhoto`);
|
|
114
110
|
if (this.captureTaken)
|
|
115
111
|
return;
|
|
116
112
|
this.captureTaken = true;
|
|
117
113
|
if (store.debug)
|
|
118
|
-
console.log(
|
|
114
|
+
console.log(`id-capture | takePhoto | sendingPhoto`);
|
|
119
115
|
let res = await Stream.instance.takePhoto();
|
|
120
116
|
this.eventPhotoCapture.emit(res);
|
|
121
117
|
await BaseComponent.logStep(this.flowStep, FlowMoments.Finalized);
|
|
122
118
|
}
|
|
123
119
|
async verificationFinished() {
|
|
124
120
|
if (store.debug)
|
|
125
|
-
console.log(
|
|
121
|
+
console.log(`id-capture | verificationFinished`);
|
|
126
122
|
if (this.verified)
|
|
127
123
|
return;
|
|
128
124
|
this.verified = true;
|
|
@@ -39,7 +39,7 @@ export class Stream {
|
|
|
39
39
|
this.recordedChunks = [];
|
|
40
40
|
this.videoSize = { width: 0, height: 0 };
|
|
41
41
|
if (store.debug)
|
|
42
|
-
console.log(
|
|
42
|
+
console.log(`stream | constructor`);
|
|
43
43
|
this.initFacePose();
|
|
44
44
|
this.idML5Detector = IDML5Detector.getInstance(this, store.device.isMobile);
|
|
45
45
|
this.faceML5Detector = FaceML5Detector.getInstance(this, store.device.isMobile);
|
|
@@ -49,25 +49,25 @@ export class Stream {
|
|
|
49
49
|
if (store.debug)
|
|
50
50
|
console.log('stream | getNewInstance');
|
|
51
51
|
if (!Stream.instance) {
|
|
52
|
-
if (store.debug)
|
|
53
|
-
console.log('stream | getNewInstance | new instance');
|
|
54
52
|
Stream.instance = new Stream(mode);
|
|
53
|
+
if (store.debug)
|
|
54
|
+
console.log(`stream | getNewInstance | new instance`);
|
|
55
55
|
}
|
|
56
56
|
return Stream.instance;
|
|
57
57
|
}
|
|
58
58
|
autoCapturing() {
|
|
59
59
|
if (store.debug)
|
|
60
|
-
console.log(
|
|
60
|
+
console.log(`stream | autoCapturing`);
|
|
61
61
|
this.callbackAutoCapturing();
|
|
62
62
|
}
|
|
63
63
|
timeElapsed() {
|
|
64
64
|
if (store.debug)
|
|
65
|
-
console.log(
|
|
65
|
+
console.log(`stream | timeElapsed`);
|
|
66
66
|
this.callbackTimeElapsed();
|
|
67
67
|
}
|
|
68
68
|
verificationReady() {
|
|
69
69
|
if (store.debug)
|
|
70
|
-
console.log(
|
|
70
|
+
console.log(`stream | verificationReady`);
|
|
71
71
|
this.verificationFinished();
|
|
72
72
|
}
|
|
73
73
|
updateHtmlElements(videoElement, canvasElement, component) {
|
|
@@ -78,7 +78,7 @@ export class Stream {
|
|
|
78
78
|
}
|
|
79
79
|
startStream(stream) {
|
|
80
80
|
if (store.debug)
|
|
81
|
-
console.log(
|
|
81
|
+
console.log(`stream | startStream`);
|
|
82
82
|
if (this.stream)
|
|
83
83
|
this.stream.getTracks().forEach((track) => track.stop());
|
|
84
84
|
this.stream = stream;
|
|
@@ -111,7 +111,7 @@ export class Stream {
|
|
|
111
111
|
}
|
|
112
112
|
recordStream() {
|
|
113
113
|
if (store.debug)
|
|
114
|
-
console.log(
|
|
114
|
+
console.log(`stream | recordStream`);
|
|
115
115
|
if (this.mediaRecorder && this.mediaRecorder.state == 'recording')
|
|
116
116
|
return;
|
|
117
117
|
var options = { mimeType: Stream.webmMimeType.mime, videoBitsPerSecond: 1500000 };
|
|
@@ -123,12 +123,12 @@ export class Stream {
|
|
|
123
123
|
this.mediaRecorder = new MediaRecorder(this.stream, options);
|
|
124
124
|
this.mediaRecorder.ondataavailable = event => {
|
|
125
125
|
if (store.debug)
|
|
126
|
-
console.log(
|
|
126
|
+
console.log(`stream | recordStream | ondataavailable`);
|
|
127
127
|
this.recordedChunks.push(event.data);
|
|
128
128
|
};
|
|
129
129
|
this.mediaRecorder.onstop = _e => {
|
|
130
130
|
if (store.debug)
|
|
131
|
-
console.log(
|
|
131
|
+
console.log(`stream | recordStream | onstop`);
|
|
132
132
|
var rec = new Blob(this.recordedChunks, {
|
|
133
133
|
type: options.mimeType.split(';')[0],
|
|
134
134
|
});
|
|
@@ -160,7 +160,7 @@ export class Stream {
|
|
|
160
160
|
}
|
|
161
161
|
async takePhoto() {
|
|
162
162
|
if (store.debug)
|
|
163
|
-
console.log(
|
|
163
|
+
console.log(`stream | takePhoto`);
|
|
164
164
|
const canvas = document.createElement('canvas');
|
|
165
165
|
canvas.style.visibility = 'hidden';
|
|
166
166
|
canvas.width = this.videoElement.videoWidth;
|
|
@@ -169,7 +169,7 @@ export class Stream {
|
|
|
169
169
|
}
|
|
170
170
|
getFrame(canvas) {
|
|
171
171
|
if (store.debug)
|
|
172
|
-
console.log(
|
|
172
|
+
console.log(`stream | getFrame`);
|
|
173
173
|
return new Promise(resolve => {
|
|
174
174
|
const context = canvas.getContext('2d');
|
|
175
175
|
context.drawImage(this.videoElement, 0, 0, canvas.width, canvas.height);
|
|
@@ -177,7 +177,7 @@ export class Stream {
|
|
|
177
177
|
if (frame.type === ImageFormat.JPEG && !store.device.isAppleDevice) {
|
|
178
178
|
try {
|
|
179
179
|
if (store.debug)
|
|
180
|
-
console.log(
|
|
180
|
+
console.log(`stream | getFrame | addExifInImg`);
|
|
181
181
|
addExifInImg(frame, this.stream.getTracks()[0], this.videoSize).then(updatedFrame => resolve(updatedFrame));
|
|
182
182
|
}
|
|
183
183
|
catch (e) {
|
|
@@ -187,7 +187,7 @@ export class Stream {
|
|
|
187
187
|
}
|
|
188
188
|
else {
|
|
189
189
|
if (store.debug)
|
|
190
|
-
console.log(
|
|
190
|
+
console.log(`stream | getFrame | resolve`);
|
|
191
191
|
resolve(frame);
|
|
192
192
|
}
|
|
193
193
|
}, ImageFormat.PNG, 1);
|
|
@@ -196,7 +196,7 @@ export class Stream {
|
|
|
196
196
|
async startIdDetection() {
|
|
197
197
|
if (this.streamPaused)
|
|
198
198
|
return;
|
|
199
|
-
this.idML5Detector.initDetector(
|
|
199
|
+
this.idML5Detector.initDetector();
|
|
200
200
|
}
|
|
201
201
|
async startFaceDetection() {
|
|
202
202
|
if (this.streamPaused)
|
|
@@ -4,7 +4,6 @@ import id_white_svg from '../../assets/canvas-masks/id_white.svg';
|
|
|
4
4
|
// @ts-ignore
|
|
5
5
|
import id_green_svg from '../../assets/canvas-masks/id_green.svg';
|
|
6
6
|
import { delay } from '../../utils/utils';
|
|
7
|
-
import { VerificationMode } from '../../models/IVerificationMode';
|
|
8
7
|
import store from '../../helpers/store';
|
|
9
8
|
export class IDML5Detector {
|
|
10
9
|
static getInstance(stream, isMobile) {
|
|
@@ -26,13 +25,9 @@ export class IDML5Detector {
|
|
|
26
25
|
this.canvasElement = canvasElement;
|
|
27
26
|
// this.component = component;
|
|
28
27
|
}
|
|
29
|
-
initDetector(
|
|
28
|
+
initDetector() {
|
|
30
29
|
this.initTime = Date.now();
|
|
31
30
|
this.continue = true;
|
|
32
|
-
if (mode == VerificationMode.Full)
|
|
33
|
-
this.targetedLabel = 'full';
|
|
34
|
-
else
|
|
35
|
-
this.targetedLabel = 'tilted';
|
|
36
31
|
// this.width = this.videoElement.videoWidth;
|
|
37
32
|
// this.height = this.videoElement.videoHeight;
|
|
38
33
|
this.drawFrame('white');
|
|
@@ -60,14 +55,14 @@ export class IDML5Detector {
|
|
|
60
55
|
this.stream.timeElapsed();
|
|
61
56
|
return;
|
|
62
57
|
}
|
|
63
|
-
if (results[0].label ==
|
|
58
|
+
if (results[0].label == 'full' && results[0].confidence > 0.9 && !this.checked) {
|
|
64
59
|
this.checked = true;
|
|
65
60
|
if (store.debug)
|
|
66
61
|
console.log('idml5detector | gotResults | autoCapturing');
|
|
67
62
|
this.stream.autoCapturing();
|
|
68
63
|
await this.drawFrame('green');
|
|
69
64
|
}
|
|
70
|
-
if (results[0].label ==
|
|
65
|
+
if (results[0].label == 'tilted' && results[0].confidence > 0.8 && !this.checked) {
|
|
71
66
|
this.checked = true;
|
|
72
67
|
await this.drawFrame('green');
|
|
73
68
|
}
|