├── _Imports.razor
├── wwwroot
    ├── background.png
    ├── ReactorBlazorQRCodeScanner.lib.module.js
    └── qrCodeScannerJsInterop.js
├── QRCodeScanner.razor.css
├── QRCodeScanner.razor
├── ReactorBlazorQRCodeScanner.csproj
├── ReactorBlazorQRCodeScanner.sln
├── LICENSE.txt
├── QRCodeScannerJsInterop.cs
├── README.md
└── .gitignore


/_Imports.razor:
--------------------------------------------------------------------------------
1 | @using Microsoft.AspNetCore.Components.Web
2 | @using Microsoft.JSInterop


--------------------------------------------------------------------------------
/wwwroot/background.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/YannVasseur35/ReactorBlazorQRCodeScanner/HEAD/wwwroot/background.png


--------------------------------------------------------------------------------
/QRCodeScanner.razor.css:
--------------------------------------------------------------------------------
1 | .my-component {
2 |     border: 2px dashed red;
3 |     padding: 1em;
4 |     margin: 1em 0;
5 |     background-image: url('background.png');
6 | }


--------------------------------------------------------------------------------
/wwwroot/ReactorBlazorQRCodeScanner.lib.module.js:
--------------------------------------------------------------------------------
1 | //export function beforeStart(options, extensions) {
2 | //    console.log("ReactorBlazorQRCodeScanner beforeStart");
3 | 
4 | 
5 | //}
6 | 
7 | //export function afterStarted(blazor) {
8 | //    console.log("ReactorBlazorQRCodeScanner afterStarted");
9 | //}


--------------------------------------------------------------------------------
/QRCodeScanner.razor:
--------------------------------------------------------------------------------
 1 | @inject IJSRuntime JS
 2 | 
 3 | @*<h1>jsQR Demo</h1>
 4 |   
 5 | <a id="githubLink" href="https://github.com/cozmo/jsQR">View documentation on Github</a>
 6 | 
 7 | <p>Pure JavaScript QR code decoding library.</p>
 8 | *@
 9 | 
10 | <div id="loadingMessage">@LoadingMessage</div>
11 | 
12 | <canvas id="canvas" requestedWidth="@Width" hidden></canvas>
13 | 
14 | @if (ShowOutput)
15 | {
16 |     <div id="output" hidden>
17 |         <div id="outputMessage">@OutputMessage</div>
18 |         <div hidden><b>Data:</b> <span id="outputData"></span></div>
19 |     </div>
20 | }
21 | 
22 |  @code {
23 |     
24 |     [Parameter]
25 |     public string? Width { get; set; }
26 | 
27 |     [Parameter]
28 |     public bool ShowOutput { get; set; } = false;
29 | 
30 |     [Parameter]
31 |     public string LoadingMessage { get; set; } = "Loading video stream (please make sure you have a camera enabled)";    
32 | 
33 |     [Parameter]
34 |     public string OutputMessage { get; set; } = "No QR code detected.";        
35 | }


--------------------------------------------------------------------------------
/ReactorBlazorQRCodeScanner.csproj:
--------------------------------------------------------------------------------
 1 | <Project Sdk="Microsoft.NET.Sdk.Razor">
 2 | 
 3 |   <PropertyGroup>
 4 |     <TargetFramework>net9.0</TargetFramework>
 5 |     <Nullable>enable</Nullable>
 6 |     <ImplicitUsings>enable</ImplicitUsings>
 7 | 
 8 |     <PackageId>ReactorBlazorQRCodeScanner</PackageId>
 9 |     <Version>1.0.10</Version>
10 |     <Authors>Yann Vasseur</Authors>
11 |     <Company>reactor.fr</Company>
12 |     <PackageTags>Blazor;Reactor;QRCode;ScannerQR Code</PackageTags>
13 | 
14 |     <PackageReadmeFile>README.md</PackageReadmeFile>
15 |     <PackageLicenseFile>LICENSE.txt</PackageLicenseFile>
16 |   </PropertyGroup>
17 | 
18 |   <ItemGroup>     
19 |     <None Include="README.md" Pack="true" PackagePath="\" /> <!--Nécessaire pour nuget package-->
20 |     <None Include="LICENSE.txt" Pack="true" PackagePath="\" />
21 |   </ItemGroup>
22 |   
23 |   <ItemGroup>
24 |     <SupportedPlatform Include="browser" />
25 |   </ItemGroup>
26 | 
27 |   <ItemGroup>
28 |     <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="9.0.0" />
29 |   </ItemGroup>
30 | 
31 | </Project>
32 | 


--------------------------------------------------------------------------------
/ReactorBlazorQRCodeScanner.sln:
--------------------------------------------------------------------------------
 1 | 
 2 | Microsoft Visual Studio Solution File, Format Version 12.00
 3 | # Visual Studio Version 17
 4 | VisualStudioVersion = 17.12.35514.174 d17.12
 5 | MinimumVisualStudioVersion = 10.0.40219.1
 6 | Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "ReactorBlazorQRCodeScanner", "ReactorBlazorQRCodeScanner.csproj", "{A23EBBFD-DF07-4AEE-8473-C952EB27B4F6}"
 7 | EndProject
 8 | Global
 9 | 	GlobalSection(SolutionConfigurationPlatforms) = preSolution
