Add overlay qr scanner

Author: dmitry-bym

src/GenOne.Blazor.QrScanner/src/Component/QrScannerComponent.razor

@@ -16,6 +16,9 @@
     [Parameter]
     public EventCallback WhenInitialized { get; set; }
 
+	[Parameter]
+	public ElementReference Overlay { get; set; }
+
     private IJSObjectReference? _qrScanner;
 
     private ElementReference _videoTagReference;
@@ -24,7 +27,7 @@
     {
         if (firstRender)
         {
-            _qrScanner = await QrScannerInterop.CreateQrScannerInstance(_videoTagReference, OnResult.InvokeAsync);
+            _qrScanner = await QrScannerInterop.CreateQrScannerInstance(_videoTagReference, Overlay, OnResult.InvokeAsync);
             await WhenInitialized.InvokeAsync();
         }
     }

src/GenOne.Blazor.QrScanner/src/JsInterop/QrScannerJsInterop.cs

@@ -12,11 +12,11 @@ internal class QrScannerJsInterop : BaseJsInterop
         public QrScannerJsInterop(IJSRuntime jsRuntime) : base(jsRuntime, QrScannerInteropPath)
         { }
 
-        public async ValueTask<IJSObjectReference> CreateQrScannerInstance(ElementReference videoElementReference, Func<string, Task> onSuccessScanning)
+        public async ValueTask<IJSObjectReference> CreateQrScannerInstance(ElementReference videoElementReference, ElementReference overlayReference, Func<string, Task> onSuccessScanning)
         {
             var module = await EnsureModuleImported();
             var handler = JsHandlerFactory.AsyncCallbackHandler(onSuccessScanning);
-            return await module.InvokeAsync<IJSObjectReference>("createQrScanner", videoElementReference, handler);
+            return await module.InvokeAsync<IJSObjectReference>("createQrScanner", videoElementReference, overlayReference, handler);
         }
 
         public async ValueTask StartScanning(IJSObjectReference qrScannerReference)

src/GenOne.Blazor.QrScanner/src/wwwroot/qr-scanner-interop.js

@@ -1,11 +1,15 @@
 import "./qr-scanner-worker.min.js"
 import QrScanner from "./qr-scanner.min.js"
 
-export function createQrScanner(videoElem, successfulScanHandler) {
+export function createQrScanner(videoElem, overlay, successfulScanHandler) {
     var scanner = new QrScanner(
         videoElem,
         result => callback(successfulScanHandler, result),
-        { returnDetailedScanResult: true, highlightScanRegion: true }
+        {
+            returnDetailedScanResult: true,
+            highlightScanRegion: true,
+            overlay = overlay || undefined
+        }
     );
 
     scanner.setInversionMode('both');