alg: simplify QR minimum size check and update camera 6.0 WASM
Use fixed 200px minimum instead of ratio-based calculation. Rebuild and deploy WASM to camera-6.0, remove unused brotli file.
@ -95,12 +95,10 @@ bool detect_qr(ProcessState &ps, float margin_ratio, bool warp, string &err)
|
|||||||
}
|
}
|
||||||
int qr_width = max_x - min_x;
|
int qr_width = max_x - min_x;
|
||||||
int qr_height = max_y - min_y;
|
int qr_height = max_y - min_y;
|
||||||
float min_ratio = 0.3;
|
int min_px = 200;
|
||||||
int min_width = std::max(180, (int)(ps.orig->cols * min_ratio));
|
if (qr_width < min_px && qr_height < min_px) {
|
||||||
int min_height = std::max(180, (int)(ps.orig->rows * min_ratio));
|
err = string_format("qr too small: %d x %d, min: %d",
|
||||||
if (qr_width < min_width && qr_height < min_height) {
|
qr_width, qr_height, min_px);
|
||||||
err = string_format("qr too small: %d x %d, thres: %d x %d",
|
|
||||||
qr_width, qr_height, min_width, min_height);
|
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
2
web/public/camera-6.0/Makefile
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
deploy:
|
||||||
|
rsync -zrP * oci:/data/emblem-camera/
|
||||||
85
web/public/camera-6.0/css/loading.css
Normal file
@ -0,0 +1,85 @@
|
|||||||
|
.lds-roller {
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
}
|
||||||
|
.lds-roller div {
|
||||||
|
animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
|
||||||
|
transform-origin: 40px 40px;
|
||||||
|
}
|
||||||
|
.lds-roller div:after {
|
||||||
|
content: " ";
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
width: 7px;
|
||||||
|
height: 7px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #666;
|
||||||
|
margin: -4px 0 0 -4px;
|
||||||
|
}
|
||||||
|
.lds-roller div:nth-child(1) {
|
||||||
|
animation-delay: -0.036s;
|
||||||
|
}
|
||||||
|
.lds-roller div:nth-child(1):after {
|
||||||
|
top: 63px;
|
||||||
|
left: 63px;
|
||||||
|
}
|
||||||
|
.lds-roller div:nth-child(2) {
|
||||||
|
animation-delay: -0.072s;
|
||||||
|
}
|
||||||
|
.lds-roller div:nth-child(2):after {
|
||||||
|
top: 68px;
|
||||||
|
left: 56px;
|
||||||
|
}
|
||||||
|
.lds-roller div:nth-child(3) {
|
||||||
|
animation-delay: -0.108s;
|
||||||
|
}
|
||||||
|
.lds-roller div:nth-child(3):after {
|
||||||
|
top: 71px;
|
||||||
|
left: 48px;
|
||||||
|
}
|
||||||
|
.lds-roller div:nth-child(4) {
|
||||||
|
animation-delay: -0.144s;
|
||||||
|
}
|
||||||
|
.lds-roller div:nth-child(4):after {
|
||||||
|
top: 72px;
|
||||||
|
left: 40px;
|
||||||
|
}
|
||||||
|
.lds-roller div:nth-child(5) {
|
||||||
|
animation-delay: -0.18s;
|
||||||
|
}
|
||||||
|
.lds-roller div:nth-child(5):after {
|
||||||
|
top: 71px;
|
||||||
|
left: 32px;
|
||||||
|
}
|
||||||
|
.lds-roller div:nth-child(6) {
|
||||||
|
animation-delay: -0.216s;
|
||||||
|
}
|
||||||
|
.lds-roller div:nth-child(6):after {
|
||||||
|
top: 68px;
|
||||||
|
left: 24px;
|
||||||
|
}
|
||||||
|
.lds-roller div:nth-child(7) {
|
||||||
|
animation-delay: -0.252s;
|
||||||
|
}
|
||||||
|
.lds-roller div:nth-child(7):after {
|
||||||
|
top: 63px;
|
||||||
|
left: 17px;
|
||||||
|
}
|
||||||
|
.lds-roller div:nth-child(8) {
|
||||||
|
animation-delay: -0.288s;
|
||||||
|
}
|
||||||
|
.lds-roller div:nth-child(8):after {
|
||||||
|
top: 56px;
|
||||||
|
left: 12px;
|
||||||
|
}
|
||||||
|
@keyframes lds-roller {
|
||||||
|
0% {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
464
web/public/camera-6.0/css/main.css
Normal file
@ -0,0 +1,464 @@
|
|||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
font-family:Tahoma,Verdana,STHeiTi,simsun,sans-serif;
|
||||||
|
}
|
||||||
|
div.debug {
|
||||||
|
position: absolute;
|
||||||
|
left: 5px;
|
||||||
|
bottom: 5px;
|
||||||
|
width: 80%;
|
||||||
|
height: 50%;
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 2px dashed rgba(50, 255, 50, 0.5);
|
||||||
|
background-color: rgba(0, 50, 0, 0.7);
|
||||||
|
padding: 1rem;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 12px;
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
.hidden {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
video.preview {
|
||||||
|
object-fit: cover;
|
||||||
|
position: fixed;
|
||||||
|
top: -1%;
|
||||||
|
left: -1%;
|
||||||
|
width: 102%;
|
||||||
|
height: 102%;
|
||||||
|
z-index: -1000;
|
||||||
|
border: 1px solid yellow;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
div.debug canvas {
|
||||||
|
display: inline-block;
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
}
|
||||||
|
div.bottomfixed {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
bottom: 0;
|
||||||
|
height: 90px;
|
||||||
|
background-color: #171616;
|
||||||
|
text-align: center;
|
||||||
|
border-top: 1px solid #ef4823;
|
||||||
|
}
|
||||||
|
|
||||||
|
.play.button {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0.1rem 1.2rem 0.1rem 1.4rem;
|
||||||
|
margin-right: 0.2rem;
|
||||||
|
border-radius: 6px;
|
||||||
|
background-color: #707070;
|
||||||
|
color: #444;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.bottomfixed .action.highlight .play.button {
|
||||||
|
background-color: #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.bottomfixed .action img {
|
||||||
|
height: 14px;
|
||||||
|
width: 36px;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.bottomfixed .action {
|
||||||
|
margin-top: 20px;
|
||||||
|
font-size: 1rem;
|
||||||
|
color: #707070;
|
||||||
|
width: 49%;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.bottomfixed .action.highlight {
|
||||||
|
color: #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.camoverlay {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
clear: both;
|
||||||
|
font-size: 0;
|
||||||
|
width: 100%;
|
||||||
|
aspect-ratio: 1;
|
||||||
|
top: 18vw;
|
||||||
|
}
|
||||||
|
div.camoverlay img.qrmarkers {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
margin: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.lower.text {
|
||||||
|
top: 4%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.progress {
|
||||||
|
width: 70%;
|
||||||
|
margin: 0.2rem 0 0 0;
|
||||||
|
height: 20px;
|
||||||
|
border-radius: 10px;
|
||||||
|
background-color: #eee;
|
||||||
|
font-size: 18px;
|
||||||
|
color: black;
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
div.progress-text {
|
||||||
|
color: #333;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
div.progress-bar {
|
||||||
|
border-radius: 10px;
|
||||||
|
background-color: #ef4823;
|
||||||
|
width: 0%;
|
||||||
|
height: 100%;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
div.upper.overlay {
|
||||||
|
position: relative;
|
||||||
|
height: 100vmin;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.lower.overlay {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
div.debug .buttons {
|
||||||
|
margin: 0 0 0.3rem 0;
|
||||||
|
}
|
||||||
|
div.debug .buttons button {
|
||||||
|
height: 2rem;
|
||||||
|
margin: 0 5px 5px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
div#loading {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
background-color: white;
|
||||||
|
z-index: 10000;
|
||||||
|
text-align: center;
|
||||||
|
padding-top: 30%;
|
||||||
|
}
|
||||||
|
|
||||||
|
canvas#output_img {
|
||||||
|
position: absolute;
|
||||||
|
right: 5px;
|
||||||
|
top: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.bordered {
|
||||||
|
padding: 0.2rem;
|
||||||
|
border: 1px dashed yellow;
|
||||||
|
border-radius: 4px;
|
||||||
|
margin: 0.2rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.output {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip {
|
||||||
|
position: absolute;
|
||||||
|
width: 100vmin;
|
||||||
|
display: block;
|
||||||
|
margin: 0 auto;
|
||||||
|
animation: bounce 1s ease-in-out infinite; /* Adjust the duration as needed */
|
||||||
|
top: -60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip .tooltiptext {
|
||||||
|
display: block;
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 110px;
|
||||||
|
background-color: #ef4823;
|
||||||
|
color: #fff;
|
||||||
|
padding: 12px 0;
|
||||||
|
border-radius: 10px;
|
||||||
|
z-index: 1;
|
||||||
|
opacity: 0.75;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip:hover .tooltiptext {
|
||||||
|
}
|
||||||
|
.tooltip .tooltiptext::after {
|
||||||
|
content: " ";
|
||||||
|
position: absolute;
|
||||||
|
top: 100%; /* At the bottom of the tooltip */
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -5px;
|
||||||
|
border-width: 5px;
|
||||||
|
border-style: solid;
|
||||||
|
border-color: #ef4823 transparent transparent transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes bounce {
|
||||||
|
0%, 100% {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: translateY(10px); /* Adjust the bounce height as needed */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: fixed;
|
||||||
|
background-color: rgba(0, 0, 0, 0.9);
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal .panel {
|
||||||
|
position: relative;
|
||||||
|
width: 80vmin;
|
||||||
|
height: 80%;
|
||||||
|
margin: 10vmin auto;
|
||||||
|
background-image: linear-gradient(0deg, #8b8986 0%, #414141 36%, #414141 92%, #515151 100%);
|
||||||
|
border-radius: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal .actions {
|
||||||
|
position: absolute;
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 100px;
|
||||||
|
bottom: 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions button {
|
||||||
|
display: inline-block;
|
||||||
|
width: 35%;
|
||||||
|
border-radius: 10px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
padding: 0.4rem 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
button.service {
|
||||||
|
margin-right: 0.5rem;
|
||||||
|
border: 1px solid #676767;
|
||||||
|
background-color: #858585;
|
||||||
|
color: #a7a7a7;
|
||||||
|
}
|
||||||
|
|
||||||
|
button.back {
|
||||||
|
border: 1px solid rgba(239, 72, 35, 0.7);
|
||||||
|
color: rgba(239, 72, 35, 0.7);
|
||||||
|
margin-left: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
button.back img.return {
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.serviceqr {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
padding-top: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.serviceqr .imgbox {
|
||||||
|
display: block;
|
||||||
|
margin: auto;
|
||||||
|
width: 60vmin;
|
||||||
|
height: 60vmin;
|
||||||
|
padding: 3vmin;
|
||||||
|
background-color: #eee;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.serviceqr .title {
|
||||||
|
position: absolute;
|
||||||
|
display: inline-block;
|
||||||
|
width: 100%;
|
||||||
|
color: #eee;
|
||||||
|
margin: 30px auto;
|
||||||
|
text-align: center;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.serviceqr img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.verifyfailed {
|
||||||
|
text-align: center;
|
||||||
|
color: #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.verifyfailed .title {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.verifyfailed .hints {
|
||||||
|
margin-top: 80px;
|
||||||
|
color: #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.verifyfailed .hints div {
|
||||||
|
margin-bottom: 0.3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.verifyfailed .circle {
|
||||||
|
height: 20vmin;
|
||||||
|
width: 20vmin;
|
||||||
|
color: #666;
|
||||||
|
font-size: 15vmin;
|
||||||
|
margin: 10vmin auto 1rem;;
|
||||||
|
background-color: #ddd;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.verifyspin {
|
||||||
|
position: absolute;
|
||||||
|
overflow: hidden;
|
||||||
|
z-index: 101;
|
||||||
|
width: 100vmin;
|
||||||
|
height: 100vmax;
|
||||||
|
background-color: rgba(0, 0, 0, 0.9);
|
||||||
|
}
|
||||||
|
|
||||||
|
.verifyspin .spinner {
|
||||||
|
position: absolute; /* Position the image absolutely */
|
||||||
|
width: 100vmin;
|
||||||
|
height: 100vmin;
|
||||||
|
margin: 0 auto;
|
||||||
|
text-align: center;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.verifyspin img {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spin-and-shrink {
|
||||||
|
animation: spin-and-shrink 3s linear forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spin-and-shrink {
|
||||||
|
0% {
|
||||||
|
transform: rotate(-90deg) scale(5.5)
|
||||||
|
}
|
||||||
|
10% {
|
||||||
|
transform: rotate(0deg) scale(2.0)
|
||||||
|
}
|
||||||
|
33% {
|
||||||
|
transform: rotate(90deg) scale(1.0);
|
||||||
|
}
|
||||||
|
66% {
|
||||||
|
transform: rotate(2000deg) scale(0.5);
|
||||||
|
}
|
||||||
|
99% {
|
||||||
|
transform: rotate(3600deg) scale(0.2);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: rotate(3600deg) scale(0.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.spin-only {
|
||||||
|
animation: spin-only 0.3s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spin-only {
|
||||||
|
0% {
|
||||||
|
transform: rotate(0deg) scale(0.2);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: rotate(360deg) scale(0.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.verifyspin .loading {
|
||||||
|
color: #ccc;
|
||||||
|
font-size: 1.4rem;
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
margin: 110vmin auto;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.scanguide {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#hint {
|
||||||
|
display: inline-block;
|
||||||
|
margin: 10px auto;
|
||||||
|
padding: 12px 40px;
|
||||||
|
border-radius: 10px;
|
||||||
|
background-color: rgba(0, 0, 0, 0.7);
|
||||||
|
color: #eee;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.qrarc {
|
||||||
|
position: absolute;
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 46vw;
|
||||||
|
height: 46vw;
|
||||||
|
margin: 35vw 27vw;
|
||||||
|
animation: qrarc-anime 1.2s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.qrarc img.arc {
|
||||||
|
position: absolute;
|
||||||
|
width: 15%;
|
||||||
|
height: 15%;
|
||||||
|
opacity: 0.9;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.qrarc img.arc.topright {
|
||||||
|
right: 0;
|
||||||
|
transform: rotate(90deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
div.qrarc img.arc.bottomleft {
|
||||||
|
bottom: 0;
|
||||||
|
transform: rotate(-90deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
div.qrarc img.arc.bottomright {
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@keyframes qrarc-anime {
|
||||||
|
0% {
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
web/public/camera-6.0/images/arc.png
Normal file
|
After Width: | Height: | Size: 5.4 KiB |
BIN
web/public/camera-6.0/images/black.png
Normal file
|
After Width: | Height: | Size: 637 B |
BIN
web/public/camera-6.0/images/camoverlay.png
Normal file
|
After Width: | Height: | Size: 7.4 KiB |
BIN
web/public/camera-6.0/images/flash-button.png
Normal file
|
After Width: | Height: | Size: 1.2 KiB |
BIN
web/public/camera-6.0/images/play-button.png
Normal file
|
After Width: | Height: | Size: 1.2 KiB |
BIN
web/public/camera-6.0/images/qrmarkers.png
Normal file
|
After Width: | Height: | Size: 7.5 KiB |
BIN
web/public/camera-6.0/images/return.png
Normal file
|
After Width: | Height: | Size: 1.3 KiB |
BIN
web/public/camera-6.0/images/right-arrow.png
Normal file
|
After Width: | Height: | Size: 389 B |
BIN
web/public/camera-6.0/images/spinner.png
Normal file
|
After Width: | Height: | Size: 69 KiB |
121
web/public/camera-6.0/index.html
Normal file
@ -0,0 +1,121 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="description" content="WebRTC code samples">
|
||||||
|
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1, maximum-scale=1">
|
||||||
|
<meta name="mobile-web-app-capable" content="yes">
|
||||||
|
<base target="_blank">
|
||||||
|
<title>AI验真</title>
|
||||||
|
<link rel="stylesheet" href="css/main.css">
|
||||||
|
<link rel="stylesheet" href="css/loading.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="loading" id="loading">
|
||||||
|
<div>
|
||||||
|
<div class="lds-roller"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
AI摄像头加载中...
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="container">
|
||||||
|
<div>
|
||||||
|
<div class="camoverlay">
|
||||||
|
<div class="upper overlay">
|
||||||
|
<div>
|
||||||
|
<div class="qrarc">
|
||||||
|
<img class="topleft arc" src="images/arc.png" />
|
||||||
|
<img class="topright arc" src="images/arc.png" />
|
||||||
|
<img class="bottomleft arc" src="images/arc.png" />
|
||||||
|
<img class="bottomright arc" src="images/arc.png" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hint wrapper">
|
||||||
|
<div id="hint" class="upper text" onclick="debug_countdown()">
|
||||||
|
对齐定位点
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<video class="preview" id="video" autoplay muted playsinline></video>
|
||||||
|
</div>
|
||||||
|
<div class="bottomfixed">
|
||||||
|
<div class="play action" onclick="show_modal('scanguide')">
|
||||||
|
<img
|
||||||
|
class="play"
|
||||||
|
src="images/play-button.png"
|
||||||
|
/>
|
||||||
|
验证演示
|
||||||
|
</div>
|
||||||
|
<div class="torch action" onclick="toggle_torch()">
|
||||||
|
<img
|
||||||
|
class="torch"
|
||||||
|
src="images/flash-button.png"
|
||||||
|
/>
|
||||||
|
开启补光
|
||||||
|
</div>
|
||||||
|
<div class="hidden tooltip"><span class="tooltiptext">遇到困难?</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="hidden debug" id="debug_div">
|
||||||
|
<div class="buttons">
|
||||||
|
<button onclick="location.reload()">reload</button>
|
||||||
|
<button onclick="set_zoom(4)">4x zoom</button>
|
||||||
|
<button onclick="set_zoom(2)">2x zoom</button>
|
||||||
|
<button onclick="wx_submit('debug')">WX OK</button>
|
||||||
|
<button onclick="torch_onoff()">Torch</button>
|
||||||
|
<button onclick="hide_debug()">Hide</button>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<canvas class="hidden" id="original" width="2000" height="2000">
|
||||||
|
</canvas>
|
||||||
|
<canvas class="hidden" id="grayscale" width="2000" height="2000">
|
||||||
|
</canvas>
|
||||||
|
</div>
|
||||||
|
<div id="logs" class="bordered">
|
||||||
|
</div>
|
||||||
|
<div class="bordered">
|
||||||
|
Caps: <span id="caps"></span>
|
||||||
|
</div>
|
||||||
|
<div class="bordered">
|
||||||
|
Constraints: <span id="cons"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="modal hidden">
|
||||||
|
<div class="panel">
|
||||||
|
<div class="scanguide hidden">
|
||||||
|
<div id="scanguide">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="serviceqr hidden">
|
||||||
|
<div class="imgbox">
|
||||||
|
<img id="service_img" src="https://emblem-resources.oss-accelerate.aliyuncs.com/service-qr2.png" alt=""/>
|
||||||
|
</div>
|
||||||
|
<div class="title">
|
||||||
|
长按识别二维码,添加人工客服
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="actions">
|
||||||
|
<button onclick="show_modal('serviceqr')" class="service">人工客服</button>
|
||||||
|
<button onclick="hide_modal()" class="back">
|
||||||
|
<img class="return" src="images/return.png" alt=""/>
|
||||||
|
采集</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="verifyspin hidden">
|
||||||
|
<div class="spinner">
|
||||||
|
<img src="images/spinner.png" class="spin-image spin-and-shrink">
|
||||||
|
</div>
|
||||||
|
<div class="loading">
|
||||||
|
Loading
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
|
||||||
|
<script type="text/javascript" src="js/lottie.min.js"></script>
|
||||||
|
<script type="text/javascript" src="js/main.js"></script>
|
||||||
|
<script type="text/javascript" src="js/qrtool.web.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
1
web/public/camera-6.0/js/lottie.min.js
vendored
Normal file
429
web/public/camera-6.0/js/main.js
Normal file
@ -0,0 +1,429 @@
|
|||||||
|
var debug_taps = 0;
|
||||||
|
var debug_logs = [];
|
||||||
|
var track;
|
||||||
|
var frame_width;
|
||||||
|
var frame_height;
|
||||||
|
var scanguide_anime;
|
||||||
|
var busy = false;
|
||||||
|
const max_inflight = 5;
|
||||||
|
var should_check_auto_torch = true;
|
||||||
|
var done_checking_auto_torch = false;
|
||||||
|
var camera_sensitivity = 1.0;
|
||||||
|
var camera_capabilities = null;
|
||||||
|
|
||||||
|
var Module = {
|
||||||
|
onRuntimeInitialized: start,
|
||||||
|
};
|
||||||
|
|
||||||
|
function get_query(key) {
|
||||||
|
const qs = window.location.search;
|
||||||
|
const params = new URLSearchParams(qs);
|
||||||
|
return params.get(key) || "";
|
||||||
|
}
|
||||||
|
|
||||||
|
function show_debug() {
|
||||||
|
const debug_div = document.getElementById("debug_div");
|
||||||
|
debug_div.classList.remove("hidden");
|
||||||
|
}
|
||||||
|
function hide_debug() {
|
||||||
|
const debug_div = document.getElementById("debug_div");
|
||||||
|
debug_div.classList.add("hidden");
|
||||||
|
}
|
||||||
|
function debug_countdown() {
|
||||||
|
debug_taps += 1;
|
||||||
|
if (debug_taps > 10) {
|
||||||
|
show_debug();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function hide_loading() {
|
||||||
|
const loading = document.getElementById("loading");
|
||||||
|
loading.classList.add("hidden");
|
||||||
|
}
|
||||||
|
|
||||||
|
function handle_stream(stream) {
|
||||||
|
const video = document.querySelector('video');
|
||||||
|
const videoTracks = stream.getVideoTracks();
|
||||||
|
debug_log(`total video tracks: ${videoTracks.length} Using video device: ${videoTracks[0].label}`);
|
||||||
|
window.stream = stream; // make variable available to browser console
|
||||||
|
video.srcObject = stream;
|
||||||
|
video.play();
|
||||||
|
track = videoTracks[0];
|
||||||
|
camera_capabilities = track.getCapabilities();
|
||||||
|
const caps = document.getElementById("caps");
|
||||||
|
caps.innerHTML = JSON.stringify(camera_capabilities);
|
||||||
|
const settings = track.getSettings();
|
||||||
|
console.log(settings);
|
||||||
|
const canvas = document.getElementById("original");
|
||||||
|
frame_width = settings.width;
|
||||||
|
frame_height = settings.height;
|
||||||
|
video.width = frame_width;
|
||||||
|
video.height = frame_height;
|
||||||
|
canvas.width = frame_width;
|
||||||
|
canvas.height = frame_height;
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleError(error) {
|
||||||
|
debug_log(error);
|
||||||
|
console.log(error);
|
||||||
|
}
|
||||||
|
|
||||||
|
function debug_log(msg) {
|
||||||
|
debug_logs.push(Date.now() / 1000 + ": " + msg);
|
||||||
|
const nentries = 20;
|
||||||
|
while (debug_logs.length > nentries) {
|
||||||
|
debug_logs.shift();
|
||||||
|
}
|
||||||
|
var output = "";
|
||||||
|
for (var l of debug_logs) {
|
||||||
|
output = `<div>${l}</div>` + output;
|
||||||
|
}
|
||||||
|
console.log(msg);
|
||||||
|
const di = document.getElementById("logs");
|
||||||
|
di.innerHTML = output;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function start_camera(e) {
|
||||||
|
try {
|
||||||
|
const constraints = window.constraints = {
|
||||||
|
audio: false,
|
||||||
|
video: {
|
||||||
|
facingMode: "environment",
|
||||||
|
focusDistance: 0.12,
|
||||||
|
focusMode: "manual",
|
||||||
|
width: { ideal: 2000 },
|
||||||
|
},
|
||||||
|
};
|
||||||
|
const supportedConstraints = navigator.mediaDevices.getSupportedConstraints();
|
||||||
|
const cons = document.getElementById("cons");
|
||||||
|
cons.innerHTML = JSON.stringify(supportedConstraints);
|
||||||
|
debug_log(navigator.userAgent);
|
||||||
|
|
||||||
|
const stream = await navigator.mediaDevices.getUserMedia(constraints);
|
||||||
|
handle_stream(stream);
|
||||||
|
const zoom = get_query("zoom");
|
||||||
|
if (zoom) {
|
||||||
|
set_zoom(zoom);
|
||||||
|
}
|
||||||
|
|
||||||
|
} catch (e) {
|
||||||
|
handleError(e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function is_emblem_qr_pattern(p)
|
||||||
|
{
|
||||||
|
if (p.search(/code=[0-9a-zA-Z]+/) >= 0) return true;
|
||||||
|
if (p.search(/id=[0-9a-zA-Z]+/) >= 0) return true;
|
||||||
|
if (p.search(/c=[0-9a-zA-Z]+/) >= 0) return true;
|
||||||
|
if (p.search(/https:\/\/xy.ltd\/v\/[0-9a-zA-Z]+/) >= 0) return true;
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function make_hint_text(r) {
|
||||||
|
var qr_is_valid = false;
|
||||||
|
if (r.qrcode && r.qrcode.length > 0) {
|
||||||
|
qr_is_valid = is_emblem_qr_pattern(r.qrcode);
|
||||||
|
if (!qr_is_valid) {
|
||||||
|
return "无效编码";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (qr_is_valid) {
|
||||||
|
var err = r.err || "";
|
||||||
|
if (err.includes("margin too small")) {
|
||||||
|
return "对齐定位点";
|
||||||
|
} else if (err.includes("qr too small")) {
|
||||||
|
return "移近一点";
|
||||||
|
} else if (err.includes("too blurry")) {
|
||||||
|
return "保持稳定";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return "对齐定位点";
|
||||||
|
}
|
||||||
|
|
||||||
|
function handle_frame() {
|
||||||
|
try {
|
||||||
|
do_handle_frame();
|
||||||
|
} catch (e) {
|
||||||
|
debug_log("handle frame exception: " + e);
|
||||||
|
}
|
||||||
|
setTimeout(handle_frame, 20);
|
||||||
|
}
|
||||||
|
|
||||||
|
image_data_urls = [];
|
||||||
|
|
||||||
|
function do_handle_frame() {
|
||||||
|
if (busy) return;
|
||||||
|
const canvas = document.getElementById("original");
|
||||||
|
const video = document.getElementById("video");
|
||||||
|
|
||||||
|
canvas.width = video.width;
|
||||||
|
canvas.height = video.height;
|
||||||
|
|
||||||
|
canvas.style.width = video.width / 4 + "px";
|
||||||
|
canvas.style.height = video.height / 4 + "px";
|
||||||
|
|
||||||
|
const ctx = canvas.getContext("2d");
|
||||||
|
ctx.drawImage(video, 0, 0);
|
||||||
|
const id = ctx.getImageData(0, 0, canvas.width, canvas.height);
|
||||||
|
console.log(Module);
|
||||||
|
var buf = Module._malloc(id.data.length * id.data.BYTES_PER_ELEMENT);
|
||||||
|
Module.HEAPU8.set(id.data, buf);
|
||||||
|
var r = Module.ccall('qrtool_angle', 'string', ['number', 'number', 'number', 'number', 'number'], [buf, id.width, id.height, 0, camera_sensitivity]);
|
||||||
|
Module._free(buf);
|
||||||
|
debug_log(r);
|
||||||
|
const res = JSON.parse(r);
|
||||||
|
const is_valid_pattern = res.qrcode && res.qrcode.length && is_emblem_qr_pattern(res.qrcode);
|
||||||
|
if (res.qrcode && should_check_auto_torch) {
|
||||||
|
start_check_auto_torch(res.qrcode);
|
||||||
|
}
|
||||||
|
if (done_checking_auto_torch && is_valid_pattern && res.ok) {
|
||||||
|
var data_url = canvas.toDataURL("image/jpeg", 1.0);
|
||||||
|
image_data_urls.push(data_url);
|
||||||
|
if (image_data_urls.length >= 3) {
|
||||||
|
submit_image(res.qrcode, res.angle, image_data_urls);
|
||||||
|
image_data_urls = [];
|
||||||
|
} else {
|
||||||
|
pending_hint = make_hint_text(res);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
pending_hint = make_hint_text(res);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function start_check_auto_torch(qrcode)
|
||||||
|
{
|
||||||
|
should_check_auto_torch = false;
|
||||||
|
try {
|
||||||
|
var r = await fetch("https://themblem.com/api/v1/check-auto-torch/?qrcode=" + encodeURIComponent(qrcode), {
|
||||||
|
method: "GET",
|
||||||
|
});
|
||||||
|
var d = await r.json();
|
||||||
|
debug_log(JSON.stringify(d));
|
||||||
|
if (d.enable_auto_torch && !torch) {
|
||||||
|
toggle_torch();
|
||||||
|
}
|
||||||
|
camera_sensitivity = d.camera_sensitivity || 1.0;
|
||||||
|
} catch (e) {
|
||||||
|
debug_log("start_check_auto_torch exception: " + e);
|
||||||
|
}
|
||||||
|
setTimeout(() => {
|
||||||
|
done_checking_auto_torch = true;
|
||||||
|
}, 200);
|
||||||
|
}
|
||||||
|
|
||||||
|
function set_zoom(zoom) {
|
||||||
|
if (camera_capabilities.zoom) {
|
||||||
|
debug_log("set zoom by applying constraints");
|
||||||
|
track.applyConstraints({advanced: [ {zoom} ]});
|
||||||
|
} else {
|
||||||
|
debug_log("set zoom by scaling video element");
|
||||||
|
add_style_by_query("video.preview", "transform", `scale(${zoom})`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let torch = false;
|
||||||
|
function toggle_torch() {
|
||||||
|
torch = !torch;
|
||||||
|
track.applyConstraints({advanced: [ {torch: torch} ]});
|
||||||
|
if (torch) {
|
||||||
|
add_class_by_query(".bottomfixed .torch.action", "highlight");
|
||||||
|
} else {
|
||||||
|
remove_class_by_query(".bottomfixed .torch.action", "highlight");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function show_spinner() {
|
||||||
|
remove_class_by_query('.verifyspin', 'hidden');
|
||||||
|
remove_class_by_query('.spin-image', 'spin-only');
|
||||||
|
remove_class_by_query('.spin-image', 'spin-and-shrink');
|
||||||
|
setTimeout(() => {
|
||||||
|
add_class_by_query('.spin-image', 'spin-and-shrink');
|
||||||
|
setTimeout(() => {
|
||||||
|
remove_class_by_query('.spin-image', 'spin-and-shrink');
|
||||||
|
add_class_by_query('.spin-image', 'spin-only');
|
||||||
|
}, 3000);
|
||||||
|
}, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
function hide_spinner() {
|
||||||
|
add_class_by_query('.verifyspin', 'hidden');
|
||||||
|
}
|
||||||
|
|
||||||
|
async function submit_image(qrcode, angle, image_data_urls) {
|
||||||
|
busy = true;
|
||||||
|
var begin = Date.now();
|
||||||
|
show_spinner();
|
||||||
|
debug_log(`submit: qrcode: ${qrcode} angle: ${angle}`);
|
||||||
|
try {
|
||||||
|
// TODO: pass these parameters from query string
|
||||||
|
var emblem_id = get_query("emblem_id");
|
||||||
|
var nick_name = get_query("nick_name");
|
||||||
|
var realip = get_query("realip");
|
||||||
|
var phonemodel = get_query("phonemodel");
|
||||||
|
var data = {
|
||||||
|
emblem_id,
|
||||||
|
nick_name,
|
||||||
|
realip,
|
||||||
|
qrcode,
|
||||||
|
angle,
|
||||||
|
phonemodel,
|
||||||
|
image_data_urls,
|
||||||
|
log: debug_logs.join("\n"),
|
||||||
|
};
|
||||||
|
var r = await fetch("https://themblem.com/api/v1/qr-verify/", {
|
||||||
|
method: "POST",
|
||||||
|
body: JSON.stringify(data),
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
},
|
||||||
|
});
|
||||||
|
var d = await r.json();
|
||||||
|
debug_log(JSON.stringify(d));
|
||||||
|
if (wx) {
|
||||||
|
var delay = 3000 - (Date.now() - begin);
|
||||||
|
setTimeout(() => {
|
||||||
|
var wx_redirect_to = get_query("wx_redirect_to");
|
||||||
|
var query_params;
|
||||||
|
|
||||||
|
if (d.serial_code) {
|
||||||
|
// Success: pass ok=1 with qr_code and serial_code
|
||||||
|
query_params = `?ok=1&qr_code=${encodeURIComponent(qrcode)}&serial_code=${encodeURIComponent(d.serial_code)}`;
|
||||||
|
} else {
|
||||||
|
// Failure: pass ok=0 only
|
||||||
|
query_params = `?ok=0`;
|
||||||
|
}
|
||||||
|
|
||||||
|
wx.miniProgram.redirectTo({
|
||||||
|
url: wx_redirect_to + query_params,
|
||||||
|
});
|
||||||
|
}, delay > 0 ? delay : 0);
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
debug_log(`submission error: ${e}`);
|
||||||
|
if (wx) {
|
||||||
|
var delay = 3000 - (Date.now() - begin);
|
||||||
|
setTimeout(() => {
|
||||||
|
var wx_redirect_to = get_query("wx_redirect_to");
|
||||||
|
var query_params = `?ok=0`;
|
||||||
|
|
||||||
|
wx.miniProgram.redirectTo({
|
||||||
|
url: wx_redirect_to + query_params,
|
||||||
|
});
|
||||||
|
}, delay > 0 ? delay : 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var pending_hint = null;
|
||||||
|
|
||||||
|
function update_hint() {
|
||||||
|
if (pending_hint) {
|
||||||
|
const hint_dev = document.getElementById("hint");
|
||||||
|
hint_dev.innerHTML = pending_hint;
|
||||||
|
pending_hint = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function start() {
|
||||||
|
console.log("start");
|
||||||
|
setTimeout(handle_frame, 100);
|
||||||
|
hide_loading();
|
||||||
|
if (get_query("debug")) {
|
||||||
|
show_debug();
|
||||||
|
}
|
||||||
|
setInterval(update_hint, 1000);
|
||||||
|
setTimeout(() => {
|
||||||
|
show_tooltip();
|
||||||
|
}, 15000);
|
||||||
|
}
|
||||||
|
|
||||||
|
function show_tooltip() {
|
||||||
|
remove_class_by_query(".tooltip", "hidden");
|
||||||
|
add_class_by_query(".bottomfixed .action", "highlight");
|
||||||
|
}
|
||||||
|
|
||||||
|
function hide_tooltip() {
|
||||||
|
add_class_by_query(".tooltip", "hidden");
|
||||||
|
remove_class_by_query(".bottomfixed .action", "highlight");
|
||||||
|
}
|
||||||
|
|
||||||
|
async function init_scanguide() {
|
||||||
|
var r = await fetch('https://emblem-resources.oss-cn-guangzhou.aliyuncs.com/scan-guide-1080x1920-3.json');
|
||||||
|
var d = await r.json();
|
||||||
|
console.log("start scanguide", d);
|
||||||
|
const elem = document.getElementById("scanguide");
|
||||||
|
scanguide_anime = bodymovin.loadAnimation({
|
||||||
|
container: elem,
|
||||||
|
animationData: d,
|
||||||
|
// path: 'data.json',
|
||||||
|
renderer: 'svg',
|
||||||
|
loop: true,
|
||||||
|
autoplay: true,
|
||||||
|
name: "Scan guide",
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function add_style_by_query(query, property, style) {
|
||||||
|
var list = document.querySelectorAll(query);
|
||||||
|
for (var i = 0; i < list.length; ++i) {
|
||||||
|
list[i].style[property] = style;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function add_class_by_query(query, to_add) {
|
||||||
|
var list = document.querySelectorAll(query);
|
||||||
|
for (var i = 0; i < list.length; ++i) {
|
||||||
|
list[i].classList.add(to_add);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function remove_class_by_query(query, to_remove) {
|
||||||
|
var list = document.querySelectorAll(query);
|
||||||
|
for (var i = 0; i < list.length; ++i) {
|
||||||
|
list[i].classList.remove(to_remove);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var modals = ['serviceqr', 'scanguide', 'verifyspin'];
|
||||||
|
|
||||||
|
function hide_modal() {
|
||||||
|
busy = false;
|
||||||
|
scanguide_anime.stop();
|
||||||
|
add_class_by_query(".modal", "hidden");
|
||||||
|
hide_tooltip();
|
||||||
|
}
|
||||||
|
|
||||||
|
function show_modal(which) {
|
||||||
|
busy = true;
|
||||||
|
hide_tooltip();
|
||||||
|
hide_spinner();
|
||||||
|
add_class_by_query(".verifyspin", "hidden");
|
||||||
|
remove_class_by_query(".modal", "hidden");
|
||||||
|
remove_class_by_query('.actions', 'hidden');
|
||||||
|
for (var m of modals) {
|
||||||
|
add_class_by_query('.' + m, 'hidden');
|
||||||
|
}
|
||||||
|
if (which == 'scanguide') {
|
||||||
|
scanguide_anime.goToAndPlay(0);
|
||||||
|
remove_class_by_query('.scanguide', 'hidden');
|
||||||
|
}
|
||||||
|
if (which == 'serviceqr') {
|
||||||
|
remove_class_by_query('.serviceqr', 'hidden');
|
||||||
|
add_class_by_query('.actions', 'hidden');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function set_service_qr_img() {
|
||||||
|
var tid = get_query('tenant');
|
||||||
|
var url = '/api/v1/service-qr/?tenant=' + tid;
|
||||||
|
const elem = document.getElementById("service_img");
|
||||||
|
elem.src = url;
|
||||||
|
}
|
||||||
|
|
||||||
|
(function() {
|
||||||
|
start_camera();
|
||||||
|
init_scanguide();
|
||||||
|
set_service_qr_img();
|
||||||
|
})();
|
||||||