Skip to content

Commit dbdb958

Browse files
Felix-Dynamsoftfelixindrawan
Felix-Dynamsoft
and
felixindrawan
authored
feat: update website sample and docs (#188)
Co-authored-by: felixindrawan <[email protected]>
1 parent f7b969b commit dbdb958

File tree

4 files changed

+65
-58
lines changed

4 files changed

+65
-58
lines changed

‎hello-world/webview/android/README.md‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,12 @@
22

33
This sample demonstrates how to use the [Dynamsoft Barcode Reader](https://www.dynamsoft.com/barcode-reader/overview/) JS Edition in Android.
44

5-
<!-- If you want to learn how to use the Android Edition SDK in javascript, you can check [Android WebView Barcode Scanning](https://github.com/Dynamsoft/barcode-reader-mobile-samples/tree/main/android/JavaScript/WebViewBarcodeScanning). -->
5+
If you want to learn how to use the Android Edition SDK in javascript, you can check [Android WebView Barcode Scanning](https://github.com/Dynamsoft/barcode-reader-mobile-samples/tree/v9.x/android/JavaScript/WebViewBarcodeScanning).
6+
7+
> Note:
8+
>
9+
> This guide uses DBR JS version 9. An updated guide for DBR JS version 10 is in progress and will be coming soon!
10+
11+
## Support
12+
13+
If you have any questions, feel free to [contact Dynamsoft support](https://www.dynamsoft.com/company/contact?utm_source=sampleReadme).

‎hello-world/webview/android/app/src/main/assets/decodeBarcodeInVideo.html‎

Lines changed: 25 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,19 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
4-
<head>
5-
<meta charset="utf-8">
6-
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
7-
<meta name="description" content="Quickly read barcodes with Dynamsoft Barcode Reader from a live camera stream.">
8-
<meta name="keywords" content="camera based barcode reading">
9-
<link rel="canonical" href="https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/1.hello-world.html">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
6+
<meta name="description" content="Quickly read barcodes with Dynamsoft Barcode Reader from a live camera stream." />
7+
<meta name="keywords" content="camera based barcode reading" />
8+
<link rel="canonical" href="https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/hello-world.html" />
109
<title>Dynamsoft Barcode Reader Sample - Hello World (Decoding via Camera)</title>
11-
</head>
10+
</head>
1211

13-
<body>
12+
<body>
1413
<h1>Hello World (Decode via Camera)</h1>
15-
<div id="div-ui-container" style="width: 100%; height: 80vh"></div>
16-
Results:<br>
17-
<div id="div-results-container" style="width: 100%; height: 10vh; overflow: auto;"></div>
14+
<div id="camera-view-container" style="width: 100%; height: 80vh"></div>
15+
Results:<br />
16+
<div id="results" style="width: 100%; height: 10vh; overflow: auto"></div>
1817
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/dbr.bundle.js"></script>
1918
<script>
2019
/** LICENSE ALERT - README
@@ -39,27 +38,25 @@ <h1>Hello World (Decode via Camera)</h1>
3938
const cameraView = await Dynamsoft.DCE.CameraView.createInstance();
4039
const cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView);
4140
// Get default UI and append it to DOM.
42-
document.querySelector("#div-ui-container").append(cameraView.getUIElement());
41+
document.querySelector("#camera-view-container").append(cameraView.getUIElement());
4342

4443
// Create a `CaptureVisionRouter` instance and set `CameraEnhancer` instance as its image source.
4544
const cvRouter = await Dynamsoft.CVR.CaptureVisionRouter.createInstance();
4645
cvRouter.setInput(cameraEnhancer);
4746

4847
// Define a callback for results.
49-
cvRouter.addResultReceiver({ onDecodedBarcodesReceived: (result) => {
50-
if (!result.barcodeResultItems.length) return;
48+
cvRouter.addResultReceiver({
49+
onDecodedBarcodesReceived: (result) => {
50+
if (!result.barcodeResultItems.length) return;
5151

52-
const resultsContainer = document.querySelector("#div-results-container");
53-
resultsContainer.textContent = '';
54-
console.log(result);
55-
for (let item of result.barcodeResultItems) {
56-
resultsContainer.append(
57-
`${item.formatString}: ${item.text}`,
58-
document.createElement('br'),
59-
document.createElement('hr'),
60-
);
61-
}
62-
}});
52+
const resultsContainer = document.querySelector("#results");
53+
resultsContainer.textContent = "";
54+
console.log(result);
55+
for (let item of result.barcodeResultItems) {
56+
resultsContainer.textContent += `${item.formatString}: ${item.text}\n\n`;
57+
}
58+
},
59+
});
6360

6461
// Filter out unchecked and duplicate results.
6562
const filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter();
@@ -79,6 +76,5 @@ <h1>Hello World (Decode via Camera)</h1>
7976
}
8077
})();
8178
</script>
82-
</body>
83-
84-
</html>
79+
</body>
80+
</html>

‎hello-world/webview/ios/README.md‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,12 @@
22

33
This sample demonstrates how to use the [Dynamsoft Barcode Reader](https://www.dynamsoft.com/barcode-reader/overview/) JS Edition in iOS(Swift).
44

5-
<!-- If you want to learn how to use the iOS Edition SDK in javascript, you can check [iOS WebView Barcode Scanning](https://github.com/Dynamsoft/barcode-reader-mobile-samples/tree/main/ios/JavaScript/WebViewBarcodeScanning). -->
5+
If you want to learn how to use the iOS Edition SDK in javascript, you can check [iOS WebView Barcode Scanning](https://github.com/Dynamsoft/barcode-reader-mobile-samples/tree/v9.x/ios/JavaScript/WebViewBarcodeScanning)
6+
7+
> Note:
8+
>
9+
> This guide uses DBR JS version 9. An updated guide for DBR JS version 10 is in progress and will be coming soon!
10+
11+
## Support
12+
13+
If you have any questions, feel free to [contact Dynamsoft support](https://www.dynamsoft.com/company/contact?utm_source=sampleReadme).

‎hello-world/webview/ios/dbrjswebview/html/decodeFileInVideo.html‎

Lines changed: 22 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,20 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
4-
<head>
5-
<meta charset="utf-8">
6-
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
7-
<meta name="description" content="Quickly read barcodes with Dynamsoft Barcode Reader from a live camera stream.">
8-
<meta name="keywords" content="camera based barcode reading">
9-
<link rel="canonical" href="https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/1.hello-world.html">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
6+
<meta name="description" content="Quickly read barcodes with Dynamsoft Barcode Reader from a live camera stream." />
7+
<meta name="keywords" content="camera based barcode reading" />
8+
<link rel="canonical" href="https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/hello-world.html" />
109
<title>Dynamsoft Barcode Reader Sample - Hello World (Decoding via Camera)</title>
11-
</head>
10+
</head>
1211

13-
<body>
12+
<body>
1413
<h1>Hello World (Decode via Camera)</h1>
15-
<div id="div-ui-container" style="width: 100%; height: 80vh"></div>
14+
<div id="camera-view-container" style="width: 100%; height: 80vh"></div>
1615
Results:
17-
<br>
18-
<div id="div-results-container" style="width: 100%; height: 10vh; overflow: auto;"></div>
16+
<br />
17+
<div id="results" style="width: 100%; height: 10vh; overflow: auto"></div>
1918
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/dbr.bundle.js"></script>
2019
<script>
2120
/** LICENSE ALERT - README
@@ -39,7 +38,7 @@ <h1>Hello World (Decode via Camera)</h1>
3938
const cameraView = await Dynamsoft.DCE.CameraView.createInstance();
4039
const cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView);
4140
// Get default UI and append it to DOM.
42-
document.querySelector("#div-ui-container").append(cameraView.getUIElement());
41+
document.querySelector("#camera-view-container").append(cameraView.getUIElement());
4342

4443
// Create a `CaptureVisionRouter` instance and set `CameraEnhancer` instance as its image source.
4544
const cvRouter = await Dynamsoft.CVR.CaptureVisionRouter.createInstance();
@@ -48,19 +47,16 @@ <h1>Hello World (Decode via Camera)</h1>
4847
// Define a callback for results.
4948
cvRouter.addResultReceiver({
5049
onDecodedBarcodesReceived: (result) => {
51-
if (!result.barcodeResultItems.length) return;
50+
if (!result.barcodeResultItems.length) return;
5251

53-
const resultsContainer = document.querySelector("#div-results-container");
54-
resultsContainer.textContent = '';
55-
console.log(result);
56-
for (let item of result.barcodeResultItems) {
57-
resultsContainer.append(
58-
`${item.formatString}: ${item.text}`,
59-
document.createElement('br'),
60-
document.createElement('hr'),
61-
);
62-
}
63-
}});
52+
const resultsContainer = document.querySelector("#results");
53+
resultsContainer.textContent = "";
54+
console.log(result);
55+
for (let item of result.barcodeResultItems) {
56+
resultsContainer.textContent += `${item.formatString}: ${item.text}\n\n`;
57+
}
58+
},
59+
});
6460

6561
// Filter out unchecked and duplicate results.
6662
const filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter();
@@ -80,6 +76,5 @@ <h1>Hello World (Decode via Camera)</h1>
8076
}
8177
})();
8278
</script>
83-
</body>
84-
79+
</body>
8580
</html>

0 commit comments

Comments
 (0)