-
Notifications
You must be signed in to change notification settings - Fork 36
/
index.bs
499 lines (413 loc) · 25 KB
/
index.bs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
<pre class="metadata">
Title: Accelerated Shape Detection in Images
Repository: wicg/shape-detection-api
Status: CG-DRAFT
ED: https://wicg.github.io/shape-detection-api
Shortname: shape-detection-api
Level: 1
Editor: Miguel Casas-Sanchez 82825, Google LLC https://www.google.com, [email protected]
Editor: Reilly Grant 83788, Google LLC https://www.google.com, [email protected]
Abstract: This document describes an API providing access to accelerated shape detectors (e.g. human faces) for still images and/or live image feeds.
Translation: zh-CN https://wicg.github.io/shape-detection-api/index-zh-cn.html
Group: wicg
Markup Shorthands: markdown yes
!Participate: <a href="https://www.w3.org/community/wicg/">Join the W3C Community Group</a>
!Participate: <a href="https://github.com/WICG/shape-detection-api">Fix the text through GitHub</a>
</pre>
<style>
table {
border-collapse: collapse;
border-left-style: hidden;
border-right-style: hidden;
text-align: left;
}
table caption {
font-weight: bold;
padding: 3px;
text-align: left;
}
table td, table th {
border: 1px solid black;
padding: 3px;
}
</style>
# Introduction # {#introduction}
Photos and images constitute the largest chunk of the Web, and many include recognisable features, such as human faces or barcordes/QR codes. Detecting these features is computationally expensive, but would lead to interesting use cases e.g. face tagging, or web URL redirection. While hardware manufacturers have been supporting these features for a long time, Web Apps do not yet have access to these hardware capabilities, which makes the use of computationally demanding libraries necessary.
<p class="note">
Text Detection, despite being an interesting field, is not considered stable enough across neither computing platforms nor character sets to be standarized in the context of this document. For reference a sister informative specification is kept in [[TEXT-DETECTION-API]].
</p>
## Shape detection use cases ## {#use-cases}
Please see the <a href="https://github.com/WICG/shape-detection-api/blob/master/README.md">Readme/Explainer</a> in the repository.
# Shape Detection API # {#api}
Individual browsers MAY provide Detectors indicating the availability of hardware providing accelerated operation.
Detecting features in an image occurs asynchronously, potentially communicating with acceleration hardware independent of the browser. Completion events use the <dfn>shape detection task source</dfn>.
## Image sources for detection ## {#image-sources-for-detection}
<p class="note">
This section is inspired by [[2dcontext#image-sources-for-2d-rendering-contexts]].
</p>
{{ImageBitmapSource}} allows objects implementing any of a number of interfaces to be used as image sources for the detection process.
* When an {{ImageBitmapSource}} object represents an {{HTMLImageElement}}, the element's image must be used as the source image. Specifically, when an {{ImageBitmapSource}} object represents an animated image in an {{HTMLImageElement}}, the user agent must use the default image of the animation (the one that the format defines is to be used when animation is not supported or is disabled), or, if there is no such image, the first frame of the animation.
* When an {{ImageBitmapSource}} object represents an {{HTMLVideoElement}}, then the frame at the current playback position when the method with the argument is invoked must be used as the source image when processing the image, and the source image's dimensions must be the <a href="https://drafts.csswg.org/css2/conform.html#intrinsic">intrinsic dimensions</a> of the media resource (i.e. after any aspect-ratio correction has been applied).
* When an {{ImageBitmapSource}} object represents an {{HTMLCanvasElement}}, the element's bitmap must be used as the source image.
When the UA is required to use a given type of {{ImageBitmapSource}} as input argument for the `detect()` method of whichever detector, it MUST run these steps:
* If any {{ImageBitmapSource}} have an effective script origin ([=origin=]) which is not the same as the Document's effective script origin, then reject the Promise with a new {{DOMException}} whose name is {{SecurityError}}.
* If the {{ImageBitmapSource}} is an {{HTMLImageElement}} object that is in the `Broken` (<a href="https://html.spec.whatwg.org/multipage/#img-error">HTML Standard §img-error</a>) state, then reject the Promise with a new {{DOMException}} whose name is {{InvalidStateError}}, and abort any further steps.
* If the {{ImageBitmapSource}} is an {{HTMLImageElement}} object that is not fully decodable then reject the Promise with a new {{DOMException}} whose name is {{InvalidStateError}}, and abort any further steps
* If the {{ImageBitmapSource}} is an {{HTMLVideoElement}} object whose {{HTMLMediaElement/readyState}} attribute is either {{HAVE_NOTHING}} or {{HAVE_METADATA}} then reject the Promise with a new {{DOMException}} whose name is {{InvalidStateError}}, and abort any further steps.
* If the {{ImageBitmapSource}} argument is an {{HTMLCanvasElement}} whose bitmap's `origin-clean` (<a href="https://html.spec.whatwg.org/multipage/#concept-canvas-origin-clean">HTML Standard §concept-canvas-origin-clean</a>) flag is false, then reject the Promise with a new {{DOMException}} whose name is {{SecurityError}}, and abort any further steps.
Note that if the {{ImageBitmapSource}} is an object with either a horizontal dimension or a vertical dimension equal to zero, then the Promise will be simply resolved with an empty sequence of detected objects.
## Face Detection API ## {#face-detection-api}
{{FaceDetector}} represents an underlying accelerated platform's component for detection of human faces in images. It can be created with an optional Dictionary of {{FaceDetectorOptions}}. It provides a single {{FaceDetector/detect()}} operation on an {{ImageBitmapSource}} which result is a Promise. This method MUST reject this promise in the cases detailed in [[#image-sources-for-detection]]; otherwise it MAY queue a task that utilizes the OS/Platform resources to resolve the Promise with a Sequence of {{DetectedFace}}s, each one essentially consisting on and delimited by a {{DetectedFace/boundingBox}}.
<div class="example">
Example implementations of face detection are e.g. <a href="https://developer.android.com/reference/android/media/FaceDetector.html">Android FaceDetector</a> (or the <a href="https://developers.google.com/android/reference/com/google/android/gms/vision/face/Face">Google Play Services vision library</a>), Apple's <a href="https://developer.apple.com/reference/coreimage/cifacefeature?language=objc">CIFaceFeature</a> / <a href="https://developer.apple.com/documentation/vision/vndetectfacelandmarksrequest?language=objc">VNDetectFaceLandmarksRequest</a> or <a href="https://msdn.microsoft.com/library/windows/apps/windows.media.faceanalysis.facedetector.aspx">Windows 10 FaceDetector</a>.
</div>
<xmp class="idl">
[Exposed=(Window,Worker),
SecureContext]
interface FaceDetector {
constructor(optional FaceDetectorOptions faceDetectorOptions = {});
Promise<sequence<DetectedFace>> detect(ImageBitmapSource image);
};
</xmp>
<dl class="domintro">
<dt><dfn constructor for="FaceDetector"><code>FaceDetector(optional FaceDetectorOptions |faceDetectorOptions|)</code></dfn></dt>
<dd>Constructs a new {{FaceDetector}} with the optional |faceDetectorOptions|.
<div class="note">
Detectors may potentially allocate and hold significant resources. Where possible, reuse the same {{FaceDetector}} for several detections.
</div>
</dd>
<dt><dfn method for="FaceDetector"><code>detect(ImageBitmapSource |image|)</code></dfn></dt>
<dd>Tries to detect human faces in the {{ImageBitmapSource}} |image|. The detected faces, if any, are returned as a sequence of {{DetectedFace}}s.</dd>
</dl>
### {{FaceDetectorOptions}} ### {#facedetectoroptions-section}
<xmp class="idl">
dictionary FaceDetectorOptions {
unsigned short maxDetectedFaces;
boolean fastMode;
};
</xmp>
<dl class="domintro">
<dt><dfn dict-member for="FaceDetectorOptions">`maxDetectedFaces`</dfn></dt>
<dd>Hint to the UA to try and limit the amount of detected faces on the scene to this maximum number.</dd>
<dt><dfn dict-member for="FaceDetectorOptions">`fastMode`</dfn></dt>
<dd>Hint to the UA to try and prioritise speed over accuracy by e.g. operating on a reduced scale or looking for large features.</dd>
</dl>
### {{DetectedFace}} ### {#detectedface-section}
<xmp class="idl">
dictionary DetectedFace {
required DOMRectReadOnly boundingBox;
required sequence<Landmark>? landmarks;
};
</xmp>
<dl class="domintro">
<dt><dfn dict-member for="DetectedFace">`boundingBox`</dfn></dt>
<dd>A rectangle indicating the position and extent of a detected feature aligned to the image axes.</dd>
<dt><dfn dict-member for="DetectedFace">`landmarks`</dfn></dt>
<dd>A series of features of interest related to the detected feature.</dd>
</dl>
<xmp class="idl">
dictionary Landmark {
required sequence<Point2D> locations;
LandmarkType type;
};
</xmp>
<dl class="domintro">
<dt><dfn dict-member for="Landmark">`locations`</dfn></dt>
<dd>A point in the center of the detected landmark, or a <a>sequence</a> of points defining the vertices of a simple polygon surrounding the landmark in either a clockwise or counter-clockwise direction.</dd>
<dt><dfn dict-member for="Landmark">`type`</dfn></dt>
<dd>Type of the landmark, if known.</dd>
</dl>
<xmp class="idl">
enum LandmarkType {
"mouth",
"eye",
"nose"
};
</xmp>
<dl class="domintro">
<dt><dfn enum-value for="LandmarkType">`mouth`</dfn></dt>
<dd>The landmark is identified as a human mouth.</dd>
<dt><dfn enum-value for="LandmarkType">`eye`</dfn></dt>
<dd>The landmark is identified as a human eye.</dd>
<dt><dfn enum-value for="LandmarkType">`nose`</dfn></dt>
<dd>The landmark is identified as a human nose.</dd>
</dl>
<div class="note">
Consider adding attributes such as, e.g.:
<pre>
[SameObject] readonly attribute unsigned long id;
</pre>
to {{DetectedFace}}.
</div>
## Barcode Detection API ## {#barcode-detection-api}
{{BarcodeDetector}} represents an underlying accelerated platform's component for detection of linear or two-dimensional barcodes in images. It provides a single {{BarcodeDetector/detect()}} operation on an {{ImageBitmapSource}} which result is a Promise. This method MUST reject this Promise in the cases detailed in [[#image-sources-for-detection]]; otherwise it MAY queue a task using the OS/Platform resources to resolve the Promise with a sequence of {{DetectedBarcode}}s, each one essentially consisting on and delimited by a {{DetectedBarcode/boundingBox}} and a series of {{Point2D}}s, and possibly a {{DetectedBarcode/rawValue}} decoded {{DOMString}}.
<div class="example">
Example implementations of Barcode/QR code detection are e.g. <a href="https://developers.google.com/android/reference/com/google/android/gms/vision/barcode/package-summary">Google Play Services</a> or Apple's <a href="https://developer.apple.com/reference/coreimage/ciqrcodefeature?language=objc">CIQRCodeFeature</a> / <a href="https://developer.apple.com/documentation/vision/vndetectbarcodesrequest?language=objc">VNDetectBarcodesRequest</a>.
</div>
<xmp class="idl">
[Exposed=(Window,Worker),
SecureContext]
interface BarcodeDetector {
constructor(optional BarcodeDetectorOptions barcodeDetectorOptions = {});
static Promise<sequence<BarcodeFormat>> getSupportedFormats();
Promise<sequence<DetectedBarcode>> detect(ImageBitmapSource image);
};
</xmp>
<dl class="domintro">
<dt><dfn constructor for="BarcodeDetector"><code>BarcodeDetector(optional BarcodeDetectorOptions |barcodeDetectorOptions|)</code></dfn></dt>
<dd>Constructs a new {{BarcodeDetector}} with |barcodeDetectorOptions|.
* If |barcodeDetectorOptions|.{{BarcodeDetectorOptions/formats}} is present and empty, then throw a new {{TypeError}}.
* If |barcodeDetectorOptions|.{{BarcodeDetectorOptions/formats}} is present and contains {{unknown}}, then throw a new {{TypeError}}.
<div class="note">
Detectors may potentially allocate and hold significant resources. Where possible, reuse the same {{BarcodeDetector}} for several detections.
</div>
</dd>
<dt><dfn method for="BarcodeDetector">`getSupportedFormats()`</dfn></dt>
<dd>This method, when invoked, MUST return a new {{Promise}} |promise| and run the following steps <a>in parallel</a>:
<ol>
<li>Let |supportedFormats| be a new {{Array}}.</li>
<li>If the UA does not support barcode detection, [=queue a global task=] on the [=relevant global object=] of [=this=] using the [=shape detection task source=] to [=resolve=] |promise| with |supportedFormats| and abort these steps.</li>
<li>Enumerate the {{BarcodeFormat}}s that the UA understands as potentially detectable in images. Add these to |supportedFormats|.
<div class="note">
The UA cannot give a definitive answer as to whether a given barcode format will <i>always</i> be recognized on an image due to e.g. positioning of the symbols or encoding errors. If a given barcode symbology is not in |supportedFormats| array, however, it should not be detectable whatsoever.
</div>
</li>
<li>[=Queue a global task=] on the [=relevant global object=] of [=this=] using the [=shape detection task source=] to [=resolve=] |promise| with |supportedFormats|.</li>
</ol>
<div class="note">
The list of supported {{BarcodeFormat}}s is platform dependent, some examples are the ones supported by <a href="https://developers.google.com/android/reference/com/google/android/gms/vision/barcode/BarcodeDetector.Builder.html#setBarcodeFormats(int)">Google Play Services</a> and <a href="https://developer.apple.com/documentation/coreimage/ciqrcodefeature?preferredLanguage=occ#overview">Apple's QICRCodeFeature</a>.
</div>
</dd>
<dt><dfn method for="BarcodeDetector"><code>detect(ImageBitmapSource |image|)</code></dfn></dt>
<dd>Tries to detect barcodes in the {{ImageBitmapSource}} |image|.</dd>
</dl>
### {{BarcodeDetectorOptions}} ### {#barcodedetectoroptions-section}
<xmp class="idl">
dictionary BarcodeDetectorOptions {
sequence<BarcodeFormat> formats;
};
</xmp>
<dl class="domintro">
<dt><dfn dict-member for="BarcodeDetectorOptions">`formats`</dfn></dt>
<dd>A series of {{BarcodeFormat}}s to search for in the subsequent {{BarcodeDetector/detect()}} calls. If not present then the UA SHOULD search for all supported formats.
<div class="note">
Limiting the search to a particular subset of supported formats is likely to provide better performance.
</div>
</dd>
</dl>
### {{DetectedBarcode}} ### {#detectedbarcode-section}
<xmp class="idl">
dictionary DetectedBarcode {
required DOMRectReadOnly boundingBox;
required DOMString rawValue;
required BarcodeFormat format;
required sequence<Point2D> cornerPoints;
};
</xmp>
<dl class="domintro">
<dt><dfn dict-member for="DetectedBarcode">`boundingBox`</dfn></dt>
<dd>A rectangle indicating the position and extent of a detected feature aligned to the image</dd>
<dt><dfn dict-member for="DetectedBarcode">`rawValue`</dfn></dt>
<dd>String decoded from the barcode. This value might be multiline.</dd>
<dt><dfn dict-member for="DetectedBarcode">`format`</dfn></dt>
<dd>Detect {{BarcodeFormat}}.</dd>
<dt><dfn dict-member for="DetectedBarcode">`cornerPoints`</dfn></dt>
<dd>A <a>sequence</a> of corner points of the detected barcode, in clockwise direction and starting with top-left. This is not necessarily a square due to possible perspective distortions.</dd>
</dl>
### {{BarcodeFormat}} ### {#barcodeformat-section}
<xmp class="idl">
enum BarcodeFormat {
"aztec",
"code_128",
"code_39",
"code_93",
"codabar",
"data_matrix",
"ean_13",
"ean_8",
"itf",
"pdf417",
"qr_code",
"unknown",
"upc_a",
"upc_e"
};
</xmp>
<dl class="domintro">
<dt><dfn enum-value for="BarcodeFormat">`aztec`</dfn></dt>
<dd>This entry represents a square two-dimensional matrix following [[iso24778]] and with a square bullseye pattern at their centre, thus resembling an Aztec pyramid. Does not require a surrounding blank zone.
</dd>
<dt><dfn enum-value for="BarcodeFormat">`code_128`</dfn></dt>
<dd><dfn>Code 128</dfn> is a linear (one-dimensional), bidirectionally-decodable, self-checking barcode following [[iso15417]] and able to encode all 128 characters of ASCII (hence the naming).
</dd>
<dt><dfn enum-value for="BarcodeFormat">`code_39`</dfn></dt>
<dd>This part talks about the <dfn>Code 39</dfn> barcode. It is a discrete and variable-length barcode type.
[[iso16388]]
</dd>
<dt><dfn enum-value for="BarcodeFormat">`code_93`</dfn></dt>
<dd> Code 93 is a linear, continuous symbology with a variable length following [[bc5]]. It offers a larger information density than <a>Code 128</a> and the visually similar <a>Code 39</a>. Code 93 is used primarily by Canada Post to encode supplementary delivery information.</dd>
<dt><dfn enum-value for="BarcodeFormat">`codabar`</dfn></dt>
<dd>Codabar is a linear barcode symbology developed in 1972 by Pitney Bowes Corp. (
</dd>
<dt><dfn enum-value for="BarcodeFormat">`data_matrix`</dfn></dt>
<dd> Data Matrix is an orientation-independent two-dimensional barcode composed of black and white modules arranged in either a square or rectangular pattern following [[iso16022]].</dd>
<dt><dfn enum-value for="BarcodeFormat">`ean_13`</dfn></dt>
<dd><dfn>EAN-13</dfn> is a linear barcode based on the <a>UPC-A</a> standard and defined in [[iso15420]]. It was originally developed by the International Article Numbering Association (EAN) in Europe as a superset of the original 12-digit Universal Product Code (UPC) system developed in the United States (<a>UPC-A</a> codes are represented in EAN-13 with the first character set to <var>0</var>).</dd>
<dt><dfn enum-value for="BarcodeFormat">`ean_8`</dfn></dt>
<dd>EAN-8 is a linear barcode defined in [[iso15420]] and derived from <a>EAN-13</a>.</dd>
<dt><dfn enum-value for="BarcodeFormat">`itf`</dfn></dt>
<dd>ITF14 barcode is the GS1 implementation of an Interleaved 2 of 5 bar code to encode a Global Trade Item Number. It is continuous, self-checking, bidirectionally decodable and it will always encode 14 digits.
was once used in the package delivery industry but replaced by <a>Code 128</a>.
[[bc2]]
</dd>
<dt><dfn enum-value for="BarcodeFormat">`pdf417`</dfn></dt>
<dd>PDF417 refers to a continuous two-dimensional barcode symbology format with multiple rows and columns, bi-directionally decodable and according to the Standard [[iso15438]].</dd>
<dt><dfn enum-value for="BarcodeFormat">`qr_code`</dfn></dt>
<dd>QR Code is a two-dimensional barcode respecting the Standard [[iso18004]]. The information encoded can be text, URL or other data.</dd>
<dt><dfn enum-value for="BarcodeFormat">`unknown`</dfn></dt>
<dd>This value is used by the platform to signify that it does not know or specify which barcode format is being detected or supported.</dd>
<dt><dfn enum-value for="BarcodeFormat">`upc_a`</dfn></dt>
<dd><dfn>UPC-A</dfn> is one of the most common linear barcode types and is widely applied to retail in the United States. Define in [[iso15420]], it represents digits by strips of bars and spaces, each digit being associated to a unique pattern of 2 bars and 2 spaces, both of variable width. UPC-A can encode 12 digits that are uniquely assigned to each trade item, and it'ss technically a subset of <a>EAN-13</a> (UPC-A codes are represented in <a>EAN-13</a> with the first character set to <var>0</var>). </dd>
<dt><dfn enum-value for="BarcodeFormat">`upc_e`</dfn></dt>
<dd>UPC-E Barcode is a variation of <a>UPC-A</a> defined in [[iso15420]], compressing out unnecessary zeros for a more compact barcode.</dd>
</dl>
# Security and Privacy Considerations # {#security-and-privacy-considerations}
<em>This section is non-normative.</em>
This interface reveals information about the contents of an image source. It is
critical for implementations to ensure that it cannot be used to bypass
protections that would otherwise protect an image source from inspection.
[[#image-sources-for-detection]] describes the algorithm to accomplish this.
By providing high-performance shape detection capabilities this interface allows
developers to run image analysis tasks on the local device. This offers a
privacy advantage over offloading computation to a remote system. Developers
should consider the results returned by this interface as privacy sensitive as
the original image from which they were derived.
# Examples # {#examples}
<i>This section is non-normative.</i>
<p class="note">
Slightly modified/extended versions of these examples (and more) can be found in
e.g. <a href="https://codepen.io/collection/DwWVJj/">this codepen collection</a>.
</p>
## Platform support for a given detector ## {#example-feature-detection}
<div class="note">
The following example can also be found in e.g. <a
href="https://codepen.io/miguelao/pen/PbYpMv?editors=0010">this codepen</a>
with minimal modifications.
</div>
<div class="example">
```js
if (window.FaceDetector == undefined) {
console.error('Face Detection not supported on this platform');
}
if (window.BarcodeDetector == undefined) {
console.error('Barcode Detection not supported on this platform');
}
```
</div>
## Face Detection ## {#example-face-detection}
<div class="note">
The following example can also be found in e.g.
<a href="https://codepen.io/miguelao/pen/ORYbbm?editors=0010">this codepen</a> (or <a href="https://codepen.io/miguelao/pen/PmJWro">this one</a>, with landmarks overlay).
</div>
<div class="example">
```js
let faceDetector = new FaceDetector({fastMode: true, maxDetectedFaces: 1});
// Assuming |theImage| is e.g. a <img> content, or a Blob.
faceDetector.detect(theImage)
.then(detectedFaces => {
for (const face of detectedFaces) {
console.log(
' Face @ (${face.boundingBox.x}, ${face.boundingBox.y}),' +
' size ${face.boundingBox.width}x${face.boundingBox.height}');
}
}).catch(() => {
console.error("Face Detection failed, boo.");
})
```
</div>
## Barcode Detection ## {#example-barcode-detection}
<div class="note">
The following example can also be found in e.g.
<a href="https://codepen.io/miguelao/pen/wgrYjZ?editors=0010">this codepen</a>.
</div>
<div class="example">
```js
let barcodeDetector = new BarcodeDetector();
// Assuming |theImage| is e.g. a <img> content, or a Blob.
barcodeDetector.detect(theImage)
.then(detectedCodes => {
for (const barcode of detectedCodes) {
console.log(' Barcode ${barcode.rawValue}' +
' @ (${barcode.boundingBox.x}, ${barcode.boundingBox.y}) with size' +
' ${barcode.boundingBox.width}x${barcode.boundingBox.height}');
}
}).catch(() => {
console.error("Barcode Detection failed, boo.");
})
```
</div>
<pre class="link-defaults">
spec: html
type: dfn
text: allowed to show a popup
text: in parallel
text: incumbent settings object
for: /
text: origin
</pre>
<pre class="biblio">
{
"iso15417": {
"href": "https://www.iso.org/standard/43896.html",
"title": "Information technology -- Automatic identification and data capture techniques -- Code 128 bar code symbology specification",
"publisher": "ISO/IEC",
"date": "June 2007"
},
"iso15420": {
"href": "https://www.iso.org/standard/46143.html",
"title": "Information technology -- Automatic identification and data capture techniques -- EAN/UPC bar code symbology specification",
"publisher": "ISO/IEC",
"date": "Decemver 2009"
},
"iso15438": {
"href": "https://www.iso.org/standard/65502.html",
"title": "Information technology -- Automatic identification and data capture techniques -- PDF417 bar code symbology specification",
"publisher": "ISO/IEC",
"date": "September 2015"
},
"iso16022": {
"href": "https://www.iso.org/standard/44230.html",
"title": "Information technology -- Automatic identification and data capture techniques -- Data Matrix bar code symbology specification",
"publisher": "ISO/IEC",
"date": "September 2009"
},
"iso16388": {
"href": "https://www.iso.org/standard/43897.html",
"title": "nformation technology -- Automatic identification and data capture techniques -- Code 39 bar code symbology specification",
"publisher": "ISO/IEC",
"date": "May 2007"
},
"iso18004": {
"href": "https://www.iso.org/standard/62021.html",
"title": "Information technology -- Automatic identification and data capture techniques -- QR Code bar code symbology specification",
"publisher": "ISO/IEC",
"date": "February 2015"
},
"iso24778": {
"href": "https://www.iso.org/standard/62021.html",
"title": "Information technology -- Automatic identification and data capture techniques -- Aztec Code bar code symbology specification",
"publisher": "ISO/IEC",
"date": "February 2008"
},
"bc2" :{
"title": "ANSI/AIM-BC2, Uniform Symbol Specification - Interleaved 2 of 5",
"publisher": "ANSI",
"date": "1995"
},
"bc5" :{
"title": "ANSI/AIM-BC5, Uniform Symbol Specification - Code 93",
"publisher": "ANSI",
"date": "1995"
}
}
</pre>