Skip to content

Commit 2ad964c

Browse files
Tom-DynamsoftTom-Dynamsoft
committed
fix a bug with react
1 parent 22b0cb8 commit 2ad964c

File tree

3 files changed

+21
-23
lines changed

3 files changed

+21
-23
lines changed

‎1.hello-world/4.read-video-react/src/components/BarcodeScanner.css‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
.component-barcode-scanner{width:100%;height:100%;position:relative;resize:both;}
2-
.dbrScanner-bg-loading{animation:1s linear infinite dbrScanner-rotate;width:40%;height:40%;position:absolute;margin:auto;left:0;top:0;right:0;bottom:0;fill:#aaa;}
3-
.dbrScanner-bg-camera{width:40%;height:40%;position:absolute;margin:auto;left:0;top:0;right:0;bottom:0;fill:#aaa;}
2+
.dbrScanner-bg-loading{display:none;animation:1s linear infinite dbrScanner-rotate;width:40%;height:40%;position:absolute;margin:auto;left:0;top:0;right:0;bottom:0;fill:#aaa;}
3+
.dbrScanner-bg-camera{display:none;width:40%;height:40%;position:absolute;margin:auto;left:0;top:0;right:0;bottom:0;fill:#aaa;}
44
.dbrScanner-video{width:100%;height:100%;position:absolute;left:0;top:0;}
55
.dbrScanner-cvs-drawarea{width:100%;height:100%;position:absolute;left:0;top:0;}
66
.dbrScanner-cvs-scanarea{width:100%;height:100%;position:absolute;left:0;top:0;}
7-
.dbrScanner-scanlight{width:100%;height:3%;position:absolute;animation:3s infinite dbrScanner-scanlight;border-radius:50%;box-shadow:0px 0px 2vw 1px #00e5ff;background:#fff;}
7+
.dbrScanner-scanlight{display:none;width:100%;height:3%;position:absolute;animation:3s infinite dbrScanner-scanlight;border-radius:50%;box-shadow:0px 0px 2vw 1px #00e5ff;background:#fff;user-select:none;}
88
.dbrScanner-sel-camera{margin:0 auto;position:absolute;left:0;top:0;}
9-
.dbrScanner-sel-resolution{position:absolute;left:0;top:20px;}
10-
.dbrScanner-poweredby{position:absolute;left:50%;bottom:3%;padding:0 5px;margin: 0;font-family:Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Noto Sans CJK SC,WenQuanYi Micro Hei,Arial,sans-serif;line-height:18px;font-size:12px;color:white;background-color: rgba(0,0,0,.3);border-radius:8px;transform:translateX(-50%);}
9+
.dbrScanner-sel-resolution{position:absolute;right:0;top:0;}
10+
.dbrScanner-msg-poweredby{position:absolute;left:50%;bottom:10%;transform:translateX(-50%);}
11+
.dbrScanner-msg-poweredby svg{height:max(3vmin,17px);fill:#FFFFFF;}
1112
@keyframes dbrScanner-rotate{from{transform:rotate(0turn);}to{transform:rotate(1turn);}}
1213
@keyframes dbrScanner-scanlight{from{top:0;}to{top:97%;}}

‎1.hello-world/4.read-video-react/src/components/BarcodeScanner.js‎

Lines changed: 11 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -46,31 +46,28 @@ class BarcodeScanner extends React.Component {
4646
render() {
4747
return (
4848
<div ref={this.elRef} className="component-barcode-scanner">
49-
<svg class="dbrScanner-bg-loading"
50-
style="display:none;animation:1s linear infinite dbrScanner-rotate;width:40%;height:40%;position:absolute;margin:auto;left:0;top:0;right:0;bottom:0;fill:#aaa;"
49+
<svg className="dbrScanner-bg-loading"
5150
viewBox="0 0 1792 1792">
5251
<path d="M1760 896q0 176-68.5 336t-184 275.5-275.5 184-336 68.5-336-68.5-275.5-184-184-275.5-68.5-336q0-213 97-398.5t265-305.5 374-151v228q-221 45-366.5 221t-145.5 406q0 130 51 248.5t136.5 204 204 136.5 248.5 51 248.5-51 204-136.5 136.5-204 51-248.5q0-230-145.5-406t-366.5-221v-228q206 31 374 151t265 305.5 97 398.5z" />
5352
</svg>
54-
<svg class="dbrScanner-bg-camera"
55-
style="display:none;width:40%;height:40%;position:absolute;margin:auto;left:0;top:0;right:0;bottom:0;fill:#aaa;"
53+
<svg className="dbrScanner-bg-camera"
5654
viewBox="0 0 2048 1792">
5755
<path d="M1024 672q119 0 203.5 84.5t84.5 203.5-84.5 203.5-203.5 84.5-203.5-84.5-84.5-203.5 84.5-203.5 203.5-84.5zm704-416q106 0 181 75t75 181v896q0 106-75 181t-181 75h-1408q-106 0-181-75t-75-181v-896q0-106 75-181t181-75h224l51-136q19-49 69.5-84.5t103.5-35.5h512q53 0 103.5 35.5t69.5 84.5l51 136h224zm-704 1152q185 0 316.5-131.5t131.5-316.5-131.5-316.5-316.5-131.5-316.5 131.5-131.5 316.5 131.5 316.5 316.5 131.5z" />
5856
</svg>
59-
<video class="dbrScanner-video" playsinline="true"
60-
style="width:100%;height:100%;position:absolute;left:0;top:0;"></video>
61-
<canvas class="dbrScanner-cvs-drawarea" style="width:100%;height:100%;position:absolute;left:0;top:0;"></canvas>
62-
<div class="dbrScanner-cvs-scanarea" style="width:100%;height:100%;position:absolute;left:0;top:0;">
63-
<div class="dbrScanner-scanlight" style="display:none;width:100%;height:3%;position:absolute;animation:3s infinite dbrScanner-scanlight;border-radius:50%;box-shadow:0px 0px 2vw 1px #00e5ff;background:#fff;user-select:none;"></div>
57+
<video className="dbrScanner-video" playsInline={true}></video>
58+
<canvas className="dbrScanner-cvs-drawarea"></canvas>
59+
<div className="dbrScanner-cvs-scanarea">
60+
<div className="dbrScanner-scanlight"></div>
6461
</div>
65-
<select class="dbrScanner-sel-camera" style="margin:0 auto;position:absolute;left:0;top:0;"></select>
66-
<select class="dbrScanner-sel-resolution" style="position:absolute;left:0;top:20px;"></select>
67-
<button class="dbrScanner-btn-close" style="position:absolute;right:0;top:0;">
62+
<select className="dbrScanner-sel-camera" hidden></select>
63+
<select className="dbrScanner-sel-resolution" hidden></select>
64+
<button className="dbrScanner-btn-close" hidden>
6865
<svg width="16" height="16" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
6966
<path d="M1490 1322q0 40-28 68l-136 136q-28 28-68 28t-68-28l-294-294-294 294q-28 28-68 28t-68-28l-136-136q-28-28-28-68t28-68l294-294-294-294q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 294 294-294q28-28 68-28t68 28l136 136q28 28 28 68t-28 68l-294 294 294 294q28 28 28 68z" />
7067
</svg>
7168
</button>
72-
<div class="dbrScanner-msg-poweredby" style="position:absolute;left:50%;bottom:10%;transform:translateX(-50%);">
73-
<svg viewBox="0 0 94 17" style="height:max(3vmin,17px);fill:#FFFFFF;">
69+
<div className="dbrScanner-msg-poweredby">
70+
<svg viewBox="0 0 94 17">
7471
<g>
7572
<path d="M0.9,14V4.3h2.3c0.6,0,1,0.1,1.4,0.3c0.3,0.2,0.6,0.5,0.7,0.9s0.2,0.8,0.2,1.4c0,0.5-0.1,0.9-0.2,1.3
7673
C5.1,8.5,4.9,8.8,4.5,9.1C4.2,9.3,3.7,9.4,3.2,9.4H1.8V14H0.9z M1.8,8.7h1.2c0.4,0,0.7-0.1,1-0.2S4.3,8.2,4.4,8

‎1.hello-world/4.read-video-react/yarn.lock‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4159,10 +4159,10 @@ duplexify@^3.4.2, duplexify@^3.6.0:
41594159
readable-stream "^2.0.0"
41604160
stream-shift "^1.0.0"
41614161

4162-
dynamsoft-javascript-barcode@8.2.5:
4163-
version "8.2.5"
4164-
resolved "https://registry.nlark.com/dynamsoft-javascript-barcode/download/dynamsoft-javascript-barcode-8.2.5.tgz#43006db0bf362a9d0142e5785e94c1a3e963ee01"
4165-
integrity sha1-QwBtsL82Kp0BQuV4XpTBo+lj7gE=
4162+
dynamsoft-javascript-barcode@8.4.0:
4163+
version "8.4.0"
4164+
resolved "https://registry.nlark.com/dynamsoft-javascript-barcode/download/dynamsoft-javascript-barcode-8.4.0.tgz#c81c4a9ec1f1dd4617a7a836c53f1997fd5d22b6"
4165+
integrity sha1-yBxKnsHx3UYXp6g2xT8Zl/1dIrY=
41664166

41674167
ecc-jsbn@~0.1.1:
41684168
version "0.1.2"

0 commit comments

Comments
 (0)