R\u00e9f\u00e9rencer le composant de lecture<\/h2>\n\n\n\n
Nous allons utiliser le composant Camera.MAUI<\/strong> propos\u00e9 par hjam40<\/strong>. Il est bas\u00e9 sur la biblioth\u00e8que \u00ab\u00a0ZXing.Net\u00a0\u00bb pour la lecture et le d\u00e9codage de codes divers et vari\u00e9s (dont les QR Code, \u00e7a tombe bien). Les sources de ce composant<\/a> sont disponibles sur GitHub.<\/p>\n\n\n\n Pour ajouter ce composant, vous devez aller dans la gestion des packages Nuget, rechercher \u00ab\u00a0Camera.MAUI\u00a0\u00bb et l’installer.<\/p>\n\n\n\n Vous devez ensuite enregistrer ce nouveau composant au niveau de l’application. Pour cela il suffit d’ajouter la ligne \u00ab\u00a0.UseMauiCameraView()\u00a0\u00bb dans le code C# du fichier \u00ab\u00a0MauiProgram.cs\u00a0\u00bb<\/p>\n\n\n <\/p>\n\n\n\n Camera.MAUI<\/strong> ne prend pas en charge les applications Android dont le SDK est inf\u00e9rieur \u00e0 API 25. Par d\u00e9faut un projet MAUI r\u00e8gle ce param\u00e8tre sur 21, ce qui est trop ancien. Il faut donc modifier cette valeur dans le fichier \u00ab\u00a0AndroidManifest.xml\u00a0\u00bb plac\u00e9 dans la dossier \u00ab\u00a0Platforms\\Android\u00a0\u00bb de votre projet :<\/p>\n\n\n Note : J’ai pour habitude avec les projets MAUI de stipuler au minimum Android 8.0 (API 26) et de laisser comme cible Android 13.0 (API 33), qui est la valeur par d\u00e9faut des projets MAUI actuels.<\/em><\/p>\n\n\n\n Toujours dans le fichier \u00ab\u00a0AndroidManifest.xml\u00a0\u00bb vous devez stipuler que vous demandez l’autorisation d’acc\u00e8s \u00e0 la cam\u00e9ra. Le composant va s’occuper tout seul de faire les demandes pour les versions d’Android (r\u00e9centes) qui n\u00e9cessitent une demande explicite \u00e0 l’utilisateur. A l’initialisation du composant la demande d’acc\u00e8s \u00e0 la cam\u00e9ra sera effectu\u00e9e et il faudra bien autoriser l’acc\u00e8s pour que le composant fonctionne. Dans le cas contraire, le composant ne s’affichera simplement pas.<\/p>\n\n\n\n <\/p>\n\n\n\n Dans le fichier \u00ab\u00a0info.plist\u00a0\u00bb plac\u00e9 dans le dossier \u00ab\u00a0Platforms\\iOS\u00a0\u00bb de votre projet, vous devez ajouter les 2 lignes XML suivantes :<\/p>\n\n\n Ceci permet d’indiquer \u00e0 l’utilisateur pourquoi vous souhaitez acc\u00e9der \u00e0 la cam\u00e9ra. iOS fera alors la demande d’acc\u00e8s \u00e0 l’utilisateur lors de l’initialisation du composant.<\/p>\n\n\n\n Pour utiliser ce composant dans une page vous devez y r\u00e9f\u00e9rencer son espace de nom (dans l’exemple ci-dessous, j’ai utilis\u00e9 \u00ab\u00a0camera\u00a0\u00bb) :<\/p>\n\n\n Il suffit ensuite de placer le composant o\u00f9 vous le souhaitez dans votre structure UI dans le fichier XAML de la page.<\/p>\n\n\n Dans cet exemple (tir\u00e9 de l’application d’exemple li\u00e9e \u00e0 cet article) le composant porte le nom de \u00ab\u00a0CameraView\u00a0\u00bb, et sa propri\u00e9t\u00e9 \u00ab\u00a0ZoomFactor\u00a0\u00bb est li\u00e9e \u00e0 la valeur d’un Slider dont le nom est \u00ab\u00a0ZoomSlider\u00a0\u00bb.<\/p>\n\n\n\n Pour initialiser correctement le composant vous devez r\u00e9pondre \u00e0 son \u00e9v\u00e9nement \u00ab\u00a0Loaded\u00a0\u00bb et pour r\u00e9agir \u00e0 la d\u00e9tection d’un code \u00e0 l’\u00e9v\u00e9nement \u00ab\u00a0BarcodeDetected\u00a0\u00bb.<\/p>\n\n\n\n Dans l’application d’exemple on force l’activation de l’autofocus via un tap sur le composant. Pour cela un \u00ab\u00a0TapGestureRecognizer\u00a0\u00bb est ajout\u00e9 au composant.<\/p>\n\n\n\n A un moment il faut indiquer au composant que sa mission consiste \u00e0 d\u00e9tecter et lire des QR Codes. Nous allons r\u00e9aliser ce param\u00e9trage depuis le code C# de la page. Ce param\u00e9trage peut se faire dans l’\u00e9v\u00e9nement \u00ab\u00a0Loaded\u00a0\u00bb de la page.<\/p>\n\n\n Il est tout \u00e0 fait possible de r\u00e9f\u00e9rencer plusieurs formats en m\u00eame temps. Camera.MAUI<\/strong> sera alors en mesure de les d\u00e9tecter ensemble. La liste des formats support\u00e9s est assez importante :<\/p>\n\n\n\n Quelques options suppl\u00e9mentaires permettent de g\u00e9rer finement le comportement attendu et aussi la quantit\u00e9 de ressources utilis\u00e9es (le nombre de thread de d\u00e9codage par exemple). Je vous invite vivement \u00e0 modifier ces valeurs et constater en live comment se comporte Camera.MAUI<\/strong>.<\/p>\n\n\n\n Quoi qu’il en soit, il ne faut surtout pas oublier d’activer la d\u00e9tection de codes en pla\u00e7ant \u00e0 \u00ab\u00a0true\u00a0\u00bb sa propri\u00e9t\u00e9 \u00ab\u00a0BarCodeDetectionEnabled\u00a0\u00bb.<\/p>\n\n\n Le d\u00e9marrage complet de Camera.MAUI<\/strong> se fait depuis son \u00e9v\u00e9nement \u00ab\u00a0Load\u00a0\u00bb :<\/p>\n\n\n Si aucune cam\u00e9ra n’est disponible le composant restera invisible. Par d\u00e9faut on utilise la 1\u00e8re cam\u00e9ra, mais il est possible de g\u00e9rer le fait que votre machine poss\u00e8de plusieurs cam\u00e9ras (un PC sous Windows par exemple).<\/p>\n\n\n\n Sous Android, parfois, la qualit\u00e9 de l’image retourn\u00e9e est assez m\u00e9diocre. Pour \u00e9viter ce probl\u00e8me il suffit au moment d’activer la cam\u00e9ra de la stopper (m\u00eame si vous savez pertinemment qu’elle n’est pas activ\u00e9e) puis de la d\u00e9marrer. C’est pourquoi dans le code ci-dessus on trouve les 2 commandes.<\/p>\n<\/blockquote>\n\n\n\n Comme Camera.MAUI<\/strong> est capable de lire en une seule fois plusieurs codes (par exemple tous les codes pr\u00e9sents sur une feuille) il remonte une liste de r\u00e9sultats. Dans cet exemple on ne g\u00e8re que le 1er r\u00e9sultat. D’ailleurs lors du param\u00e9trage on a bien stipul\u00e9 qu’on ne veut pas de multi-scan par<\/p>\n\n\n Il est possible de stipuler le facteur de zoom que l’on souhaite appliquer \u00e0 l’image. Dans certains cas ce r\u00e9glage est indispensable pour \u00eatre en mesure de lire correctement un code. C’est la propri\u00e9t\u00e9 \u00ab\u00a0ZoomFactor\u00a0\u00bb qui le permet. La valeur du zoom va de \u00ab\u00a0MinZoomFactor\u00a0\u00bb \u00e0 \u00ab\u00a0MaxZoomFactor\u00a0\u00bb. Dans cet exemple le zoom a \u00e9t\u00e9 param\u00e9tr\u00e9 de 1 \u00e0 5 pour des raisons de simplification, mais id\u00e9alement, dans la vraie vie, vous devrez utiliser les valeurs fournies par ces 2 propri\u00e9t\u00e9s.<\/p>\n\n\n\n Il est possible aussi d’allumer la torche via la propri\u00e9t\u00e9 \u00ab\u00a0TorchEnabled\u00a0\u00bb qu’il suffit de placer \u00e0 \u00ab\u00a0true\u00a0\u00bb pour allumer et (vous l’avez d\u00e9j\u00e0 compris) \u00e0 \u00ab\u00a0false\u00a0\u00bb pour l’\u00e9teindre. Dans l’application d’exemple une petite image de torche permet d’effectuer ces op\u00e9rations.<\/p>\n\n\n\n Cet article est fourni avec une application d’exemple. Elle met en \u0153uvre tout ce qui a \u00e9t\u00e9 vue pr\u00e9c\u00e9demment et vous permettra de faire quelques tests avant d’inclure ce composant dans vos propres r\u00e9alisations.<\/p>\n\n\n Lien GitHub vers l’exemple<\/a>.<\/p>\n\n\n\n Cet exemple a \u00e9t\u00e9 test\u00e9 sous iOS, Android et Windows.<\/p>\n\n\n\n Pour ceux qui sont \u00e0 l’aise avec l’anglais, il y a un tr\u00e8s bon tutoriel vid\u00e9o<\/a> propos\u00e9 par G\u00e9rald Versluis<\/strong> sur Camera.MAUI<\/strong>. G\u00e9rald propose d’ailleurs une tr\u00e8s grande quantit\u00e9 de tutoriels sur .NET MAUI. Je vous recommande vivement d’aller explorer sa cha\u00eene YouTube.<\/p>\n\n\n\n![\"\"](\"https:\/\/i0.wp.com\/coding4phone.com\/wp-content\/uploads\/2023\/10\/c4p_maui_qrcode_reader_img1.png?resize=613%2C127&ssl=1\")
<\/figure>\n\n\n\n\npublic static MauiApp CreateMauiApp()\n{\n\tvar builder = MauiApp.CreateBuilder();\n\tbuilder\n\t\t.UseMauiApp<App>()\n\t\t.UseMauiCameraView()\n\t\t.ConfigureFonts(fonts =>\n\t\t{\n\t\t\tfonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");\n\t\t\tfonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");\n\t\t});\n\n#if DEBUG\n\tbuilder.Logging.AddDebug();\n#endif\n\n\treturn builder.Build();\n}\n<\/pre><\/div>\n\n\nModifier la version minimum du SDK pris en charge par l’application sous Android<\/h2>\n\n\n\n
![\"\"](\"https:\/\/i0.wp.com\/coding4phone.com\/wp-content\/uploads\/2023\/10\/c4p_maui_qrcode_reader_img3.png?resize=1024%2C177&ssl=1\")
<\/figure>\n<\/div>\n\n\nAjouter les autorisations pour Android<\/h2>\n\n\n\n
![\"\"](\"https:\/\/i0.wp.com\/coding4phone.com\/wp-content\/uploads\/2023\/10\/c4p_maui_qrcode_reader_img2.png?resize=1024%2C291&ssl=1\")
<\/figure>\n\n\n\nAjouter les autorisations pour iOS<\/h2>\n\n\n\n
\n\t<key>NSCameraUsageDescription<\/key>\n\t<string>This app uses camera for...<\/string>\n<\/pre><\/div>\n\n\n
Ajouter le composant \u00e0 une page<\/h2>\n\n\n\n
\n<?xml version="1.0" encoding="utf-8" ?>\n<ContentPage xmlns="http:\/\/schemas.microsoft.com\/dotnet\/2021\/maui"\n xmlns:x="http:\/\/schemas.microsoft.com\/winfx\/2009\/xaml"\n xmlns:camera="clr-namespace:Camera.MAUI;assembly=Camera.MAUI"\n x:Class="C4P_QRCodeReader_MAUI.MainPage">\n\n<\/ContentPage>\n<\/pre><\/div>\n\n\n
\n<camera:CameraView \n\tx:Name="CameraView" \n\tMargin="30,30,30,0" \n\tLoaded="CameraView_Loaded" \n\tBarcodeDetected="CameraView_BarcodeDetected" \n\tZoomFactor="{Binding Source={x:Reference ZoomSlider}, Path=Value}">\n\n\t<camera:CameraView.GestureRecognizers>\n\t\t<TapGestureRecognizer x:Name="CameraViewTapGesture" Tapped="CameraViewTapGesture_Tapped" \/>\n\t<\/camera:CameraView.GestureRecognizers>\n\n<\/camera:CameraView>\n<\/pre><\/div>\n\n\nParam\u00e9trer le composant pour lire les QR Code<\/h2>\n\n\n\n
\nCameraView.BarCodeOptions = new Camera.MAUI.ZXingHelper.BarcodeDecodeOptions\n{\n\tAutoRotate = false,\n\tPossibleFormats = { ZXing.BarcodeFormat.QR_CODE },\n\tReadMultipleCodes = false,\n\tTryHarder = false,\n\tTryInverted = false\n};\n<\/pre><\/div>\n\n\n\n
\nCameraView.BarCodeDetectionFrameRate = 10;\nCameraView.BarCodeDetectionMaxThreads = 10;\nCameraView.ControlBarcodeResultDuplicate = false;\nCameraView.BarCodeDetectionEnabled = true;\n<\/pre><\/div>\n\n\n
Activer le composant<\/h2>\n\n\n\n
\nprivate async void CameraView_Loaded(object sender, EventArgs e)\n{\n\tif (CameraView.NumCamerasDetected > 0)\n\t{\n\t\tCameraView.Camera = CameraView.Cameras.First();\n\t\tawait CameraView.StopCameraAsync();\n\t\tawait CameraView.StartCameraAsync();\n\t}\n}\n<\/pre><\/div>\n\n\n\n
R\u00e9cup\u00e9rer le code lu<\/h2>\n\n\n
\nprivate async void CameraView_BarcodeDetected(object sender, Camera.MAUI.ZXingHelper.BarcodeEventArgs args)\n{\n\tDebug.WriteLine("[CAMERA VIEW] - BARCODE DETECTED");\n\n\tawait MainThread.InvokeOnMainThreadAsync(async () =>\n\t{\n\t\tvar r = args.Result.FirstOrDefault();\n\n\t\tif (r != null)\n\t\t{\n\t\t\tLastCode = r.Text;\n\t\t\tDebug.WriteLine($"[CAMERA VIEW] - {r.Text}");\n\t\t}\n\t\telse\n\t\t{\n\t\t\tDebug.WriteLine("[CAMERA VIEW] - NO RESULT !");\n\t\t}\n\t});\n}\n<\/pre><\/div>\n\n\n\nReadMultipleCodes = false;\n<\/pre><\/div>\n\n\n
G\u00e9rer le zoom et la torche<\/h2>\n\n\n\n
Application d’exemple<\/h2>\n\n\n\n
![\"\"](\"https:\/\/i0.wp.com\/coding4phone.com\/wp-content\/uploads\/2023\/10\/c4p_maui_qrcode_reader_img4.png?resize=370%2C800&ssl=1\")
<\/figure>\n<\/div>\n\n\nTutoriel vid\u00e9o<\/h2>\n\n\n\n