10 | 		Debug|Any CPU = Debug|Any CPU
11 | 		Release|Any CPU = Release|Any CPU
12 | 	EndGlobalSection
13 | 	GlobalSection(ProjectConfigurationPlatforms) = postSolution
14 | 		{A23EBBFD-DF07-4AEE-8473-C952EB27B4F6}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
15 | 		{A23EBBFD-DF07-4AEE-8473-C952EB27B4F6}.Debug|Any CPU.Build.0 = Debug|Any CPU
16 | 		{A23EBBFD-DF07-4AEE-8473-C952EB27B4F6}.Release|Any CPU.ActiveCfg = Release|Any CPU
17 | 		{A23EBBFD-DF07-4AEE-8473-C952EB27B4F6}.Release|Any CPU.Build.0 = Release|Any CPU
18 | 	EndGlobalSection
19 | 	GlobalSection(SolutionProperties) = preSolution
20 | 		HideSolutionNode = FALSE
21 | 	EndGlobalSection
22 | EndGlobal
23 | 


--------------------------------------------------------------------------------
/LICENSE.txt:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2022 YannVasseur35
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/QRCodeScannerJsInterop.cs:
--------------------------------------------------------------------------------
  1 | using Microsoft.JSInterop;
  2 | 
  3 | namespace ReactorBlazorQRCodeScanner
  4 | {
  5 |     public class QRCodeScannerJsInterop : IAsyncDisposable
  6 |     {
  7 |         private static DateTime? _lastScannedValueDateTime;
  8 |         private static int _scanInterval = 2000;
  9 | 
 10 |         private static Action<string>? _onQrCodeScanAction;
 11 |         private static Action<string>? _onCameraPermissionFailedAction;
 12 | 
 13 |         private readonly Lazy<Task<IJSObjectReference>> moduleTask;
 14 | 
 15 |         public QRCodeScannerJsInterop(IJSRuntime jsRuntime)
 16 |         {
 17 |             moduleTask = new(() => jsRuntime.InvokeAsync<IJSObjectReference>(
 18 |                 "import", "./_content/ReactorBlazorQRCodeScanner/qrCodeScannerJsInterop.js").AsTask());
 19 |         }
 20 | 
 21 |         public async ValueTask Init(Action<string> onQrCodeScanAction, bool useFrontCamera = false, bool flipHorizontal = false)
 22 |         {
 23 |             _onQrCodeScanAction = onQrCodeScanAction;
 24 | 
 25 |             var module = await moduleTask.Value;
 26 |             await module.InvokeVoidAsync("Scanner.Init", new object[2] { useFrontCamera, flipHorizontal });
 27 |         }
 28 | 
 29 |         public async ValueTask Init(Action<string> onQrCodeScanAction, Action<string> onCameraPermissionFailedAction
 30 |             , bool useFrontCamera = false, bool flipHorizontal = false)
 31 |         {
 32 |             _onQrCodeScanAction = onQrCodeScanAction;
 33 |             _onCameraPermissionFailedAction = onCameraPermissionFailedAction;
 34 | 
 35 |             var module = await moduleTask.Value;
 36 |             await module.InvokeVoidAsync("Scanner.Init", new object[2] { useFrontCamera, flipHorizontal });
 37 |         }
 38 | 
 39 |         public async ValueTask StopRecording()
 40 |         {
 41 |             if (moduleTask.IsValueCreated)
 42 |             {
 43 |                 var module = await moduleTask.Value;
 44 |                 await module.InvokeVoidAsync("Scanner.Stop");
 45 |             }
 46 |         }
 47 | 
 48 | 
 49 | 
 50 |         [JSInvokable]
 51 |         public static Task<string> ManageErrorJsCallBack(string value)
 52 |         {
 53 |             Console.WriteLine(value);
 54 | 
 55 |             _onCameraPermissionFailedAction?.Invoke(value);
 56 | 
 57 |             return Task.FromResult("retour"); //Inutile, mais bon des fois qu'on ait besoin un jour d'obtenir un retour ici...
 58 |         }
 59 | 
 60 | 
 61 |         [JSInvokable]
 62 |         public static Task<string> QRCodeJsCallBack(string value)
 63 |         {
 64 |             if (_lastScannedValueDateTime == null)
 65 |             {
 66 |                 _lastScannedValueDateTime = DateTime.Now;
 67 |                 DoSomethingAboutThisQRCode(value);
 68 |             }
 69 | 
 70 |             // If the last scan is old enough
 71 |             var maxDate = DateTime.Now.AddMilliseconds(-_scanInterval);
 72 |             if (_lastScannedValueDateTime < maxDate)
 73 |             {
 74 |                 _lastScannedValueDateTime = DateTime.Now;
 75 |                 DoSomethingAboutThisQRCode(value);
 76 |             }
 77 | 
 78 |             return Task.FromResult("retour"); //Inutile, mais bon des fois qu'on ait besoin un jour d'obtenir un retour ici...
 79 |         }
 80 | 
 81 |         public static void DoSomethingAboutThisQRCode(string code)
 82 |         {
 83 |             //Console.WriteLine($"QRCodeJsCallBack C# receive value: {code}");
 84 | 
 85 |             if (!string.IsNullOrEmpty(code))
 86 |             {
 87 |                 _onQrCodeScanAction?.Invoke(code);
 88 |             }
 89 |         }
 90 | 
 91 |         public async ValueTask DisposeAsync()
 92 |         {
 93 |             if (moduleTask.IsValueCreated)
 94 |             {
 95 |                 var module = await moduleTask.Value;
 96 |                 await module.DisposeAsync();
 97 |             }
 98 |         }
 99 |     }
100 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | <!-- [![Contributors][contributors-shield]][contributors-url]
  2 | [![Forks][forks-shield]][forks-url]
  3 | [![Stargazers][stars-shield]][stars-url]
  4 | [![Issues][issues-shield]][issues-url]
  5 | [![MIT License][license-shield]][license-url] -->
  6 | 
  7 | [![LinkedIn][linkedin-shield]][linkedin-url]
  8 | 
  9 | <!-- PROJECT -->
 10 | 
 11 | # Blazor QR Code Scanner
 12 | 
 13 | An easy implementation of [jsQR](https://github.com/cozmo/jsQR), as a Blazor Component.
 14 | 
 15 | [GITHUB](https://github.com/YannVasseur35/ReactorBlazorQRCodeScanner)
 16 | 
 17 | <!-- ABOUT THE PROJECT -->
 18 | 
 19 | ### About The Project
 20 | 
 21 | I just needed a component that help me scan QR Code. As I could not found one in a Blazor Component, I did it myself, using the wonderfull [jsQR](https://github.com/cozmo/jsQR) javascript library. (all greets to him/her/them)
 22 | 
 23 | ### Requirement
 24 | 
 25 | Should work with .net Core 3.1. Works with .net 6.0 and 7.0
 26 | 
 27 | ### Getting Started
 28 | 
 29 | Add nuget package : [ReactorBlazorQRCodeScanner](https://www.nuget.org/packages/ReactorBlazorQRCodeScanner/)
 30 | 
 31 | - Package Manager
 32 |   ```sh
 33 |   Install-Package ReactorBlazorQRCodeScanner
 34 |   ```
 35 | - dotnet cli
 36 |   ```sh
 37 |   dotnet add package ReactorBlazorQRCodeScanner
 38 |   ```
 39 | 
 40 | ### Usage
 41 | 
 42 | Open a razor page or a component
 43 | 
 44 | 1. add reference to the lib and to JsRuntime
 45 |    ```dotnet
 46 |    @inject IJSRuntime JS
 47 |    @using ReactorBlazorQRCodeScanner
 48 |    ```
 49 | 2. add this somewhere in your code
 50 |    ```html
 51 |    <QRCodeScanner />
 52 |    ```
 53 | 3. In the code section, add this
 54 | 
 55 |    ```dotnet
 56 |     @code {
 57 | 
 58 |       private QRCodeScannerJsInterop? _qrCodeScannerJsInterop;
 59 |       private Action<string>? _onQrCodeScanAction; 
 60 | 
 61 |       protected override async Task OnInitializedAsync()
 62 |       {
 63 |          _onQrCodeScanAction = (code) => OnQrCodeScan(code);  
 64 | 
 65 |           _qrCodeScannerJsInterop = new QRCodeScannerJsInterop(JS);
 66 |           await _qrCodeScannerJsInterop.Init(_onQrCodeScanAction);
 67 |       }
 68 | 
 69 |       private static void OnQrCodeScan(string code)
 70 |       {
 71 |           Console.WriteLine($"OnQrCodeScan {code}");
 72 |       }
 73 |    }
 74 |    ```
 75 | 
 76 | 4. run your project
 77 |    ```sh
 78 |    dotnet watch run
 79 |    ```
 80 | 
 81 | ### Code explaination
 82 | 
 83 | ```dotnet
 84 | private QRCodeScannerJsInterop? _qrCodeScannerJsInterop;
 85 | ```
 86 | 
 87 | \_qrCodeScannerJsInterop is the way to communicate with the ReactorBlazorQRCodeScanner Component "QRCodeScanner"
 88 | 
 89 | ```dotnet
 90 | private Action<string> _onQrCodeScanAction = (code) => OnQrCodeScan(code);
 91 | ```
 92 | 
 93 | \_onQrCodeScanAction is an action that call OnQrCodeScan when invoked. (invokation is done in the ReactorBlazorQRCodeScanner lib when it detects a QR Code throw the cam)
 94 | 
 95 | ```dotnet
 96 | protected override async Task OnInitializedAsync()
 97 |       {
 98 |           _qrCodeScannerJsInterop = new QRCodeScannerJsInterop(JS);
 99 |           await _qrCodeScannerJsInterop.Init(_onQrCodeScanAction);
100 |       }
101 | ```
102 | 
103 | On your page/componenent initialization, you need to build the QRCodeScannerJsInterop object and the run the Init method that takes one parameter : an Action (delegate).
104 | 
105 | When this one is Invoked, it fires the methods "OnQrCodeScan" where you can treat your QRCode data.
106 | 
107 | ```dotnet
108 | protected async Task StopQRScan()
109 |       {
110 |           await _qrCodeScannerJsInterop.StopRecording();
111 |       }
112 | ```
113 | 
114 | With "StopRecording" you can cancel the QR recording / video stream so that the browser will no longer use the webcam and the webcam icon in the browser (red dot) will dissapear.
115 | 
116 | ### Options
117 | 
118 | - You can show/hide the output line that indicates the result of the QRCode when scanned. Default is true (visible)
119 | 
120 | ```dotnet
121 | <QRCodeScanner ShowOutput="false"/>
122 | ```
123 | 
124 | - You can set a custom loading message with the parameter "LoadingMessage", the default message is "Loading video stream (please make sure you have a camera enabled)".
125 | 
126 | ```dotnet
127 | <QRCodeScanner LoadingMessage="My custom loading message"/>
128 | ```
129 | 
130 | - You can set a custom output message, when no QR code is scanned, with the parameter "OutputMessage", the default message is "No QR code detected.".
131 | 
132 | ```dotnet
133 | <QRCodeScanner OutputMessage="My custom no QR code found message"/>
134 | ```
135 | 
136 | - You can set a width in pixel (W/H ratio repected) :
137 | 
138 | ```dotnet
139 | <QRCodeScanner Width="100"/>
140 | ```
141 | 
142 | or in % of the screen width size (W/H ratio repected) :
143 | 
144 | ```dotnet
145 | <QRCodeScanner Width="90%"/>
146 | ```
147 | 
148 | Width default will be the size of your camera video stream. 
149 | 
150 | ### TroubleShooting
151 | 
152 | You need to have a camera on your device.
153 | 
154 | It can works on a laptop with a webcam, or it could be a phone's camera
155 | 
156 | The webbrowser will ask you permission to use the camera.
157 | 
158 | Until you accept it (or refuse it), a message will be displayed :
159 | 
160 | ```text
161 | Loading video stream (please make sure you have a camera enabled)
162 | ```
163 | 
164 |  <!-- CONTRIBUTING -->
165 | 
166 | ## Contributing
167 | 
168 | Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
169 | 
170 | If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".
171 | Don't forget to give the project a star! Thanks again!
172 | 
173 | 1. Fork the Project
174 | 2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
175 | 3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
176 | 4. Push to the Branch (`git push origin feature/AmazingFeature`)
177 | 5. Open a Pull Request
178 | 
179 | <!-- LICENSE -->
180 | 
181 | ## License
182 | 
183 | Distributed under the MIT License. See `LICENSE.txt` for more information.
184 | 
185 | <!-- CONTACT -->
186 | 
187 | ## Contact
188 | 
189 | Yann Vasseur - [@YannVasseur](https://twitter.com/YannVasseur) - contact@reactor.fr
190 | 
191 | Project Link: [https://github.com/YannVasseur35/ReactorBlazorQRCodeScanner](https://github.com/YannVasseur35/ReactorBlazorQRCodeScanner)
192 | 
193 | <!-- MARKDOWN LINKS & IMAGES -->
194 | <!-- https://www.markdownguide.org/basic-syntax/#reference-style-links -->
195 | 
196 | <!--
197 | [contributors-shield]: https://img.shields.io/github/contributors/othneildrew/Best-README-Template.svg?style=for-the-badge
198 | [contributors-url]: https://github.com/othneildrew/Best-README-Template/graphs/contributors
199 | [forks-shield]: https://img.shields.io/github/forks/othneildrew/Best-README-Template.svg?style=for-the-badge
200 | [forks-url]: https://github.com/othneildrew/Best-README-Template/network/members
201 | [stars-shield]: https://img.shields.io/github/stars/othneildrew/Best-README-Template.svg?style=for-the-badge
202 | [stars-url]: https://github.com/othneildrew/Best-README-Template/stargazers
203 | [issues-shield]: https://img.shields.io/github/issues/othneildrew/Best-README-Template.svg?style=for-the-badge
204 | [issues-url]: https://github.com/othneildrew/Best-README-Template/issues
205 | [license-shield]: https://img.shields.io/github/license/othneildrew/Best-README-Template.svg?style=for-the-badge
206 | [license-url]: https://github.com/othneildrew/Best-README-Template/blob/master/LICENSE.txt
207 | [linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge&logo=linkedin&colorB=555
208 | [linkedin-url]: https://linkedin.com/in/othneildrew
209 | [product-screenshot]: images/screenshot.png
210 | 
211 | -->
212 | 
213 | [linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge&logo=linkedin&colorB=555
214 | [linkedin-url]: https://www.linkedin.com/in/yannvasseur/
215 | [product-screenshot]: images/screenshot.png
216 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
  1 | ## Ignore Visual Studio temporary files, build results, and
  2 | ## files generated by popular Visual Studio add-ons.
  3 | ##
  4 | ## Get latest from https://github.com/github/gitignore/blob/master/VisualStudio.gitignore
  5 | 
  6 | # User-specific files
  7 | *.rsuser
  8 | *.suo
  9 | *.user
 10 | *.userosscache
 11 | *.sln.docstates
 12 | 
 13 | # User-specific files (MonoDevelop/Xamarin Studio)
 14 | *.userprefs
 15 | 
 16 | # Mono auto generated files
 17 | mono_crash.*
 18 | 
 19 | # Build results
 20 | [Dd]ebug/
 21 | [Dd]ebugPublic/
 22 | [Rr]elease/
 23 | [Rr]eleases/
 24 | x64/
 25 | x86/
 26 | [Ww][Ii][Nn]32/
 27 | [Aa][Rr][Mm]/
 28 | [Aa][Rr][Mm]64/
 29 | bld/
 30 | [Bb]in/
 31 | [Oo]bj/
 32 | [Ll]og/
 33 | [Ll]ogs/
 34 | 
 35 | # Visual Studio 2015/2017 cache/options directory
 36 | .vs/
 37 | # Uncomment if you have tasks that create the project's static files in wwwroot
 38 | #wwwroot/
 39 | 
 40 | # Visual Studio 2017 auto generated files
 41 | Generated\ Files/
 42 | 
 43 | # MSTest test Results
 44 | [Tt]est[Rr]esult*/
 45 | [Bb]uild[Ll]og.*
 46 | 
 47 | # NUnit
 48 | *.VisualState.xml
 49 | TestResult.xml
 50 | nunit-*.xml
 51 | 
 52 | # Build Results of an ATL Project
 53 | [Dd]ebugPS/
 54 | [Rr]eleasePS/
 55 | dlldata.c
 56 | 
 57 | # Benchmark Results
 58 | BenchmarkDotNet.Artifacts/
 59 | 
 60 | # .NET Core
 61 | project.lock.json
 62 | project.fragment.lock.json
 63 | artifacts/
 64 | 
 65 | # ASP.NET Scaffolding
 66 | ScaffoldingReadMe.txt
 67 | 
 68 | # StyleCop
 69 | StyleCopReport.xml
 70 | 
 71 | # Files built by Visual Studio
 72 | *_i.c
 73 | *_p.c
 74 | *_h.h
 75 | *.ilk
 76 | *.meta
 77 | *.obj
 78 | *.iobj
 79 | *.pch
 80 | *.pdb
 81 | *.ipdb
 82 | *.pgc
 83 | *.pgd
 84 | *.rsp
 85 | *.sbr
 86 | *.tlb
 87 | *.tli
 88 | *.tlh
 89 | *.tmp
 90 | *.tmp_proj
 91 | *_wpftmp.csproj
 92 | *.log
 93 | *.vspscc
 94 | *.vssscc
 95 | .builds
 96 | *.pidb
 97 | *.svclog
 98 | *.scc
 99 | 
100 | # Chutzpah Test files
101 | _Chutzpah*
102 | 
103 | # Visual C++ cache files
104 | ipch/
105 | *.aps
106 | *.ncb
107 | *.opendb
108 | *.opensdf
109 | *.sdf
110 | *.cachefile
111 | *.VC.db
112 | *.VC.VC.opendb
113 | 
114 | # Visual Studio profiler
115 | *.psess
116 | *.vsp
117 | *.vspx
118 | *.sap
119 | 
120 | # Visual Studio Trace Files
121 | *.e2e
122 | 
123 | # TFS 2012 Local Workspace
124 | $tf/
125 | 
126 | # Guidance Automation Toolkit
127 | *.gpState
128 | 
129 | # ReSharper is a .NET coding add-in
130 | _ReSharper*/
131 | *.[Rr]e[Ss]harper
132 | *.DotSettings.user
133 | 
134 | # TeamCity is a build add-in
135 | _TeamCity*
136 | 
137 | # DotCover is a Code Coverage Tool
138 | *.dotCover
139 | 
140 | # AxoCover is a Code Coverage Tool
141 | .axoCover/*
142 | !.axoCover/settings.json
143 | 
144 | # Coverlet is a free, cross platform Code Coverage Tool
145 | coverage*.json
146 | coverage*.xml
147 | coverage*.info
148 | 
149 | # Visual Studio code coverage results
150 | *.coverage
151 | *.coveragexml
152 | 
153 | # NCrunch
154 | _NCrunch_*
155 | .*crunch*.local.xml
156 | nCrunchTemp_*
157 | 
158 | # MightyMoose
159 | *.mm.*
160 | AutoTest.Net/
161 | 
162 | # Web workbench (sass)
163 | .sass-cache/
164 | 
165 | # Installshield output folder
166 | [Ee]xpress/
167 | 
168 | # DocProject is a documentation generator add-in
169 | DocProject/buildhelp/
170 | DocProject/Help/*.HxT
171 | DocProject/Help/*.HxC
172 | DocProject/Help/*.hhc
173 | DocProject/Help/*.hhk
174 | DocProject/Help/*.hhp
175 | DocProject/Help/Html2
176 | DocProject/Help/html
177 | 
178 | # Click-Once directory
179 | publish/
180 | 
181 | # Publish Web Output
182 | *.[Pp]ublish.xml
183 | *.azurePubxml
184 | # Note: Comment the next line if you want to checkin your web deploy settings,
185 | # but database connection strings (with potential passwords) will be unencrypted
186 | *.pubxml
187 | *.publishproj
188 | 
189 | # Microsoft Azure Web App publish settings. Comment the next line if you want to
190 | # checkin your Azure Web App publish settings, but sensitive information contained
191 | # in these scripts will be unencrypted
192 | PublishScripts/
193 | 
194 | # NuGet Packages
195 | *.nupkg
196 | # NuGet Symbol Packages
197 | *.snupkg
198 | # The packages folder can be ignored because of Package Restore
199 | **/[Pp]ackages/*
200 | # except build/, which is used as an MSBuild target.
201 | !**/[Pp]ackages/build/
202 | # Uncomment if necessary however generally it will be regenerated when needed
203 | #!**/[Pp]ackages/repositories.config
204 | # NuGet v3's project.json files produces more ignorable files
205 | *.nuget.props
206 | *.nuget.targets
207 | 
208 | # Microsoft Azure Build Output
209 | csx/
210 | *.build.csdef
211 | 
212 | # Microsoft Azure Emulator
213 | ecf/
214 | rcf/
215 | 
216 | # Windows Store app package directories and files
217 | AppPackages/
218 | BundleArtifacts/
219 | Package.StoreAssociation.xml
220 | _pkginfo.txt
221 | *.appx
222 | *.appxbundle
223 | *.appxupload
224 | 
225 | # Visual Studio cache files
226 | # files ending in .cache can be ignored
227 | *.[Cc]ache
228 | # but keep track of directories ending in .cache
229 | !?*.[Cc]ache/
230 | 
231 | # Others
232 | ClientBin/
233 | ~$*
234 | *~
235 | *.dbmdl
236 | *.dbproj.schemaview
237 | *.jfm
238 | *.pfx
239 | *.publishsettings
240 | orleans.codegen.cs
241 | 
242 | # Including strong name files can present a security risk
243 | # (https://github.com/github/gitignore/pull/2483#issue-259490424)
244 | #*.snk
245 | 
246 | # Since there are multiple workflows, uncomment next line to ignore bower_components
247 | # (https://github.com/github/gitignore/pull/1529#issuecomment-104372622)
248 | #bower_components/
249 | 
250 | # RIA/Silverlight projects
251 | Generated_Code/
252 | 
253 | # Backup & report files from converting an old project file
254 | # to a newer Visual Studio version. Backup files are not needed,
255 | # because we have git ;-)
256 | _UpgradeReport_Files/
257 | Backup*/
258 | UpgradeLog*.XML
259 | UpgradeLog*.htm
260 | ServiceFabricBackup/
261 | *.rptproj.bak
262 | 
263 | # SQL Server files
264 | *.mdf
265 | *.ldf
266 | *.ndf
267 | 
268 | # Business Intelligence projects
269 | *.rdl.data
270 | *.bim.layout
271 | *.bim_*.settings
272 | *.rptproj.rsuser
273 | *- [Bb]ackup.rdl
274 | *- [Bb]ackup ([0-9]).rdl
275 | *- [Bb]ackup ([0-9][0-9]).rdl
276 | 
277 | # Microsoft Fakes
278 | FakesAssemblies/
279 | 
280 | # GhostDoc plugin setting file
281 | *.GhostDoc.xml
282 | 
283 | # Node.js Tools for Visual Studio
284 | .ntvs_analysis.dat
285 | node_modules/
286 | 
287 | # Visual Studio 6 build log
288 | *.plg
289 | 
290 | # Visual Studio 6 workspace options file
291 | *.opt
292 | 
293 | # Visual Studio 6 auto-generated workspace file (contains which files were open etc.)
294 | *.vbw
295 | 
296 | # Visual Studio LightSwitch build output
297 | **/*.HTMLClient/GeneratedArtifacts
298 | **/*.DesktopClient/GeneratedArtifacts
299 | **/*.DesktopClient/ModelManifest.xml
300 | **/*.Server/GeneratedArtifacts
301 | **/*.Server/ModelManifest.xml
302 | _Pvt_Extensions
303 | 
304 | # Paket dependency manager
305 | .paket/paket.exe
306 | paket-files/
307 | 
308 | # FAKE - F# Make
309 | .fake/
310 | 
311 | # CodeRush personal settings
312 | .cr/personal
313 | 
314 | # Python Tools for Visual Studio (PTVS)
315 | __pycache__/
316 | *.pyc
317 | 
318 | # Cake - Uncomment if you are using it
319 | # tools/**
320 | # !tools/packages.config
321 | 
322 | # Tabs Studio
323 | *.tss
324 | 
325 | # Telerik's JustMock configuration file
326 | *.jmconfig
327 | 
328 | # BizTalk build output
329 | *.btp.cs
330 | *.btm.cs
331 | *.odx.cs
332 | *.xsd.cs
333 | 
334 | # OpenCover UI analysis results
335 | OpenCover/
336 | 
337 | # Azure Stream Analytics local run output
338 | ASALocalRun/
339 | 
340 | # MSBuild Binary and Structured Log
341 | *.binlog
342 | 
343 | # NVidia Nsight GPU debugger configuration file
344 | *.nvuser
345 | 
346 | # MFractors (Xamarin productivity tool) working folder
347 | .mfractor/
348 | 
349 | # Local History for Visual Studio
350 | .localhistory/
351 | 
352 | # BeatPulse healthcheck temp database
353 | healthchecksdb
354 | 
355 | # Backup folder for Package Reference Convert tool in Visual Studio 2017
356 | MigrationBackup/
357 | 
358 | # Ionide (cross platform F# VS Code tools) working folder
359 | .ionide/
360 | 
361 | # Fody - auto-generated XML schema
362 | FodyWeavers.xsd
363 | .angular/
364 | /.env
365 | 


--------------------------------------------------------------------------------
/wwwroot/qrCodeScannerJsInterop.js:
--------------------------------------------------------------------------------
  1 | import("./jsQR.js");
  2 | var videoObject = null;
  3 | var videoStopped = false;
  4 | 
  5 | var Scanner = {
  6 |     Wait: function (ms) {
  7 |         var start = new Date().getTime();
  8 |         var end = start;
  9 |         while (end < start + ms) {
 10 |             end = new Date().getTime();
 11 |         }
 12 |     },
 13 |     QRCodeScanned: function (code) {
 14 |         DotNet.invokeMethodAsync("ReactorBlazorQRCodeScanner", "QRCodeJsCallBack", code);
 15 |     },
 16 |     ManageError: function (error) {
 17 |         //console.error("ManageError " + error);
 18 |         var json = JSON.stringify(error);
 19 |         DotNet.invokeMethodAsync("ReactorBlazorQRCodeScanner", "ManageErrorJsCallBack", json);
 20 |         //if (error.name == 'NotAllowedError') {
 21 |         //    // user denied access to camera
 22 |         //    var json = JSON.stringify(error);
 23 |         //    //console.warn("ManageError user denied access to camera " + json);
 24 |         //    DotNet.invokeMethodAsync("ReactorBlazorQRCodeScanner", "ManageErrorJsCallBack", json);
 25 |         //}
 26 |     },
 27 |     Init: function (useFront, flipHorizontal) {
 28 |         try {
 29 |             console.log("init jsQR");
 30 |             videoStopped = false;
 31 |             videoObject = document.createElement("video");
 32 |             var canvasElement = document.getElementById("canvas");
 33 |             var canvas = canvasElement.getContext("2d");
 34 |             var loadingMessage = document.getElementById("loadingMessage");
 35 |             var outputContainer = document.getElementById("output");
 36 |             var outputMessage = document.getElementById("outputMessage");
 37 |             var outputData = document.getElementById("outputData");
 38 |             var requestedWidth = canvasElement.getAttribute("requestedWidth");
 39 | 
 40 |             function drawLine(begin, end, color) {
 41 |                 canvas.beginPath();
 42 |                 canvas.moveTo(begin.x, begin.y);
 43 |                 canvas.lineTo(end.x, end.y);
 44 |                 canvas.lineWidth = 4;
 45 |                 canvas.strokeStyle = color;
 46 |                 canvas.stroke();
 47 |             }
 48 | 
 49 |             // function to assist flipping the borders of the QR code if the video is flipped
 50 |             function transformLocationForFlipHorizontal(location) {
 51 |                 const transformPoint = ({ x, y }) => ({ x: canvasElement.width - x, y });
 52 |                 return {
 53 |                     topLeftCorner: transformPoint(location.topLeftCorner),
 54 |                     topRightCorner: transformPoint(location.topRightCorner),
 55 |                     bottomRightCorner: transformPoint(location.bottomRightCorner),
 56 |                     bottomLeftCorner: transformPoint(location.bottomLeftCorner)
 57 |                 };
 58 | 
 59 |             }
 60 | 
 61 |             // Use facingMode: environment to attemt to get the front camera on phones
 62 |             var videoConfig = {};
 63 |             if (useFront) {
 64 |                 videoConfig = { video: { facingMode: "user" } };
 65 |             }
 66 |             else {
 67 |                 videoConfig = { video: { facingMode: "environment" } };
 68 |             }
 69 | 
 70 |             navigator.mediaDevices
 71 |                 .getUserMedia(videoConfig)
 72 |                 .then(function (stream) {
 73 |                     videoObject.srcObject = stream;
 74 |                     videoObject.setAttribute("playsinline", true); // required to tell iOS safari we don't want fullscreen
 75 |                     videoObject.play();
 76 |                     requestAnimationFrame(tick)
 77 |                 })
 78 |                 .catch((userMediaError) => {
 79 |                     //console.error("mediaDevices " + userMediaError);
 80 |                     Scanner.ManageError(userMediaError);
 81 |                 });
 82 | 
 83 |             function tick() {
 84 |                 if (videoStopped === true) // if the video has been stopped we don't have to execute the QR reading
 85 |                     return;
 86 | 
 87 |                 if (videoObject.readyState === videoObject.HAVE_ENOUGH_DATA) {
 88 |                     loadingMessage.hidden = true;
 89 |                     canvasElement.hidden = false;
 90 |                     if (outputContainer)
 91 |                         outputContainer.hidden = false;
 92 | 
 93 |                     //### VIDEO SCREEN SIZE
 94 | 
 95 |                     var videoRatio = videoObject.videoWidth / videoObject.videoHeight;
 96 |                     var screenwidth = window.innerWidth;
 97 |                     var screenheight = window.innerHeight;
 98 | 
 99 |                     if (!requestedWidth) {
100 |                         //No requested size, original video size is displayed
101 |                         canvasElement.width = videoObject.videoWidth;
102 |                         canvasElement.height = videoObject.videoHeight;
103 |                     }
104 |                     else if (requestedWidth.includes('%')) {
105 |                         //Width in % of the screen width size 
106 |                         var percent = parseInt(requestedWidth, 10);
107 |                         canvasElement.width = screenwidth * percent / 100;
108 |                         canvasElement.height = screenwidth * percent / 100 / videoRatio;
109 |                     }
110 |                     else {
111 |                         //Width in pixel
112 |                         canvasElement.width = requestedWidth;
113 |                         canvasElement.height = requestedWidth / videoRatio;
114 |                     }
115 | 
116 |                     //### VIDEO SCREEN SIZE
117 |                     if (flipHorizontal) {
118 |                         canvas.translate(canvasElement.width, 0);
119 |                         canvas.scale(-1, 1);
120 |                     }
121 | 
122 |                     canvas.drawImage(
123 |                         videoObject,
124 |                         0,
125 |                         0,
126 |                         canvasElement.width,
127 |                         canvasElement.height
128 |                     );
129 |                     var imageData = canvas.getImageData(
130 |                         0,
131 |                         0,
132 |                         canvasElement.width,
133 |                         canvasElement.height
134 |                     );
135 |                     var code = jsQR(imageData.data, imageData.width, imageData.height, {
136 |                         inversionAttempts: "dontInvert",
137 |                     });
138 |                     if (code) {
139 |                         if (flipHorizontal) {
140 |                             code.location = transformLocationForFlipHorizontal(code.location);
141 |                         }
142 |                         drawLine(
143 |                             code.location.topLeftCorner,
144 |                             code.location.topRightCorner,
145 |                             "#FF3B58"
146 |                         );
147 |                         drawLine(
148 |                             code.location.topRightCorner,
149 |                             code.location.bottomRightCorner,
150 |                             "#FF3B58"
151 |                         );
152 |                         drawLine(
153 |                             code.location.bottomRightCorner,
154 |                             code.location.bottomLeftCorner,
155 |                             "#FF3B58"
156 |                         );
157 |                         drawLine(
158 |                             code.location.bottomLeftCorner,
159 |                             code.location.topLeftCorner,
160 |                             "#FF3B58"
161 |                         );
162 |                         if (outputContainer) {
163 |                             outputMessage.hidden = true;
164 |                             outputData.parentElement.hidden = false;
165 |                             outputData.innerText = code.data;
166 |                         }
167 | 
168 |                         Scanner.QRCodeScanned(code.data);
169 |                     }
170 |                 }
171 |                 requestAnimationFrame(tick);
172 |             }
173 |         } catch (error) {
174 |             Scanner.ManageError(error);
175 |             //console.error("Scanner.Init.Error : " + error);
176 |         }
177 |     },
178 |     Stop: function () {
179 |         try {
180 |             // if video object is null then we don't have to stop the stream
181 |             if (videoObject === null)
182 |                 return;
183 | 
184 |             if (videoObject.readyState === videoObject.HAVE_ENOUGH_DATA) {
185 |                 videoStopped = true; // indicate that the video has been stopped to stop the requestAnimationFrame from ticking
186 | 
187 |                 const mediaStream = videoObject.srcObject;
188 |                 const tracks = mediaStream.getTracks();
189 |                 tracks.forEach(track => track.stop()) // stop the video stream(s)
190 | 
191 |                 // hide canvas
192 |                 var canvasElement = document.getElementById("canvas");
193 |                 if (canvasElement != null)
194 |                     canvasElement.hidden = true;
195 | 
196 |                 // clean up videoObject
197 |                 videoObject = null;
198 |             }
199 |         } catch (error) {
200 |             console.error(error);
201 |         }
202 |     },
203 | };
204 | 
205 | export { Scanner };


--------------------------------------------------------------------------------