Updated overlay for barcode scanner

yushulx · Nov 16, 2023 · 2682b2a · 2682b2a
1 parent 45f3fa1
commit 2682b2a
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 19 deletions.
diff --git a/RazorBarcodeLibrary/BarcodeScanner.cs b/RazorBarcodeLibrary/BarcodeScanner.cs
@@ -14,8 +14,9 @@ public class BarcodeScanner : IDisposable
         private IJSObjectReference _jsObjectReference;
         private List<Camera> _cameras = new List<Camera>();
         private ICallback? _callback;
-        DotNetObjectReference<BarcodeScanner> objRef;
+        private DotNetObjectReference<BarcodeScanner> objRef;
         private bool _disposed = false;
+        public int SourceWidth, SourceHeight;
 
         public BarcodeScanner(IJSObjectReference module, IJSObjectReference scanner)
         {
@@ -31,7 +32,7 @@ public async Task SetVideoElement(string videoId)
 
         public async Task OpenCamera(Camera camera)
         {
-            await _module.InvokeVoidAsync("openCamera", _jsObjectReference, camera);
+            await _module.InvokeVoidAsync("openCamera", _jsObjectReference, camera, objRef, "OnSizeChanged");
         }
 
         public async Task CloseCamera()
@@ -79,7 +80,7 @@ public async Task<List<Camera>> GetCameras()
 
         public interface ICallback
         {
-            void OnCallback(List<BarcodeResult> results);
+            Task OnCallback(List<BarcodeResult> results);
         }
 
         [JSInvokable]
@@ -94,6 +95,15 @@ public Task OnResultReady(object message)
             return Task.CompletedTask;
         }
 
+        [JSInvokable]
+        public Task OnSizeChanged(int width, int height)
+        {
+            SourceWidth = width;
+            SourceHeight = height;
+
+            return Task.CompletedTask;
+        }
+
         public async Task RegisterCallback(ICallback callback)
         {
             _callback = callback;

diff --git a/RazorBarcodeLibrary/wwwroot/barcodeJsInterop.js b/RazorBarcodeLibrary/wwwroot/barcodeJsInterop.js
@@ -169,11 +169,15 @@ export async function setVideoElement(scanner, videoId) {
     }
 }
 
-export async function openCamera(scanner, cameraInfo) {
+export async function openCamera(scanner, cameraInfo, dotNetHelper, callback) {
     if (!Dynamsoft) return;
 
     try {
         await scanner.setCurrentCamera(cameraInfo);
+        scanner.onPlayed = function () {
+            let resolution = scanner.getResolution();
+            dotNetHelper.invokeMethodAsync(callback, resolution[0], resolution[1]);
+        }
         await scanner.show();
     }
     catch (ex) {

diff --git a/example/Pages/Index.razor b/example/Pages/Index.razor
@@ -40,7 +40,7 @@
                 {
                     <div id="imageview">
                         <img id="image" src="@imageSrc" />
-                        <canvas id="overlay"></canvas>
+                        <canvas id="overlay" class="overlay"></canvas>
                     </div>
                 }
             </div>
@@ -67,7 +67,7 @@
 
             <div id="videoview">
                 <div id="videoContainer"></div>
-                <canvas id="videoOverlay"></canvas>
+                <canvas id="videoOverlay" class="overlay"></canvas>
             </div>
         }
         <div>
@@ -230,9 +230,9 @@
         isLoading = false;
     }
 
-    public void OnCallback(List<BarcodeResult> results)
+    public async Task OnCallback(List<BarcodeResult> results)
     {
-        if (results.Count > 0)
+        if (barcodeJsInterop != null && scanner != null)
         {
             string text = "";
             foreach (BarcodeResult result in results)
@@ -241,6 +241,8 @@
                 text += "text: " + result.Text + "<br>";
             }
             result = new MarkupString(text);
+
+            await barcodeJsInterop.DrawCanvas("videoOverlay", scanner.SourceWidth, scanner.SourceHeight, results);
         }
         StateHasChanged();
     }

diff --git a/example/wwwroot/css/app.css b/example/wwwroot/css/app.css
@@ -112,15 +112,6 @@ a, .btn-link {
     height: 100%;
 }
 
-#overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
-}
-
 .loading-indicator {
     position: absolute;
     top: 0;
@@ -205,12 +196,12 @@ input {
     z-index: 1
 }
 
-#videoOverlay {
+.overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
-    z-index: 2;
+    z-index: 1;
     object-fit: contain
 }