Skip to content

Commit 5434dd1

Browse files
felixindrawanfelixindrawan
committed
updated references and retrieving information
1 parent 186b873 commit 5434dd1

File tree

5 files changed

+53
-36
lines changed

5 files changed

+53
-36
lines changed

‎hello-world/blazor/README.md‎

Lines changed: 28 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -54,15 +54,13 @@ In `Pages\DecodeVideo.razor`, we will modify the component to enable barcode dec
5454
5555
<h1>Decode Video</h1>
5656
<button @onclick="ToggleVideoTask" style="margin-bottom: 1rem">@videoDecodeBtn</button>
57-
<div id="camera-view-container" @ref="cameraViewContainer" style="width: 100%; height: 50vh; display: none"></div>
57+
<div id="camera-view-container" style="width: 100%; height: 50vh; display: none"></div>
5858
<h3>Results:</h3>
59-
<div id="results" @ref="resultsContainer" style="width: 100%; height: 30vh; overflow: auto; white-space: pre-wrap"></div>
59+
<div id="results" style="width: 100%; height: 30vh; overflow: auto; white-space: pre-wrap"></div>
6060
6161
6262
@code {
6363
// reference: https://learn.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/call-javascript-from-dotnet?view=aspnetcore-8.0#invoke-js-functions
64-
private ElementReference cameraViewContainer;
65-
private ElementReference resultsContainer;
6664
private string mode = "stop";
6765
private string videoDecodeBtn = "Decode Video";
6866
@@ -85,14 +83,14 @@ In `Pages\DecodeVideo.razor`, we will modify the component to enable barcode dec
8583
{
8684
mode = "videoDecode";
8785
videoDecodeBtn = "Stop Decode";
88-
await JS.InvokeAsync<string>("startVideoDecode", cameraViewContainer, resultsContainer);
86+
await JS.InvokeAsync<string>("startVideoDecode");
8987
}
9088
9189
private async Task StopDecodeVideoTask()
9290
{
9391
mode = "stop";
9492
videoDecodeBtn = "Decode Video";
95-
await JS.InvokeAsync<string>("stopVideoDecode", cameraViewContainer, resultsContainer);
93+
await JS.InvokeAsync<string>("stopVideoDecode");
9694
}
9795
}
9896
```
@@ -113,7 +111,10 @@ Reference: https://learn.microsoft.com/en-us/aspnet/core/blazor/javascript-inter
113111

114112
```
115113
// Create JS function "startVideoDecode"
116-
window.startVideoDecode = async (cameraViewContainer, resultsContainer) => {
114+
window.startVideoDecode = async () => {
115+
const cameraViewContainer = document.getElementById("camera-view-container");
116+
const resultsContainer = document.getElementById("results");
117+
117118
try {
118119
// Create a `CameraEnhancer` instance for camera control and a `CameraView` instance for UI control.
119120
const cameraView = await Dynamsoft.DCE.CameraView.createInstance();
@@ -156,7 +157,10 @@ window.startVideoDecode = async (cameraViewContainer, resultsContainer) => {
156157
}
157158
158159
// Create JS function "stopVideoDecode"
159-
window.stopVideoDecode = async (cameraViewContainer, resultsContainer) => {
160+
window.stopVideoDecode = async () => {
161+
const cameraViewContainer = document.getElementById("camera-view-container");
162+
const resultsContainer = document.getElementById("results");
163+
160164
try {
161165
if (!cvRouter?.disposed) {
162166
await cvRouter?.dispose();
@@ -187,13 +191,12 @@ In `Pages\DecodeImage.razor`, we will modify the component to enable barcode dec
187191
<PageTitle>Dynamsoft Barcode Reader Hello World - Blazor</PageTitle>
188192
189193
<h1>Decode Image</h1>
190-
<InputFile style="margin-bottom: 1rem" OnChange="DecodeImageTask" accept="image/*" />
194+
<InputFile id="inputElement" style="margin-bottom: 1rem" OnChange="DecodeImageTask" accept="image/*" />
191195
<h3 style="margin-bottom: 1rem">Results:</h3>
192-
<div id="results" @ref="resultsContainer" style="width: 100%; height: 30vh; overflow: auto; white-space: pre-wrap"></div>
196+
<div id="results" style="width: 100%; height: 30vh; overflow: auto; white-space: pre-wrap"></div>
193197
194198
@code {
195199
// reference: https://learn.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/call-javascript-from-dotnet?view=aspnetcore-8.0#invoke-js-functions
196-
private ElementReference resultsContainer;
197200
198201
private async Task DecodeImageTask(InputFileChangeEventArgs e)
199202
{
@@ -204,12 +207,12 @@ In `Pages\DecodeImage.razor`, we will modify the component to enable barcode dec
204207
var jsImageStream = imageFile.OpenReadStream(1024 * 1024 * 20);
205208
var dotnetImageStream = new DotNetStreamReference(jsImageStream);
206209
207-
await JS.InvokeAsync<string>("startImageDecode", resultsContainer, imageFile.Name, dotnetImageStream);
210+
await JS.InvokeAsync<string>("startImageDecode");
208211
}
209212
210-
public void Dispose() {
211-
JS.InvokeAsync<string>("cleanUpImageDecode");
212-
213+
public void Dispose()
214+
{
215+
JS.InvokeAsync<string>("cleanUpImageDecode");
213216
}
214217
}
215218
```
@@ -228,16 +231,21 @@ Reference: https://learn.microsoft.com/en-us/aspnet/core/blazor/javascript-inter
228231

229232
```
230233
// Create JS function "startImageDecode"
231-
window.startImageDecode = async ( resultsContainer, fileName, image) => {
234+
window.startImageDecode = async () => {
235+
const inputElement = document.getElementById("inputElement");
236+
const resultsContainer = document.getElementById("results");
237+
238+
const file = inputElement.files[0]; // Get the first file from the input element
239+
232240
try {
233-
if (image) {
241+
if (file) {
234242
// Convert file to blob
235-
const arrayBuffer = await image.arrayBuffer();
243+
const arrayBuffer = await file.arrayBuffer();
236244
const blob = new Blob([arrayBuffer]);
237245
238246
cvRouter = await Dynamsoft.CVR.CaptureVisionRouter.createInstance();
239247
const result = await cvRouter.capture(blob, "ReadBarcodes_SpeedFirst");
240-
resultsContainer.innerText = `${fileName}:\n`;
248+
resultsContainer.innerText = `File: ${file.name}\n`;
241249
for (let item of result.items) {
242250
if (item.type !== Dynamsoft.Core.EnumCapturedResultItemType.CRIT_BARCODE) {
243251
continue;
@@ -251,6 +259,7 @@ window.startImageDecode = async ( resultsContainer, fileName, image) => {
251259
} catch (ex) {
252260
let errMsg = ex.message || ex;
253261
console.error(errMsg);
262+
resultsContainer.innerText += `Error: ${errMsg}`
254263
}
255264
}
256265
```

‎hello-world/blazor/hello-world-blazor/BlazorApp1/Pages/DecodeImage.razor‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,12 @@
44
<PageTitle>Dynamsoft Barcode Reader Hello World - Blazor</PageTitle>
55

66
<h1>Decode Image</h1>
7-
<InputFile style="margin-bottom: 1rem" OnChange="DecodeImageTask" accept="image/*" />
7+
<InputFile id="inputElement" style="margin-bottom: 1rem" OnChange="DecodeImageTask" accept="image/*" />
88
<h3 style="margin-bottom: 1rem">Results:</h3>
9-
<div id="results" @ref="resultsContainer" style="width: 100%; height: 30vh; overflow: auto; white-space: pre-wrap"></div>
9+
<div id="results" style="width: 100%; height: 30vh; overflow: auto; white-space: pre-wrap"></div>
1010

1111
@code {
1212
// reference: https://learn.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/call-javascript-from-dotnet?view=aspnetcore-8.0#invoke-js-functions
13-
private ElementReference resultsContainer;
1413
1514
private async Task DecodeImageTask(InputFileChangeEventArgs e)
1615
{
@@ -21,12 +20,11 @@
2120
var jsImageStream = imageFile.OpenReadStream(1024 * 1024 * 20);
2221
var dotnetImageStream = new DotNetStreamReference(jsImageStream);
2322

24-
await JS.InvokeAsync<string>("startImageDecode", resultsContainer, imageFile.Name, dotnetImageStream);
23+
await JS.InvokeAsync<string>("startImageDecode");
2524
}
2625

2726
public void Dispose()
2827
{
2928
JS.InvokeAsync<string>("cleanUpImageDecode");
30-
3129
}
3230
}

‎hello-world/blazor/hello-world-blazor/BlazorApp1/Pages/DecodeVideo.razor‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,13 @@
55

66
<h1>Decode Video</h1>
77
<button @onclick="ToggleVideoTask" style="margin-bottom: 1rem">@videoDecodeBtn</button>
8-
<div id="camera-view-container" @ref="cameraViewContainer" style="width: 100%; height: 50vh; display: none"></div>
8+
<div id="camera-view-container" style="width: 100%; height: 50vh; display: none"></div>
99
<h3>Results:</h3>
10-
<div id="results" @ref="resultsContainer" style="width: 100%; height: 30vh; overflow: auto; white-space: pre-wrap"></div>
10+
<div id="results" style="width: 100%; height: 30vh; overflow: auto; white-space: pre-wrap"></div>
1111

1212

1313
@code {
1414
// reference: https://learn.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/call-javascript-from-dotnet?view=aspnetcore-8.0#invoke-js-functions
15-
private ElementReference cameraViewContainer;
16-
private ElementReference resultsContainer;
1715
private string mode = "stop";
1816
private string videoDecodeBtn = "Decode Video";
1917

@@ -36,13 +34,13 @@
3634
{
3735
mode = "videoDecode";
3836
videoDecodeBtn = "Stop Decode";
39-
await JS.InvokeAsync<string>("startVideoDecode", cameraViewContainer, resultsContainer);
37+
await JS.InvokeAsync<string>("startVideoDecode");
4038
}
4139

4240
private async Task StopDecodeVideoTask()
4341
{
4442
mode = "stop";
4543
videoDecodeBtn = "Decode Video";
46-
await JS.InvokeAsync<string>("stopVideoDecode", cameraViewContainer, resultsContainer);
44+
await JS.InvokeAsync<string>("stopVideoDecode");
4745
}
4846
}

‎hello-world/blazor/hello-world-blazor/BlazorApp1/wwwroot/decodeImage.js‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,19 @@
11
// Create JS function "startImageDecode"
2-
window.startImageDecode = async (resultsContainer, fileName, image) => {
2+
window.startImageDecode = async () => {
3+
const inputElement = document.getElementById("inputElement");
4+
const resultsContainer = document.getElementById("results");
5+
6+
const file = inputElement.files[0]; // Get the first file from the input element
7+
38
try {
4-
if (image) {
9+
if (file) {
510
// Convert file to blob
6-
const arrayBuffer = await image.arrayBuffer();
11+
const arrayBuffer = await file.arrayBuffer();
712
const blob = new Blob([arrayBuffer]);
813

914
cvRouter = await Dynamsoft.CVR.CaptureVisionRouter.createInstance();
1015
const result = await cvRouter.capture(blob, "ReadBarcodes_SpeedFirst");
11-
resultsContainer.innerText = `${fileName}:\n`;
16+
resultsContainer.innerText = `File: ${file.name}\n`;
1217
for (let item of result.items) {
1318
if (item.type !== Dynamsoft.Core.EnumCapturedResultItemType.CRIT_BARCODE) {
1419
continue;
@@ -22,5 +27,6 @@ window.startImageDecode = async (resultsContainer, fileName, image) => {
2227
} catch (ex) {
2328
let errMsg = ex.message || ex;
2429
console.error(errMsg);
30+
resultsContainer.innerText += `Error: ${errMsg}`
2531
}
2632
}

‎hello-world/blazor/hello-world-blazor/BlazorApp1/wwwroot/decodeVideo.js‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
// Create JS function "startVideoDecode"
2-
window.startVideoDecode = async (cameraViewContainer, resultsContainer) => {
2+
window.startVideoDecode = async () => {
3+
const cameraViewContainer = document.getElementById("camera-view-container");
4+
const resultsContainer = document.getElementById("results");
5+
36
try {
47
// Create a `CameraEnhancer` instance for camera control and a `CameraView` instance for UI control.
58
const cameraView = await Dynamsoft.DCE.CameraView.createInstance();
@@ -42,7 +45,10 @@ window.startVideoDecode = async (cameraViewContainer, resultsContainer) => {
4245
}
4346

4447
// Create JS function "stopVideoDecode"
45-
window.stopVideoDecode = async (cameraViewContainer, resultsContainer) => {
48+
window.stopVideoDecode = async () => {
49+
const cameraViewContainer = document.getElementById("camera-view-container");
50+
const resultsContainer = document.getElementById("results");
51+
4652
try {
4753
if (!cvRouter?.disposed) {
4854
await cvRouter?.dispose();

0 commit comments

Comments
 (0)