Commit 25847703 authored by David Burke's avatar David Burke

jsqr now works

parent 120dcf16
Pipeline #32876024 passed with stage
in 8 minutes and 57 seconds
import "@storybook/addon-knobs/register";
import "@storybook/addon-actions/register";
......@@ -14,8 +14,8 @@
<app-non-field-messages *ngIf="errorMessage || localErrorMessage" [messages]="[errorMessage, localErrorMessage]"></app-non-field-messages>
<button id="scan-qr-button" (click)="toggleScan()">Scan QR Code</button>
<div>
<canvas id="canvas" hidden></canvas>
<div [class.u-invisible]="!showScanner">
<canvas #canvas id="canvas"></canvas>
</div>
<form [ngrxFormState]="form" (submit)="onSubmit()" class="auth-form__form">
......
import { Component, Input, OnInit, EventEmitter, Output } from "@angular/core";
import {
Component,
Input,
OnInit,
EventEmitter,
Output,
ViewChild,
ElementRef
} from "@angular/core";
import { FormGroupState } from "ngrx-forms";
import { IResetPasswordVerifyForm } from "./reset-password-verify.reducer";
import jsQR from "jsqr";
......@@ -20,8 +28,13 @@ export class ResetPasswordVerifyComponent implements OnInit {
verify = new EventEmitter<string>();
showScanner = false;
scanner: any; // InstaScan.Scanner
video: HTMLVideoElement;
canvas: CanvasRenderingContext2D;
@ViewChild("canvas")
canvasRef: ElementRef<HTMLCanvasElement>;
canvasElement: HTMLCanvasElement;
localErrorMessage: string | null;
videoBootstrapped = false;
constructor() {}
......@@ -30,16 +43,31 @@ export class ResetPasswordVerifyComponent implements OnInit {
if (this.showScanner) {
this.startScan();
} else {
this.stopScan();
// When there is no need to video, pause it and stop the event loop
this.video.pause();
}
}
startScan = () => {
startScan() {
this.localErrorMessage = null;
};
stopScan() {
this.scanner.stop();
// Bootstrap if needed, otherwise start video loop again
if (!this.videoBootstrapped) {
navigator.mediaDevices
.getUserMedia({
video: { facingMode: "environment" }
})
.then(stream => {
this.video.srcObject = stream;
this.video.setAttribute("playsinline", "true"); // required to tell iOS safari we don't want fullscreen
this.video.play();
requestAnimationFrame(this.tick);
this.videoBootstrapped = true;
})
.catch(err => console.log(err));
} else {
requestAnimationFrame(this.tick);
this.video.play();
}
}
handleQrFound = (content: string) => {
......@@ -53,49 +81,38 @@ export class ResetPasswordVerifyComponent implements OnInit {
}
ngOnInit() {
const video = document.createElement("video");
const canvasElement = document.getElementById(
"canvas"
) as HTMLCanvasElement;
const canvas = canvasElement.getContext("2d") as CanvasRenderingContext2D;
console.log(video, canvasElement, canvas, jsQR);
setTimeout(() => {
navigator.mediaDevices
.getUserMedia({
video: { facingMode: "environment" }
})
.then(function(stream) {
// video.srcObject = stream;
// video.setAttribute("playsinline", "true"); // required to tell iOS safari we don't want fullscreen
// video.play();
// requestAnimationFrame(tick);
})
.catch(err => console.log(err));
}, 100);
// function tick() {
// if (video.readyState === video.HAVE_ENOUGH_DATA) {
// canvasElement.hidden = false;
// canvasElement.height = video.videoHeight;
// canvasElement.width = video.videoWidth;
// canvas.drawImage(
// video,
// 0,
// 0,
// canvasElement.width,
// canvasElement.height
// );
// const imageData = canvas.getImageData(
// 0,
// 0,
// canvasElement.width,
// canvasElement.height
// );
// const code = jsQR(imageData.data, imageData.width, imageData.height);
// if (code) {
// console.log("code is ", code);
// }
// }
// requestAnimationFrame(tick);
// }
this.video = document.createElement("video");
this.canvasElement = this.canvasRef.nativeElement;
this.canvas = this.canvasElement.getContext("2d")!;
}
/*
* Video event loop, runs forever while showScanner is true and then stops
*/
tick = () => {
if (this.showScanner) {
if (this.video.readyState === this.video.HAVE_ENOUGH_DATA) {
this.canvasElement.height = this.video.videoHeight;
this.canvasElement.width = this.video.videoWidth;
this.canvas.drawImage(
this.video,
0,
0,
this.canvasElement.width,
this.canvasElement.height
);
const imageData = this.canvas.getImageData(
0,
0,
this.canvasElement.width,
this.canvasElement.height
);
const code = jsQR(imageData.data, imageData.width, imageData.height);
if (code) {
this.handleQrFound(code.data);
}
}
requestAnimationFrame(this.tick);
}
};
}
import { InlineSVGModule } from "ng-inline-svg";
import { HttpClientModule } from "@angular/common/http";
import { storiesOf, moduleMetadata } from "@storybook/angular";
import { action } from "@storybook/addon-actions";
import { boolean, withKnobs } from "@storybook/addon-knobs";
import { StoreModule } from "@ngrx/store";
import { NgrxFormsModule } from "ngrx-forms";
......@@ -52,7 +53,8 @@ storiesOf("Account", module)
.add("Reset Password Verify", () => ({
component: ResetPasswordVerifyComponent,
props: {
form: fromResetPasswordVerify.initialResetPasswordVerifyFormState
form: fromResetPasswordVerify.initialResetPasswordVerifyFormState,
verify: action("code entered")
}
}))
.add("Marketing Frame", () => ({
......
......@@ -959,7 +959,7 @@
"@emotion/sheet" "^0.8.0"
"@emotion/utils" "^0.8.1"
"@emotion/core@~0.13.0":
"@emotion/core@^0.13.1", "@emotion/core@~0.13.0":
version "0.13.1"
resolved "https://registry.yarnpkg.com/@emotion/core/-/core-0.13.1.tgz#4fa4983e18dbf089fa16584486c8033ca50013ea"
integrity sha512-5qzKP6bTe2Ah7Wvh1sgtzgy6ycdpxwgMAjQ/K/VxvqBxveG9PCpq+Z0GdVg7Houb1AwYjTfNtXstjSk4sqi/7g==
......@@ -1003,6 +1003,14 @@
"@emotion/cache" "^0.8.7"
"@emotion/weak-memoize" "^0.1.2"
"@emotion/provider@^0.11.2":
version "0.11.2"
resolved "https://registry.yarnpkg.com/@emotion/provider/-/provider-0.11.2.tgz#7099f1df5641969ee4d6ff5cf1561295914030aa"
integrity sha512-y/BRd6cJ9tyxsy4EK8WheD2X1/RfmudMYILpa8sgI3dKCjVWeEZuQM17wXRVEyhrisaRaIp1qT4h0eWUaaqNLg==
dependencies:
"@emotion/cache" "^0.8.8"
"@emotion/weak-memoize" "^0.1.3"
"@emotion/serialize@^0.9.0", "@emotion/serialize@^0.9.1":
version "0.9.1"
resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-0.9.1.tgz#a494982a6920730dba6303eb018220a2b629c145"
......@@ -1034,7 +1042,7 @@
dependencies:
"@emotion/styled-base" "^0.10.5"
"@emotion/styled@~0.10.5":
"@emotion/styled@^0.10.6", "@emotion/styled@~0.10.5":
version "0.10.6"
resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-0.10.6.tgz#1f6af1d3d4bf9fdeb05a4d220046ce11ad21a7ca"
integrity sha512-DFNW8jlMjy1aYCj/PKsvBoJVZAQXzjmSCwtKXLs31qZzNPaUEPbTYSIKnMUtIiAOYsu0pUTGXM+l0a+MYNm4lA==
......@@ -1056,7 +1064,7 @@
resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-0.8.2.tgz#576ff7fb1230185b619a75d258cbc98f0867a8dc"
integrity sha512-rLu3wcBWH4P5q1CGoSSH/i9hrXs7SlbRLkoq9IGuoPYNGQvDJ3pt/wmOM+XgYjIDRMVIdkUWt0RsfzF50JfnCw==
"@emotion/weak-memoize@^0.1.2":
"@emotion/weak-memoize@^0.1.2", "@emotion/weak-memoize@^0.1.3":
version "0.1.3"
resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.1.3.tgz#b700d97385fa91affed60c71dfd51c67e9dad762"
integrity sha512-QsYGKdhhuDFNq7bjm2r44y0mp5xW3uO3csuTPDWZc0OIiMQv+AIY5Cqwd4mJiC5N8estVl7qlvOx1hbtOuUWbw==
......@@ -1152,6 +1160,25 @@
semver "^5.3.0"
semver-intersect "^1.1.2"
"@storybook/addon-actions@^4.0.0-alpha.22":
version "4.0.0-alpha.25"
resolved "https://registry.yarnpkg.com/@storybook/addon-actions/-/addon-actions-4.0.0-alpha.25.tgz#f7effa64f52dda0f5cb6017376c029a0a05f2c2d"
integrity sha512-WbYBEqJrd6+35JviB4sHZSgteI/bTSTkqvi+Du1fgN7DE1WZtWgoDUfPyrNXxIKV29HJ5uLoagU1+WqGA/OTGQ==
dependencies:
"@emotion/core" "^0.13.1"
"@emotion/provider" "^0.11.2"
"@emotion/styled" "^0.10.6"
"@storybook/addons" "4.0.0-alpha.25"
"@storybook/components" "4.0.0-alpha.25"
"@storybook/core-events" "4.0.0-alpha.25"
deep-equal "^1.0.1"
global "^4.3.2"
lodash "^4.17.11"
make-error "^1.3.5"
prop-types "^15.6.2"
react-inspector "^2.3.0"
uuid "^3.3.2"
"@storybook/addon-knobs@^4.0.0-alpha.22":
version "4.0.0-alpha.22"
resolved "https://registry.yarnpkg.com/@storybook/addon-knobs/-/addon-knobs-4.0.0-alpha.22.tgz#af5215ed8ac7ba8f20b1738709378d4091f6fc7b"
......@@ -1182,6 +1209,16 @@
global "^4.3.2"
util-deprecate "^1.0.2"
"@storybook/addons@4.0.0-alpha.25":
version "4.0.0-alpha.25"
resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-4.0.0-alpha.25.tgz#9b0dc30ed510ce43353f63a571ba360240d0d937"
integrity sha512-eGjYQFBlXbO++nR4zVfp+CKx88CpdU01oHQx9CrIxx7X1afLP5j2K7r+oQbI5rMWIecaJxI2CB1n7Be60R8Q5g==
dependencies:
"@storybook/channels" "4.0.0-alpha.25"
"@storybook/components" "4.0.0-alpha.25"
global "^4.3.2"
util-deprecate "^1.0.2"
"@storybook/angular@^4.0.0-alpha.22":
version "4.0.0-alpha.22"
resolved "https://registry.yarnpkg.com/@storybook/angular/-/angular-4.0.0-alpha.22.tgz#2ce7fed33f04132c4ee9c233c156eedbd42d9c64"
......@@ -1214,6 +1251,11 @@
resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-4.0.0-alpha.22.tgz#6a6361f0719acb5f36f62814c8ae50e79094c55e"
integrity sha512-2Lk0/6xrThaUQ22JwAsj48XKvRhMVZB50qSRr/n0hXvKVD++xLmH/2ctVv8oQn/A0nWaoc3r9l0loaDJXk3a/g==
"@storybook/channels@4.0.0-alpha.25":
version "4.0.0-alpha.25"
resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-4.0.0-alpha.25.tgz#ac9e411811e5e21f947b8c7a04a77779dd2a6ba2"
integrity sha512-iut53WfyyzfCqv7nqBg2ndfTzamxFHhv/rBLeYk1ARmVB1a6/CyLVWXqDLAi9h9dqwtW42xrKHUtUM+OZXhZUw==
"@storybook/client-logger@4.0.0-alpha.22":
version "4.0.0-alpha.22"
resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-4.0.0-alpha.22.tgz#eb09675df98e1db818e1fdc7021e98a21c292dd8"
......@@ -1236,11 +1278,32 @@
react-textarea-autosize "^7.0.4"
render-fragment "^0.1.1"
"@storybook/components@4.0.0-alpha.25":
version "4.0.0-alpha.25"
resolved "https://registry.yarnpkg.com/@storybook/components/-/components-4.0.0-alpha.25.tgz#38916bc99035aa7662d999c32ba85dd4a54bc098"
integrity sha512-3a3+4s0jfXK4RXMnlAUw4SzmUNjRzt6sxckA78rYK95Fb08eHqT0ka1fhPf9I7IEcigigWPNBMk5wBR9RuECTg==
dependencies:
"@emotion/core" "^0.13.1"
"@emotion/provider" "^0.11.2"
"@emotion/styled" "^0.10.6"
global "^4.3.2"
lodash "^4.17.11"
prop-types "^15.6.2"
react-inspector "^2.3.0"
react-split-pane "^0.1.84"
react-textarea-autosize "^7.0.4"
render-fragment "^0.1.1"
"@storybook/core-events@4.0.0-alpha.22":
version "4.0.0-alpha.22"
resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-4.0.0-alpha.22.tgz#c68fc7dff20bfe6399102c0b785dbb3f1c4e6938"
integrity sha512-kvoNKIOAuE/qH2F5J6S/em2F3xdOnR5xglncd39zRVLmZ72tdaLWFhxEs9S8CVGRfEpGdi1J24R3rgcWygBcEA==
"@storybook/core-events@4.0.0-alpha.25":
version "4.0.0-alpha.25"
resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-4.0.0-alpha.25.tgz#04dfd287a1ff2dc5899911f9e2b44a57228b2800"
integrity sha512-dhHi9bcFPpsMYPkXl3uwhSyJMg5SVmQatbnn6XM65jB7rcB6c3bSuk4MYBFHK1fKd//1eDVY67vjeXR4KRjpZg==
"@storybook/core@4.0.0-alpha.22":
version "4.0.0-alpha.22"
resolved "https://registry.yarnpkg.com/@storybook/core/-/core-4.0.0-alpha.22.tgz#24a553942e19a851f8cdd9f574b74ca9174b7ae1"
......@@ -1473,6 +1536,11 @@
resolved "https://registry.yarnpkg.com/@types/selenium-webdriver/-/selenium-webdriver-3.0.10.tgz#e98cc6f05b4b436277671c784ee2f9d05a634f9b"
integrity sha512-ikB0JHv6vCR1KYUQAzTO4gi/lXLElT4Tx+6De2pc/OZwizE9LRNiTa+U8TBFKBD/nntPnr/MPSHSnOTybjhqNA==
"@types/storybook__addon-actions@^3.4.1":
version "3.4.1"
resolved "https://registry.yarnpkg.com/@types/storybook__addon-actions/-/storybook__addon-actions-3.4.1.tgz#8f90d76b023b58ee794170f2fe774a3fddda2c1d"
integrity sha512-An8pNb1/7QhkdOT8Ht5WjJsSxAh2mWti/J4eILwUHpXVZ1j3xlVaOzwTbg8twN4DjgOAggjEDOj6Bx8YOWh9Pg==
"@types/storybook__addon-knobs@^3.4.1":
version "3.4.1"
resolved "https://registry.yarnpkg.com/@types/storybook__addon-knobs/-/storybook__addon-knobs-3.4.1.tgz#36a9ff38c50b00b198bfdc04f6c0aaf747e0ed86"
......@@ -8346,7 +8414,7 @@ lodash@^3.8.0:
resolved "http://registry.npmjs.org/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6"
integrity sha1-W/Rejkm6QYnhfUgnid/RW9FAt7Y=
lodash@^4.0.0, lodash@^4.0.1, lodash@^4.11.1, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.10, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.3.0, lodash@^4.5.0, lodash@^4.8.0, lodash@~4.17.10, lodash@~4.17.2:
lodash@^4.0.0, lodash@^4.0.1, lodash@^4.11.1, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.3.0, lodash@^4.5.0, lodash@^4.8.0, lodash@~4.17.10, lodash@~4.17.2:
version "4.17.11"
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d"
integrity sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==
......@@ -8426,7 +8494,7 @@ make-dir@^1.0.0:
dependencies:
pify "^3.0.0"
make-error@^1.1.1:
make-error@^1.1.1, make-error@^1.3.5:
version "1.3.5"
resolved "https://registry.yarnpkg.com/make-error/-/make-error-1.3.5.tgz#efe4e81f6db28cadd605c70f29c831b58ef776c8"
integrity sha512-c3sIjNUow0+8swNwVpqoH4YCShKNFkMaw6oH1mNS2haDZQqkeZFlHS3dhoeEbKKmJB4vXpJucU6oH75aDYeE9g==
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment