@wemap/camera 5.0.0 → 5.1.0
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/index.js +1 -1
- package/package.json +4 -4
- package/src/Camera.js +1 -1
- package/src/QrCodeScanner.js +1 -1
- package/debug/dist/camera-logger.html +0 -79
- package/debug/dist/index.html +0 -16
- package/debug/dist/qr-code-scanner.html +0 -115
- package/debug/dist/simple.html +0 -109
package/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { BarcodeFormat } from '@zxing/library
|
|
1
|
+
export { BarcodeFormat } from '@zxing/library';
|
|
2
2
|
export { default as Camera } from './src/Camera.js';
|
|
3
3
|
export { default as QrCodeScanner } from './src/QrCodeScanner.js';
|
|
4
4
|
export { default as SharedCameras } from './src/SharedCameras.js';
|
package/package.json
CHANGED
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
"directory": "packages/camera"
|
|
12
12
|
},
|
|
13
13
|
"name": "@wemap/camera",
|
|
14
|
-
"version": "5.
|
|
14
|
+
"version": "5.1.0",
|
|
15
15
|
"bugs": {
|
|
16
16
|
"url": "https://github.com/wemap/wemap-modules-js/issues"
|
|
17
17
|
},
|
|
@@ -23,9 +23,9 @@
|
|
|
23
23
|
],
|
|
24
24
|
"license": "ISC",
|
|
25
25
|
"dependencies": {
|
|
26
|
-
"@zxing/library": "^0.18.
|
|
27
|
-
"events": "^3.
|
|
26
|
+
"@zxing/library": "^0.18.4",
|
|
27
|
+
"events": "^3.3.0"
|
|
28
28
|
},
|
|
29
29
|
"type": "module",
|
|
30
|
-
"gitHead": "
|
|
30
|
+
"gitHead": "0133b575647d871440689d4388edcfd45870cc51"
|
|
31
31
|
}
|
package/src/Camera.js
CHANGED
|
@@ -76,7 +76,7 @@ class Camera extends EventEmitter {
|
|
|
76
76
|
const metadataPr = new Promise(resolve => (this.videoElement.onloadedmetadata = resolve));
|
|
77
77
|
|
|
78
78
|
this.videoElement.srcObject = this.videoStream = stream;
|
|
79
|
-
await metadataPr
|
|
79
|
+
await metadataPr;
|
|
80
80
|
|
|
81
81
|
this._resizeElement();
|
|
82
82
|
this._computeFov();
|
package/src/QrCodeScanner.js
CHANGED
|
@@ -1,79 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
|
|
4
|
-
<head>
|
|
5
|
-
<meta charset="UTF-8">
|
|
6
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
|
-
<title>Camera</title>
|
|
8
|
-
|
|
9
|
-
<script src="/js/camera-lib.js"></script>
|
|
10
|
-
|
|
11
|
-
<style type="text/css">
|
|
12
|
-
html {
|
|
13
|
-
height: 100%;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
body {
|
|
17
|
-
height: 100%;
|
|
18
|
-
margin: 0px;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
#camera-container {
|
|
22
|
-
width: 100%;
|
|
23
|
-
height: 100%;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
#logger {
|
|
27
|
-
background: #ffffffaa;
|
|
28
|
-
position: absolute;
|
|
29
|
-
bottom: 0;
|
|
30
|
-
left: 0;
|
|
31
|
-
z-index: 2;
|
|
32
|
-
margin: 5px;
|
|
33
|
-
padding-left: 10px;
|
|
34
|
-
padding-right: 10px;
|
|
35
|
-
min-width: 100px;
|
|
36
|
-
}
|
|
37
|
-
</style>
|
|
38
|
-
</head>
|
|
39
|
-
|
|
40
|
-
<body>
|
|
41
|
-
|
|
42
|
-
<div id="camera-container"></div>
|
|
43
|
-
<div id="logger">
|
|
44
|
-
<div class="title">Logger</div>
|
|
45
|
-
<button id="start">Start</button>
|
|
46
|
-
<button id="stop" disabled>Stop</button>
|
|
47
|
-
</div>
|
|
48
|
-
|
|
49
|
-
<script>
|
|
50
|
-
/* global Camera */
|
|
51
|
-
|
|
52
|
-
const cameraContainer = document.getElementById('camera-container');
|
|
53
|
-
const camera = new Camera(cameraContainer);
|
|
54
|
-
|
|
55
|
-
const SERVER_URL = 'https://localhost:9002';
|
|
56
|
-
|
|
57
|
-
const startButton = document.getElementById('start');
|
|
58
|
-
const stopButton = document.getElementById('stop');
|
|
59
|
-
|
|
60
|
-
startButton.addEventListener('click', () => {
|
|
61
|
-
document.dispatchEvent(new CustomEvent('providers.logger.start', {detail: {
|
|
62
|
-
serverUrl: SERVER_URL,
|
|
63
|
-
logsSize: 300
|
|
64
|
-
}}));
|
|
65
|
-
camera.start();
|
|
66
|
-
startButton.disabled = true;
|
|
67
|
-
stopButton.disabled = false;
|
|
68
|
-
});
|
|
69
|
-
|
|
70
|
-
stopButton.addEventListener('click', () => {
|
|
71
|
-
document.dispatchEvent(new Event('providers.logger.stop'));
|
|
72
|
-
camera.stop();
|
|
73
|
-
startButton.disabled = false;
|
|
74
|
-
stopButton.disabled = true;
|
|
75
|
-
});
|
|
76
|
-
</script>
|
|
77
|
-
</body>
|
|
78
|
-
|
|
79
|
-
</html>
|
package/debug/dist/index.html
DELETED
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html>
|
|
3
|
-
|
|
4
|
-
<head>
|
|
5
|
-
<meta charset="utf-8">
|
|
6
|
-
<meta name="viewport" content="width=device-width, user-scalable=no">
|
|
7
|
-
<title>Camera debug</title>
|
|
8
|
-
</head>
|
|
9
|
-
|
|
10
|
-
<body>
|
|
11
|
-
<a href="./simple.html">Simple</a><br />
|
|
12
|
-
<a href="./camera-logger.html">Camera-logger</a><br />
|
|
13
|
-
<a href="./qr-code-scanner.html">QR Code Scanner</a>
|
|
14
|
-
</body>
|
|
15
|
-
|
|
16
|
-
</html>
|
|
@@ -1,115 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
|
|
4
|
-
<head>
|
|
5
|
-
<meta charset="UTF-8">
|
|
6
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
|
-
<title>Camera</title>
|
|
8
|
-
|
|
9
|
-
<script src="/js/camera-lib.js"></script>
|
|
10
|
-
|
|
11
|
-
<style type="text/css">
|
|
12
|
-
html,
|
|
13
|
-
body {
|
|
14
|
-
height: 100%;
|
|
15
|
-
margin: 0px;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
#camera-container {
|
|
19
|
-
width: 100%;
|
|
20
|
-
height: 100%;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
#controls {
|
|
24
|
-
position: absolute;
|
|
25
|
-
bottom: 0;
|
|
26
|
-
z-index: 2;
|
|
27
|
-
margin: 5px;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
#controls>div {
|
|
31
|
-
background: #ffffffaa;
|
|
32
|
-
padding-left: 10px;
|
|
33
|
-
padding-right: 10px;
|
|
34
|
-
min-width: 100px;
|
|
35
|
-
display: inline-block;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
#scan-result {
|
|
39
|
-
position: absolute;
|
|
40
|
-
border: 1px solid black;
|
|
41
|
-
background: white;
|
|
42
|
-
top: 0;
|
|
43
|
-
width: 150px;
|
|
44
|
-
left: 50%;
|
|
45
|
-
transform: translate(-50%, 0%);
|
|
46
|
-
z-index: 2;
|
|
47
|
-
text-align: center;
|
|
48
|
-
line-height: 30px;
|
|
49
|
-
vertical-align: middle;
|
|
50
|
-
}
|
|
51
|
-
</style>
|
|
52
|
-
</head>
|
|
53
|
-
|
|
54
|
-
<body>
|
|
55
|
-
|
|
56
|
-
<div id="camera-container"></div>
|
|
57
|
-
<div id="scan-result">Waiting</div>
|
|
58
|
-
<div id="controls">
|
|
59
|
-
<div id="camera-handler">
|
|
60
|
-
<div class="title">Camera</div>
|
|
61
|
-
<button id="start-camera">Start</button>
|
|
62
|
-
<button id="stop-camera" disabled>Stop</button>
|
|
63
|
-
</div>
|
|
64
|
-
<div id="qrcode-handler">
|
|
65
|
-
<div class="title">Scanner</div>
|
|
66
|
-
<button id="start-scanner">Start</button>
|
|
67
|
-
<button id="stop-scanner" disabled>Stop</button>
|
|
68
|
-
</div>
|
|
69
|
-
</div>
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
<script>
|
|
73
|
-
/* global Camera, QrCodeScanner */
|
|
74
|
-
|
|
75
|
-
const cameraContainer = document.getElementById('camera-container');
|
|
76
|
-
const scanResultContainer = document.getElementById('scan-result');
|
|
77
|
-
const startCameraButton = document.getElementById('start-camera');
|
|
78
|
-
const stopCameraButton = document.getElementById('stop-camera');
|
|
79
|
-
const startScannerButton = document.getElementById('start-scanner');
|
|
80
|
-
const stopScannerButton = document.getElementById('stop-scanner');
|
|
81
|
-
|
|
82
|
-
const camera = new Camera(cameraContainer);
|
|
83
|
-
const qrCodeScanner = new QrCodeScanner(camera);
|
|
84
|
-
qrCodeScanner.on('scan', str => (scanResultContainer.innerHTML = str));
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
startCameraButton.addEventListener('click', () => {
|
|
88
|
-
camera.start();
|
|
89
|
-
startCameraButton.disabled = true;
|
|
90
|
-
stopCameraButton.disabled = false;
|
|
91
|
-
});
|
|
92
|
-
|
|
93
|
-
stopCameraButton.addEventListener('click', () => {
|
|
94
|
-
camera.stop();
|
|
95
|
-
startCameraButton.disabled = false;
|
|
96
|
-
stopCameraButton.disabled = true;
|
|
97
|
-
});
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
startScannerButton.addEventListener('click', () => {
|
|
101
|
-
qrCodeScanner.start();
|
|
102
|
-
startScannerButton.disabled = true;
|
|
103
|
-
stopScannerButton.disabled = false;
|
|
104
|
-
});
|
|
105
|
-
|
|
106
|
-
stopScannerButton.addEventListener('click', () => {
|
|
107
|
-
qrCodeScanner.stop();
|
|
108
|
-
startScannerButton.disabled = false;
|
|
109
|
-
stopScannerButton.disabled = true;
|
|
110
|
-
scanResultContainer.innerHTML = 'Waiting';
|
|
111
|
-
});
|
|
112
|
-
</script>
|
|
113
|
-
</body>
|
|
114
|
-
|
|
115
|
-
</html>
|
package/debug/dist/simple.html
DELETED
|
@@ -1,109 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
|
|
4
|
-
<head>
|
|
5
|
-
<meta charset="UTF-8">
|
|
6
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
|
-
<title>Camera</title>
|
|
8
|
-
|
|
9
|
-
<script src="/js/camera-lib.js"></script>
|
|
10
|
-
|
|
11
|
-
<style type="text/css">
|
|
12
|
-
html {
|
|
13
|
-
height: 100%;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
body {
|
|
17
|
-
height: 100%;
|
|
18
|
-
margin: 0px;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
#camera-container {
|
|
22
|
-
background-color: red;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
#css-switcher {
|
|
26
|
-
position: absolute;
|
|
27
|
-
top: 0px;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
#camera-toggle {
|
|
31
|
-
position: absolute;
|
|
32
|
-
top: 30px;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
#fov-container {
|
|
36
|
-
position: absolute;
|
|
37
|
-
bottom: 0px;
|
|
38
|
-
margin: 5px;
|
|
39
|
-
background-color: white;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
#camera-container.classic {
|
|
43
|
-
width: 800px;
|
|
44
|
-
height: 600px;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
#camera-container.full {
|
|
48
|
-
width: 100%;
|
|
49
|
-
height: 100%;
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
#camera-container.wide {
|
|
53
|
-
width: 800px;
|
|
54
|
-
height: 200px;
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
#camera-container.slim {
|
|
58
|
-
width: 200px;
|
|
59
|
-
height: 600px;
|
|
60
|
-
}
|
|
61
|
-
</style>
|
|
62
|
-
</head>
|
|
63
|
-
|
|
64
|
-
<body>
|
|
65
|
-
|
|
66
|
-
<div id="camera-container" class="classic"></div>
|
|
67
|
-
<button id="css-switcher">Switch Camera size</button>
|
|
68
|
-
<button id="camera-toggle">Start</button>
|
|
69
|
-
<div id="fov-container"></div>
|
|
70
|
-
|
|
71
|
-
<script>
|
|
72
|
-
/* global Camera */
|
|
73
|
-
|
|
74
|
-
const cameraContainer = document.getElementById('camera-container');
|
|
75
|
-
const cameraToggle = document.getElementById('camera-toggle');
|
|
76
|
-
const fovContainer = document.getElementById('fov-container');
|
|
77
|
-
|
|
78
|
-
const camera = new Camera(cameraContainer);
|
|
79
|
-
|
|
80
|
-
camera.on('fov.changed', ({
|
|
81
|
-
vertical, horizontal
|
|
82
|
-
}) => (fovContainer.innerHTML = `FOV: ${vertical.toFixed(2)}, ${horizontal.toFixed(2)}`));
|
|
83
|
-
|
|
84
|
-
const format = ['classic', 'full', 'wide', 'slim'];
|
|
85
|
-
document.getElementById('css-switcher').addEventListener('click', () => {
|
|
86
|
-
cameraContainer.className = format[(format.indexOf(cameraContainer.className) + 1) % format.length];
|
|
87
|
-
camera.notifyContainerSizeChanged();
|
|
88
|
-
});
|
|
89
|
-
|
|
90
|
-
cameraToggle.addEventListener('click', () => {
|
|
91
|
-
cameraToggle.disabled = true;
|
|
92
|
-
if (cameraToggle.innerHTML === 'Start') {
|
|
93
|
-
camera.start().then(() => {
|
|
94
|
-
cameraToggle.disabled = false;
|
|
95
|
-
});
|
|
96
|
-
cameraToggle.innerHTML = 'Stop';
|
|
97
|
-
} else {
|
|
98
|
-
camera.stop().then(() => {
|
|
99
|
-
cameraToggle.disabled = false;
|
|
100
|
-
});
|
|
101
|
-
fovContainer.innerHTML = '';
|
|
102
|
-
cameraToggle.innerHTML = 'Start';
|
|
103
|
-
}
|
|
104
|
-
});
|
|
105
|
-
|
|
106
|
-
</script>
|
|
107
|
-
</body>
|
|
108
|
-
|
|
109
|
-
</html>
|