Skip to content

Commit cbd5678

Browse files
Dynamsoft-JersonDynamsoft-Jerson
authored
Merge pull request #65 from dynamsoft-docs/preview
update to internal commit b2896f2e
2 parents 329d22f + f3a9695 commit cbd5678

File tree

2 files changed

+392
-1
lines changed

2 files changed

+392
-1
lines changed

‎programming/maui/user-guide-v2.4.2000.md‎

Lines changed: 391 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,391 @@
1+
---
2+
layout: default-layout
3+
title: Detect and Normalize Document - MAUI User Guide
4+
description: This page introduce how to detect and normalize document with Dynamsoft Capture Vision MAUI SDK.
5+
keywords: user guide, maui
6+
needAutoGenerateSidebar: true
7+
needGenerateH3Content: true
8+
noTitleIndex: true
9+
---
10+
11+
# MAUI User Guide for Document Scanner Integration
12+
13+
## Table of Contents
14+
15+
- [MAUI User Guide for Document Scanner Integration](#maui-user-guide-for-document-scanner-integration)
16+
- [Table of Contents](#table-of-contents)
17+
- [System Requirements](#system-requirements)
18+
- [.Net](#net)
19+
- [Android](#android)
20+
- [iOS](#ios)
21+
- [Installation](#installation)
22+
- [Visual Studio for Mac](#visual-studio-for-mac)
23+
- [Visual Studio for Windows](#visual-studio-for-windows)
24+
- [Build Your Document Scanner App](#build-your-document-scanner-app)
25+
- [Set up Development Environment](#set-up-development-environment)
26+
- [Initialize the Project](#initialize-the-project)
27+
- [Visual Studio](#visual-studio)
28+
- [Visual Studio for Mac](#visual-studio-for-mac-1)
29+
- [Include the Library](#include-the-library)
30+
- [Initialize MauiProgram](#initialize-mauiprogram)
31+
- [License Activation](#license-activation)
32+
- [Initialize the Capture Vision SDK](#initialize-the-capture-vision-sdk)
33+
- [Add the CameraView control in the Main Page](#add-the-cameraview-control-in-the-main-page)
34+
- [Open the Camera and Start Document Detection and Normalization](#open-the-camera-and-start-document-detection-and-normalization)
35+
- [Obtaining Normalized Document Image](#obtaining-normalized-document-image)
36+
- [Add the Image control in the Image Page](#add-the-image-control-in-the-image-page)
37+
- [Display the Normalized Document Image](#display-the-normalized-document-image)
38+
- [Run the Project](#run-the-project)
39+
- [Licensing](#licensing)
40+
41+
## System Requirements
42+
43+
### .Net
44+
45+
- .NET 7.0 and .NET 8.0.
46+
47+
### Android
48+
49+
- Supported OS: **Android 5.0** (API Level 21) or higher.
50+
- Supported ABI: **armeabi-v7a**, **arm64-v8a**, **x86** and **x86_64**.
51+
- Development Environment: Visual Studio 2022 recommended.
52+
- JDK: 1.8+
53+
54+
### iOS
55+
56+
- Supported OS: **iOS 11.0** or higher.
57+
- Supported ABI: **arm64** and **x86_64**.
58+
- Development Environment: Visual Studio 2022 for Mac and Xcode 14.3+ recommended.
59+
60+
## Installation
61+
62+
### Visual Studio for Mac
63+
64+
In the **NuGet Package Manager>Manage Packages for Solution** of your project, search for **Dynamsoft.CaptureVisionBundle.Maui**. Select it and click **install**.
65+
66+
### Visual Studio for Windows
67+
68+
You have to Add the library via the project file and do some additional steps to complete the installation.
69+
70+
1. Add the library in the project file:
71+
72+
```xml
73+
<Project Sdk="Microsoft.NET.Sdk">
74+
...
75+
<ItemGroup>
76+
...
77+
<PackageReference Include="Dynamsoft.CaptureVisionBundle.Maui" Version="2.4.2000" />
78+
</ItemGroup>
79+
</Project>
80+
```
81+
82+
2. Open the **Package Manager Console** and run the following commands:
83+
84+
```bash
85+
dotnet build
86+
```
87+
88+
> Note:
89+
>
90+
> - Windows system have a limitation of 260 characters in the path. If you don't use console to install the package, you will receive error "Could not find a part of the path 'C:\Users\admin\.nuget\packages\dynamsoft.imageprocessing.ios\2.2.300\lib\net7.0-ios16.1\Dynamsoft.ImageProcessing.iOS.resources\DynamsoftImageProcessing.xcframework\ios-arm64\dSYMs\DynamsoftImageProcessing.framework.dSYM\Contents\Resources\DWARF\DynamsoftImageProcessing'"
91+
> - The library only support Android & iOS platform. Be sure that you remove the other platforms like Windows, maccatalyst, etc.
92+
93+
## Build Your Document Scanner App
94+
95+
Now you will learn how to create a SimpleDocumentScanner using Dynamsoft Capture Vision MAUI SDK.
96+
97+
>Note:
98+
>
99+
> - You can get the similar source code of the SimpleDocumentScanner app from the following link
100+
> - [C#](https://github.com/Dynamsoft/capture-vision-maui-samples/tree/main/DocumentScanner/AutoNormalize){:target="_blank"}.
101+
102+
### Set up Development Environment
103+
104+
If you are a beginner with MAUI, please follow the guide on the <a href="https://learn.microsoft.com/en-us/dotnet/maui/get-started/installation" target="_blank">.Net MAUI official website</a> to set up the development environment.
105+
106+
### Initialize the Project
107+
108+
#### Visual Studio
109+
110+
1. Open the Visual Studio and select **Create a new project**.
111+
2. Select **.Net MAUI App** and click **Next**.
112+
3. Name the project **SimpleDocumentScanner**. Select a location for the project and click **Next**.
113+
4. Select **.Net 7.0** and click **Create**.
114+
115+
#### Visual Studio for Mac
116+
117+
1. Open Visual Studio and select **New**.
118+
2. Select **Multiplatform > App > .Net MAUI App > C#** and click **Continue**.
119+
3. Select **.Net 7.0** and click **Continue**.
120+
4. Name the project **SimpleDocumentScanner** and select a location, click **Create**.
121+
122+
### Include the Library
123+
124+
Add NuGet package **Dynamsoft.CaptureVisionBundle.Maui** to your project. You can view the [installation section](#installation) on how to add the library.
125+
126+
### Initialize MauiProgram
127+
128+
In **MauiProgram.cs**, add a custom handler for the `CameraView` control. Specifically, it maps the `CameraView` type to the `CameraViewHandler` type.
129+
130+
```c#
131+
namespace SimpleDocumentScanner;
132+
using Microsoft.Extensions.Logging;
133+
using Dynamsoft.CameraEnhancer.Maui;
134+
using Dynamsoft.CameraEnhancer.Maui.Handlers;
135+
136+
public static class MauiProgram
137+
{
138+
public static MauiApp CreateMauiApp()
139+
{
140+
var builder = MauiApp.CreateBuilder();
141+
builder
142+
.UseMauiApp<App>()
143+
.ConfigureFonts(fonts =>
144+
{
145+
fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
146+
fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
147+
})
148+
.ConfigureMauiHandlers(handlers =>
149+
{
150+
handlers.AddHandler(typeof(CameraView), typeof(CameraViewHandler));
151+
});
152+
153+
#if DEBUG
154+
builder.Logging.AddDebug();
155+
#endif
156+
157+
return builder.Build();
158+
}
159+
}
160+
```
161+
162+
### License Activation
163+
164+
The Dynamsoft Capture Vision SDK needs a valid license to work. Please refer to the [Licensing](#licensing) section for more info on how to obtain a license.
165+
166+
Go to **MainPage.xaml.cs**. Add the following code to activate the license:
167+
168+
```c#
169+
namespace SimpleDocumentScanner;
170+
using Dynamsoft.License.Maui;
171+
using System.Diagnostics;
172+
173+
public partial class MainPage : ContentPage, ILicenseVerificationListener
174+
{
175+
public MainPage()
176+
{
177+
InitializeComponent();
178+
LicenseManager.InitLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9", this);
179+
}
180+
public void OnLicenseVerified(bool isSuccess, string message)
181+
{
182+
if (!isSuccess)
183+
{
184+
Debug.WriteLine(message);
185+
}
186+
}
187+
}
188+
```
189+
190+
### Initialize the Capture Vision SDK
191+
192+
In the **MainPage.xaml.cs**, add the following code to initialize the Capture Vision SDK:
193+
194+
```c#
195+
......
196+
using Dynamsoft.CaptureVisionRouter.Maui;
197+
using Dynamsoft.CameraEnhancer.Maui;
198+
using Dynamsoft.Core.Maui;
199+
using Dynamsoft.Utility.Maui;
200+
201+
public partial class MainPage : ContentPage, ILicenseVerificationListener, ICapturedResultReceiver
202+
{
203+
CameraEnhancer enhancer;
204+
CaptureVisionRouter router;
205+
206+
public MainPage()
207+
{
208+
......
209+
210+
// Create an instance of CameraEnhancer
211+
enhancer = new CameraEnhancer();
212+
// Create an instance of CaptureVisionRouter
213+
router = new CaptureVisionRouter();
214+
// Bind the router with the created CameraEnhancer
215+
router.SetInput(enhancer);
216+
// Add the result receiver to receive the document normalized image
217+
router.AddResultReceiver(this);
218+
// Add the result filter to verify the result across multiple frames
219+
var filter = new MultiFrameResultCrossFilter();
220+
filter.EnableResultCrossVerification(EnumCapturedResultItemType.CRIT_NORMALIZED_IMAGE, true);
221+
router.AddResultFilter(filter);
222+
}
223+
}
224+
```
225+
226+
### Add the CameraView control in the Main Page
227+
228+
In the **MainPage.xaml**, add a `CameraView` control:
229+
230+
```xml
231+
<?xml version="1.0" encoding="utf-8" ?>
232+
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
233+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
234+
xmlns:controls="clr-namespace:Dynamsoft.CameraEnhancer.Maui;assembly=Dynamsoft.CaptureVisionRouter.Maui"
235+
x:Class="SimpleDocumentScanner.MainPage"
236+
Title="MainPage">
237+
<AbsoluteLayout>
238+
<controls:CameraView x:Name="cameraView"
239+
AbsoluteLayout.LayoutBounds="0,0,1,1"
240+
AbsoluteLayout.LayoutFlags="All"/>
241+
</AbsoluteLayout>
242+
</ContentPage>
243+
```
244+
245+
### Open the Camera and Start Document Detection and Normalization
246+
247+
In this section, we are going to add code to start document detection and normalization in the **MainPage.xaml.cs**.
248+
249+
```c#
250+
......
251+
252+
public partial class MainPage : ContentPage, ILicenseVerificationListener, ICapturedResultReceiver, ICompletionListener
253+
{
254+
......
255+
protected override void OnHandlerChanged()
256+
{
257+
base.OnHandlerChanged();
258+
259+
if (this.Handler != null)
260+
{
261+
enhancer.SetCameraView(cameraView);
262+
}
263+
}
264+
265+
protected override async void OnAppearing()
266+
{
267+
base.OnAppearing();
268+
// Request camera permission
269+
await Permissions.RequestAsync<Permissions.Camera>();
270+
// Open camera
271+
enhancer?.Open();
272+
// Start document detection and normalization
273+
router?.StartCapturing(EnumPresetTemplate.PT_DETECT_AND_NORMALIZE_DOCUMENT, this);
274+
}
275+
276+
protected override void OnDisappearing()
277+
{
278+
base.OnDisappearing();
279+
// Close camera
280+
enhancer?.Close();
281+
// Stop document detection and normalization
282+
router?.StopCapturing();
283+
}
284+
285+
// It is called when StartCapturing is successful
286+
public void OnSuccess()
287+
{
288+
Debug.WriteLine("Success");
289+
}
290+
291+
// It is called when StartCapturing is failed
292+
public void OnFailure(int errorCode, string errorMessage)
293+
{
294+
Debug.WriteLine(errorMessage);
295+
}
296+
}
297+
```
298+
299+
Open the **Info.plist** file under the **Platforms/iOS/** folder (Open with XML Text Editor). Add the following lines to request camera permission on iOS platform:
300+
301+
```xml
302+
<key>NSCameraUsageDescription</key>
303+
<string>The sample needs to access your camera.</string>
304+
```
305+
306+
### Obtaining Normalized Document Image
307+
308+
In **MainPage.xaml.cs**, implement `ICapturedResultReceiver` to receive normalized images result in `OnNormalizedImagesReceived` callback function.
309+
310+
```c#
311+
......
312+
using Dynamsoft.DocumentNormalizer.Maui;
313+
314+
public partial class MainPage : ContentPage, ILicenseVerificationListener, ICapturedResultReceiver, ICompletionListener
315+
{
316+
......
317+
public void OnNormalizedImagesReceived(NormalizedImagesResult result)
318+
{
319+
if (result?.Items?.Count > 0)
320+
{
321+
router?.StopCapturing();
322+
enhancer?.ClearBuffer();
323+
var data = result.Items[0].ImageData;
324+
MainThread.BeginInvokeOnMainThread(async () =>
325+
{
326+
await Navigation.PushAsync(new ImagePage(data));
327+
});
328+
}
329+
}
330+
}
331+
```
332+
333+
### Add the Image control in the Image Page
334+
335+
In the **ImagePage.xaml**, add a `Image` control and three buttons:
336+
337+
```xml
338+
<?xml version="1.0" encoding="utf-8" ?>
339+
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
340+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
341+
x:Class="SimpleDocumentScanner.ImagePage"
342+
Title="ImagePage">
343+
<StackLayout Padding="10">
344+
<Image
345+
x:Name="image"
346+
Aspect="AspectFit"/>
347+
</StackLayout>
348+
</ContentPage>
349+
```
350+
351+
### Display the Normalized Document Image
352+
353+
```c#
354+
namespace SimpleDocumentScanner;
355+
using Dynamsoft.Core.Maui;
356+
357+
public partial class ImagePage : ContentPage
358+
{
359+
ImageData data;
360+
361+
public ImagePage(ImageData data)
362+
{
363+
InitializeComponent();
364+
this.data = data;
365+
}
366+
367+
protected override void OnHandlerChanged()
368+
{
369+
base.OnHandlerChanged();
370+
image.Source = data.ToImageSource();
371+
}
372+
}
373+
```
374+
375+
### Run the Project
376+
377+
Select your device and run the project.
378+
379+
You can get the similar source code of the SimpleDocumentScanner app from the following link:
380+
381+
- [C#](https://github.com/Dynamsoft/capture-vision-maui-samples/tree/main/DocumentScanner/AutoNormalize){:target="_blank"}.
382+
383+
> Note: If you are running Android only on Visual Studio Windows, please manually exclude iOS and Windows platforms. Otherwise, the Visual Studio will report type or namespace not found errors.
384+
385+
![Exclude iOS and Windows from targets](../assets/maui-exclude.png)
386+
387+
## Licensing
388+
389+
- A one-day trial license is available by default for every new device to try Dynamsoft Capture Vision SDK.
390+
- You can request a 30-day trial license via the [Request a Trial License](https://www.dynamsoft.com/customer/license/trialLicense?product=dcv&package=mobile&utm_source=docs){:target="_blank"} link.
391+
- [Contact us](https://www.dynamsoft.com/company/contact/){:target="_blank"} to purchase a full license.

0 commit comments

Comments
 (0)