Merchant Acquiring in Africa: Opportunities in Low-Card, High-Mobile Markets

<img
 alt="M2P Fintech"
 height="1252"
 src="https://marketing-cms.idflow.com/media/m2p-website-file/marketing-cms/m2p-blog/2023/03/MicrosoftTeams-image-11-1.webp"
 width="2001"
 />
 Video KYC is a game changer in digital onboarding. Since 2020, video-based identity verification has been effective in preventing fraud, reducing onboarding costs, and speeding up the authentication process.  A robust face liveness detection is a key part of the <a href="https://m2pfintech.com/blog/transform-digital-onboarding-with-vkyc/" rel="noopener noreferrer" target="_blank">VKYC</a> process. It is basically a selfie-based check that scans the user’s facial expressions and blinking gestures to differentiate a real user from a fake impersonator or a bot. <h2 style="text-align: justify;">How can you Create a Robust Face Liveness Detection Application? </h2>There are several tools and technologies available in the market, but the simplest cost-effective method involves using Flutter and Google ML Kit. Using these, you can easily create a face liveness detection application. Wonder how?  We have our Flutter experts <a href="https://www.linkedin.com/in/chinnadurai-viswanathan-b2b6b7a5/" rel="noopener noreferrer" target="_blank">Chinnadurai Viswanathan</a> and <a href="https://www.linkedin.com/in/nandhakumar-k-14828813a/" rel="noopener noreferrer" target="_blank">Nandhakumar Krishnan </a>explain how a face liveness detection application can be created using Google ML Kit.  So, here you go.  To start with, facial images will be detected by doing the following gestures.<ol class="list-number"><li
 class=""
 style="text-align: justify;"
 value="1"
 >Left - Turn </li><li
 class=""
 style="text-align: justify;"
 value="2"
 >Right - Turn </li><li
 class=""
 style="text-align: justify;"
 value="3"
 >Look - UP </li><li
 class=""
 style="text-align: justify;"
 value="4"
 >Look - Down </li><li
 class=""
 style="text-align: justify;"
 value="5"
 >Wink 😉 </li><li
 class=""
 style="text-align: justify;"
 value="6"
 >Smile 😃 </li></ol>We will use Google’s library named <a href="https://firebase.google.com/docs/ml-kit" rel="noopener noreferrer" target="_blank">Firebase ML Kit</a> to detect the faces within an image. <a href="https://pub.dev/packages/camera" rel="noopener noreferrer" target="_blank">CameraPreview</a> is used to capture the user’s image, and then it will be sent to the <a href="https://firebase.google.com/docs/ml-kit" rel="noopener noreferrer" target="_blank">Firebase ML Kit</a> library, which provides the face values.   Now, let’s explore the Firebase ML Kit further. <h2 style="text-align: justify;">Firebase ML (<a href="https://firebase.google.com/docs/ml-kit" rel="noopener noreferrer" target="_blank">Firebase ML Kit</a>): </h2>Firebase ML Kit’s Face Detection API is a powerful tool to detect faces within images, which allows you to identify important facial features and obtain the contours of detected faces.  This technology performs exceptionally well in the pre-processing phase of the image and detects different zones of the face accurately. The API can also identify many facial expressions and emotions, making it a valuable tool for developers looking to create facial recognition with greater accuracy and precision.  After the images are captured from <a href="https://pub.dev/packages/camera" rel="noopener noreferrer" target="_blank">CameraPreview</a>, it is tested using the following dependencies. <ol class="list-number"><li
 class=""
 style="text-align: justify;"
 value="1"
 ><a href="https://pub.dev/packages/google_ml_kit" rel="noopener noreferrer" target="_blank">Google MLKit (google_mlkit)</a> </li><li
 class=""
 style="text-align: justify;"
 value="2"
 ><a href="https://pub.dev/packages/camera" rel="noopener noreferrer" target="_blank">Camera (camera)</a> </li></ol><h2 style="text-align: justify;">Flutter Dependencies </h2>
 <img
 alt="M2P Fintech"
 height="213"
 src="https://marketing-cms.idflow.com/media/m2p-website-file/marketing-cms/m2p-blog/2023/03/1.webp"
 width="898"
 />
 <h2 style="text-align: justify;">Android Dependencies </h2>
 <img
 alt="M2P Fintech"
 height="163"
 src="https://marketing-cms.idflow.com/media/m2p-website-file/marketing-cms/m2p-blog/2023/03/2.webp"
 width="912"
 />
 
 <img
 alt="M2P Fintech"
 height="207"
 src="https://marketing-cms.idflow.com/media/m2p-website-file/marketing-cms/m2p-blog/2023/03/3.webp"
 width="900"
 />
 <h2 style="text-align: justify;">How to Get Face Values using Flutter &amp; Android dependencies?</h2>The following steps will help you get face values using Flutter and Android dependencies. Step 1The first step is to set the preview of the camera in Flutter.  
 <img
 alt="M2P Fintech"
 height="216"
 src="https://marketing-cms.idflow.com/media/m2p-website-file/marketing-cms/m2p-blog/2023/03/4.webp"
 width="915"
 />
 In Flutter, the camera controller needs 3 parameters. <ol class="list-number"><li
 class=""
 style="text-align: justify;"
 value="1"
 >List of cameras (List&lt;CameraDescription&gt; cameras = [];) </li><li
 class=""
 style="text-align: justify;"
 value="2"
 >Resolution of Photo </li><li
 class=""
 style="text-align: justify;"
 value="3"
 >Audio needs — Based on your requirement </li></ol>
 <img
 alt="M2P Fintech"
 height="340"
 src="https://marketing-cms.idflow.com/media/m2p-website-file/marketing-cms/m2p-blog/2023/03/5.webp"
 width="910"
 />
 Using StreamBuilder, we can get the photo from the camera every second to process the images. 
 <img
 alt="M2P Fintech"
 height="187"
 src="https://marketing-cms.idflow.com/media/m2p-website-file/marketing-cms/m2p-blog/2023/03/6.webp"
 width="913"
 />
 The cameraController?.startImageStream() method returns a ‘CameraImage’ which can be used for ML image processing. If you use Firebase ML for Flutter, you can directly pass the CameraImage to it for processing. Once the processing is complete, you can return the result and display it in a User Interface (UI).  Note: The ‘cameraController?.startImageStream()’ method provides ‘CameraImage’ instance, but Google ML Kit requires an ‘InputImage’ object to perform face detection. Therefore, we need to convert the ‘CameraImage’ to an ‘InputImage’ object to build the face detection logic. In case you’re not familiar with ‘InputImage’, it is an ML Kit class that offers a common representation of images used as input data for machine learning models. It can be created from various sources such as bitmap, media image, or Byte Buffer.  
 <img
 alt="M2P Fintech"
 height="133"
 src="https://marketing-cms.idflow.com/media/m2p-website-file/marketing-cms/m2p-blog/2023/03/7.webp"
 width="915"
 />
 Step 2Once you have implemented the above code, you can design your camera view in your application.  Note: The below onImage method code is our special requirement, so we’ve implemented a few things. 
 <img
 alt="M2P Fintech"
 height="552"
 src="https://marketing-cms.idflow.com/media/m2p-website-file/marketing-cms/m2p-blog/2023/03/8.webp"
 width="616"
 />
 Now we have obtained the InputImage from the camera stream, then the next step is to process the image and detect faces using the FaceDetector from the google_mlkit_commons library. This will display a list of all the faces present in the image, that can be used for further processing.  Step 3Using this faceDetector instance, we will get the list of faces from InputImages objects.
 <img
 alt="M2P Fintech"
 height="528"
 src="https://marketing-cms.idflow.com/media/m2p-website-file/marketing-cms/m2p-blog/2023/03/9.webp"
 width="726"
 />
 The output of the image will be as below. 
 <img
 alt="M2P Fintech"
 height="1001"
 src="https://marketing-cms.idflow.com/media/m2p-website-file/marketing-cms/m2p-blog/2023/03/MicrosoftTeams-image-9.webp"
 width="2000"
 />
 If you are interested in reusing the above codes in your existing native applications, you can refer to this article on <a href="https://m2pfintech.com/blog/the-implications-of-flutter-in-fintech/" rel="noopener noreferrer" target="_blank">The Implications of Flutter in Fintech</a>.  With the power of ML and Flutter, the possibilities are endless for creating intelligent apps that offer a better user experience.  If you want to know more about how we implement face liveness detection in Flutter and Google ML Kit, write to us at <a href="mailto:business@m2pfintech.com" rel="noopener noreferrer" target="_blank">business@m2pfintech.com</a>! This article is authored by <a href="https://www.linkedin.com/in/chinnadurai-viswanathan-b2b6b7a5/" rel="noopener noreferrer" target="_blank">Chinnadurai Viswanathan</a>.<a href="https://m2pfintech.com/newsletter/" rel="noopener noreferrer" target="_blank">Subscribe</a> to our newsletter and get the latest fintech news, views, and insights, directly to your inbox.Follow us on <a href="https://www.linkedin.com/company/m2pfintech/mycompany/" rel="noopener noreferrer" target="_blank">LinkedIn</a> and <a href="https://twitter.com/m2pfintech" rel="noopener noreferrer" target="_blank">Twitter</a> for insightful fintech tales curated for curious minds like you.

Tag: "Google Ml (2)"

Product

About

Compliance

Resources