Biometric devices capture unique physical or behavioral characteristics of individuals, such as fingerprints, facial features, or iris patterns, and compare them against stored records to establish or verify identity. Morpho’s biometric devices and solutions are designed to perform these identity verification and authentication tasks across a range of industries and applications.
For example, law enforcement agencies use Morpho devices to identify and verify individuals involved in criminal activities. Banks and financial institutions rely on these devices to ensure secure access to accounts and authenticate transactions. Government agencies implement Morpho solutions for tasks like issuing passports or verifying voters’ identities. Healthcare providers can utilize these devices to accurately identify patients and maintain proper medical records.
Access All Code https://github.com/SiteJuggler/mantra-and-morpho-configuration
Install All necessary Drivers for Mantra and morpho devices
In this article we will install mantra device drivers,
Open any web browser and type “rd mantra driver download” and click on search button

After click on first result that is https://download.mantratecapp.com/forms/downloadfiles

Once you click on the first search result or a link, the next page will ask you to complete a captcha by filling in some characters

Once you correctly fill in the captcha, you will see a screen that displays multiple device drivers for different device models. Choose the driver that matches your specific device model.

After you download the driver that is designed for your particular device model, you need to install it on your computer. This installation process is necessary to ensure that your Mantra device functions properly on your system.

Optimize Mantra Device Recognition: Troubleshooting Mantra Device Drivers
If your Mantra device is not recognized after installing the device driver, you can try restarting your PC or system. This will complete the installation process, and after the restart, your device should be recognized by the system.

If you’re still having trouble with your Mantra device not being recognized, you can try these simple steps:
Open the Windows search bar and type in “service.”
Look for an application called “Services” and click on it.

In the Services window, find the “RD Mantra Service” from the list of services.

Right-click on the “RD Mantra Service” and choose the “Restart” option.

or you can stop service and start


By following these steps, you can attempt to fix the issue by restarting the RD Mantra Service. This may help your computer recognize the Mantra device properly.
After performing the steps mentioned above, connect your Mantra device to your computer using a USB cable. Check if the device is ready for use, and if you are still experiencing any problems, it is recommended to reach out to Mantra support for further assistance. They can provide additional help and guidance to resolve any lingering issues you may be encountering.

Congratulations! You have successfully installed the RD Mantra service drivers on your system. Well done!
Setup React Project for Mantra and morpho device configuration
Install Node.js: Download and install Node.js from the official Node.js website. This will provide the tools needed to work with React.
Create a new project folder: Make a new folder on your computer where you want your React project to be stored.
Open the terminal: Open the terminal or command prompt on your computer.
Set up the project: In the terminal, type the following command and press Enter to create a new React project:
npx create-react-app first-app
Replace “first-app” with the desired name for your project.
Wait for the setup: This process might take a few minutes as it sets up the necessary files and tools for your React project.
Enter the project folder: After the setup is finished, go into the project folder by typing the following command and pressing Enter:
cd first-app
Start the project: In the terminal, type the following command and press Enter to start your React project:
npm start
This will open your project in a web browser, and you can begin building your React application.
That’s it! You have now successfully set up a React project. You can start developing your application by modifying the files inside the project folder.
Mantra and morpho device configuration code in React Js
Create App.js File and write down following code
import React from "react";
const App = () => {
const [deviceInfo, setDeviceInfo] = useState(null);
const [devicePort, setDevicePort] = useState("11100");
const mantraPorts = [
"11100",
"11101",
"11102",
"11103",
"11104",
"11105",
"11106",
];
const discoverDevice = () => {
let found = false;
for (let i = 0; i < mantraPorts.length && !found; i++) {
const currentPort = mantraPorts[i];
try {
discoverDeviceReq(currentPort, () => {
found = true;
setDevicePort(currentPort);
getDeviceInfo(currentPort);
});
} catch (error) {}
}
};
function discoverDeviceReq(port, callback) {
let url;
if (device == 0) {
url = `https://localhost:${port}/rd/info`;
}
if (device == 1) {
url = `https://localhost:${port}/getDeviceInfo`;
}
console.log(url);
var xhr;
var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) {
// If Internet Explorer, return version number
//IE browser
xhr = new window.ActiveXObject("Microsoft.XMLHTTP");
} else {
//other browser
xhr = new XMLHttpRequest();
}
//
xhr.open("DEVICEINFO", url, true);
xhr.onreadystatechange = function () {
// if(xhr.readyState == 1 && count == 0){
// fakeCall();
//}
if (xhr.readyState == 4) {
var status = xhr.status;
if (status == 200) {
var result1 = convert.xml2json(xhr.responseText, {
compact: true,
spaces: 4,
});
const data1 = JSON.parse(result1);
if (
data1.DeviceInfo.additional_info.Param[0]._attributes.value == ""
) {
} else {
callback();
}
} else {
console.log(xhr.response);
}
}
};
xhr.send();
}
return (
<div>
<button>Capture</button>
</div>
);
};
function getDeviceInfo(port) {
let url;
if (device == 0) {
url = `https://localhost:${port}/rd/info`;
}
if (device == 1) {
url = `https://localhost:${port}/getDeviceInfo`;
}
var xhr;
var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) {
// If Internet Explorer, return version number
//IE browser
xhr = new window.ActiveXObject("Microsoft.XMLHTTP");
} else {
//other browser
xhr = new XMLHttpRequest();
}
//
xhr.open("DEVICEINFO", url, true);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
var status = xhr.status;
if (status == 200) {
var result1 = convert.xml2json(xhr.responseText, {
compact: true,
spaces: 4,
});
const data1 = JSON.parse(result1);
if (
data1.DeviceInfo.additional_info.Param[0]._attributes.value == ""
) {
alert("device is not ready");
} else {
alert("device is ready to use");
}
setDeviceInfo(data1);
} else {
console.log(xhr.response);
}
}
};
xhr.send();
}
export default App;
mantraPorts
is an array that contains a list of port numbers.
discoverDevice
is a function that attempts to discover a device by iterating through the mantraPorts
array. It tries to send a request to each port using the discoverDeviceReq
function and stops if a successful response is received. Upon finding the device, it sets the devicePort
variable and calls the getDeviceInfo
function.
discoverDeviceReq
is a function that sends a request to a specific URL based on the port
parameter. The URL is constructed using the https://localhost
domain and the given port. It uses an XMLHttpRequest or ActiveXObject (for Internet Explorer) to send the request.
The function sets up an onreadystatechange
event handler to handle the response from the request. If the response’s readyState
is 4 (indicating the request is complete), it checks the status
of the response. If the status is 200 (successful), it converts the response text from XML to JSON using the convert.xml2json
function. It then parses the JSON response and checks if a specific attribute value exists. If the value exists, the callback
function is called.
The provided code is designed to find the correct port that is connected to our Mantra and Morpho devices. Once the code identifies the right port, it saves the port number in a variable called “state.” Then, it calls the “getDeviceInfo” function to gather information about the device connected to that port, such as its unique serial number. Essentially, this code helps us find and retrieve important details about our Mantra and Morpho devices.
To obtain biometric data from Mantra and Morpho devices, write the following code.
function morphoCapture() {
var url = `https://localhost:${devicePort}/capture`;
let PIDOPTS =
'<PidOptions ver="1.0">' +
'<Opts fCount="1" fType="2" iCount="" iType="" pCount="" pType="" format="0" pidVer="2.0" timeout="10000" otp="" wadh="" posh=""/>' +
"</PidOptions>";
var xhr;
var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) {
// If Internet Explorer, return version number
//IE browser
xhr = new window.ActiveXObject("Microsoft.XMLHTTP");
} else {
//other browser
xhr = new XMLHttpRequest();
}
xhr.open("CAPTURE", url, true);
xhr.setRequestHeader("Content-Type", "text/xml");
xhr.setRequestHeader("Accept", "text/xml");
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
var status = xhr.status;
//parser = new DOMParser();
if (status == 200) {
var test1 = xhr.responseText;
var test2 = test1.search("errCode");
var test6 = getPosition(test1, '"', 2);
var test4 = test2 + 9;
var test5 = test1.slice(test4, test6);
// conversion
if (test5 > 0) {
alert(xhr.responseText);
//document.getElementById('text').value = xhr.responseText;
} else {
alert("Captured Successfully");
var result1 = convert.xml2json(test1, { compact: true, spaces: 4 });
setPidData(JSON.parse(result1));
}
} else {
console.log(xhr.response);
}
}
};
xhr.send(PIDOPTS);
}
function getPosition(string, subString, index) {
return string.split(subString, index).join(subString).length;
}
function mantraCapture() {
var url = `https://localhost:${devicePort}/rd/capture`;
let PIDOPTS =
'<?xml version="1.0"?> <PidOptions ver="1.0"> <Opts fCount="1" fType="2" iCount="0" pCount="0" format="0" pidVer="2.0" timeout="10000" posh="UNKNOWN" env="P" wadh="" /> <CustOpts><Param name="mantrakey" value="undefined" /></CustOpts> </PidOptions>';
var xhr;
var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) {
// If Internet Explorer, return version number
//IE browser
xhr = new window.ActiveXObject("Microsoft.XMLHTTP");
} else {
//other browser
xhr = new XMLHttpRequest();
}
xhr.open("CAPTURE", url, true);
xhr.setRequestHeader("Content-Type", "text/xml");
xhr.setRequestHeader("Accept", "text/xml");
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
var status = xhr.status;
//parser = new DOMParser();
if (status == 200) {
var test1 = xhr.responseText;
var test2 = test1.search("errCode");
var test6 = getPosition(test1, '"', 2);
var test4 = test2 + 9;
var test5 = test1.slice(test4, test6);
// conversion
var result1 = convert.xml2json(test1, { compact: true, spaces: 4 });
setPidData(JSON.parse(result1));
if (test5 > 0) {
alert(xhr.responseText);
//document.getElementById('text').value = xhr.responseText;
} else {
alert("Captured Successfully");
var result1 = convert.xml2json(test1, { compact: true, spaces: 4 });
setPidData(JSON.parse(result1));
// callback(JSON.parse(result1));
//document.getElementById('text').value = "Captured Successfully";
}
} else {
console.log(xhr.response);
}
}
};
xhr.send(PIDOPTS);
}
morphoCapture()
and mantraCapture()
, which are used to capture biometric data from Morpho and Mantra devices, respectively.
morphoCapture()
function:- Constructs a URL using the
devicePort
variable to specify the Morpho device’s endpoint for capturing biometric data. - Creates a string named
PIDOPTS
that holds XML content defining options for the capture process. - Performs a check to determine the appropriate type of XMLHttpRequest object (
xhr
) to use based on the user’s browser. - Opens an asynchronous request to the specified URL using the “CAPTURE” method.
- Sets request headers for the content type and accept type.
- Defines an
onreadystatechange
event handler that executes when the request’sreadyState
is 4 (indicating completion). - Within the event handler, checks the request’s status and processes the response accordingly. If the status is 200 (successful), it parses the XML response to JSON format using
convert.xml2json
and sets the parsed data usingsetPidData()
. If an error occurs, it logs the response to the console.
- Constructs a URL using the
getPosition(string, subString, index)
function:- This helper function takes in a string, a substring, and an index as parameters.
- It splits the string based on the substring and returns the length of the joined string up to the specified index.
- It is used to determine the position of a character in a string.
mantraCapture()
function:- Similar to
morphoCapture()
, this function is designed for capturing biometric data from Mantra devices. - Constructs a URL using the
devicePort
variable to specify the Mantra device’s endpoint for capturing biometric data. - Creates a string named
PIDOPTS
that holds XML content defining options for the capture process. - Performs the same XMLHttpRequest setup, request opening, and event handling as in
morphoCapture()
. - Processes the response similarly, parsing the XML to JSON, setting the parsed data using
setPidData()
, and displaying alerts based on the response.
- Similar to
All Code in One
import React from "react";
const App = () => {
const [deviceInfo, setDeviceInfo] = useState(null);
const [devicePort, setDevicePort] = useState("11100");
const mantraPorts = [
"11100",
"11101",
"11102",
"11103",
"11104",
"11105",
"11106",
];
const discoverDevice = () => {
let found = false;
for (let i = 0; i < mantraPorts.length && !found; i++) {
const currentPort = mantraPorts[i];
try {
discoverDeviceReq(currentPort, () => {
found = true;
setDevicePort(currentPort);
getDeviceInfo(currentPort);
});
} catch (error) {}
}
};
function discoverDeviceReq(port, callback) {
let url;
if (device == 0) {
url = `https://localhost:${port}/rd/info`;
}
if (device == 1) {
url = `https://localhost:${port}/getDeviceInfo`;
}
console.log(url);
var xhr;
var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) {
// If Internet Explorer, return version number
//IE browser
xhr = new window.ActiveXObject("Microsoft.XMLHTTP");
} else {
//other browser
xhr = new XMLHttpRequest();
}
//
xhr.open("DEVICEINFO", url, true);
xhr.onreadystatechange = function () {
// if(xhr.readyState == 1 && count == 0){
// fakeCall();
//}
if (xhr.readyState == 4) {
var status = xhr.status;
if (status == 200) {
var result1 = convert.xml2json(xhr.responseText, {
compact: true,
spaces: 4,
});
const data1 = JSON.parse(result1);
if (
data1.DeviceInfo.additional_info.Param[0]._attributes.value == ""
) {
} else {
callback();
}
} else {
console.log(xhr.response);
}
}
};
xhr.send();
}
function morphoCapture() {
var url = `https://localhost:${devicePort}/capture`;
let PIDOPTS =
'<PidOptions ver="1.0">' +
'<Opts fCount="1" fType="2" iCount="" iType="" pCount="" pType="" format="0" pidVer="2.0" timeout="10000" otp="" wadh="" posh=""/>' +
"</PidOptions>";
var xhr;
var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) {
// If Internet Explorer, return version number
//IE browser
xhr = new window.ActiveXObject("Microsoft.XMLHTTP");
} else {
//other browser
xhr = new XMLHttpRequest();
}
xhr.open("CAPTURE", url, true);
xhr.setRequestHeader("Content-Type", "text/xml");
xhr.setRequestHeader("Accept", "text/xml");
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
var status = xhr.status;
//parser = new DOMParser();
if (status == 200) {
var test1 = xhr.responseText;
var test2 = test1.search("errCode");
var test6 = getPosition(test1, '"', 2);
var test4 = test2 + 9;
var test5 = test1.slice(test4, test6);
// conversion
if (test5 > 0) {
alert(xhr.responseText);
//document.getElementById('text').value = xhr.responseText;
} else {
alert("Captured Successfully");
var result1 = convert.xml2json(test1, { compact: true, spaces: 4 });
setPidData(JSON.parse(result1));
}
} else {
console.log(xhr.response);
}
}
};
xhr.send(PIDOPTS);
}
function getPosition(string, subString, index) {
return string.split(subString, index).join(subString).length;
}
function mantraCapture() {
var url = `https://localhost:${devicePort}/rd/capture`;
let PIDOPTS =
'<?xml version="1.0"?> <PidOptions ver="1.0"> <Opts fCount="1" fType="2" iCount="0" pCount="0" format="0" pidVer="2.0" timeout="10000" posh="UNKNOWN" env="P" wadh="" /> <CustOpts><Param name="mantrakey" value="undefined" /></CustOpts> </PidOptions>';
var xhr;
var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) {
// If Internet Explorer, return version number
//IE browser
xhr = new window.ActiveXObject("Microsoft.XMLHTTP");
} else {
//other browser
xhr = new XMLHttpRequest();
}
xhr.open("CAPTURE", url, true);
xhr.setRequestHeader("Content-Type", "text/xml");
xhr.setRequestHeader("Accept", "text/xml");
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
var status = xhr.status;
//parser = new DOMParser();
if (status == 200) {
var test1 = xhr.responseText;
var test2 = test1.search("errCode");
var test6 = getPosition(test1, '"', 2);
var test4 = test2 + 9;
var test5 = test1.slice(test4, test6);
// conversion
var result1 = convert.xml2json(test1, { compact: true, spaces: 4 });
setPidData(JSON.parse(result1));
if (test5 > 0) {
alert(xhr.responseText);
//document.getElementById('text').value = xhr.responseText;
} else {
alert("Captured Successfully");
var result1 = convert.xml2json(test1, { compact: true, spaces: 4 });
setPidData(JSON.parse(result1));
// callback(JSON.parse(result1));
//document.getElementById('text').value = "Captured Successfully";
}
} else {
console.log(xhr.response);
}
}
};
xhr.send(PIDOPTS);
}
const capture = () => {
if (
!deviceInfo ||
!deviceInfo.DeviceInfo ||
!deviceInfo.DeviceInfo.additional_info ||
deviceInfo.DeviceInfo.additional_info.Param.length == 0
) {
alert("Please choose device or check device is ready or not");
} else if (
device == 0 &&
deviceInfo.DeviceInfo.additional_info.Param[0]._attributes.value != ""
) {
mantraCapture();
} else if (
device == 1 &&
deviceInfo.DeviceInfo.additional_info.Param[0]._attributes.value != ""
) {
morphoCapture();
} else {
alert("Please choose device or check device is ready or not");
}
};
return (
<div>
<button onClick={capture}>Capture</button>
</div>
);
};
export default App;
Summary
We explored the process of setting up the Mantra device by downloading its drivers and installing them on the system. We also covered troubleshooting steps if the device is not recognized, including restarting the computer and restarting the RD Mantra service.
Furthermore, we provided an overview of the steps to set up a React project, simplifying the instructions for a user to understand and follow.
We also analyzed a code snippet that involved discovering the port connected to Mantra and Morpho devices. The code aimed to find the correct port, store its number, and retrieve device information such as serial number.
Finally, we explained another code snippet that included functions for capturing biometric data from Mantra and Morpho devices. The code involved making requests to specific URLs, handling responses, parsing XML to JSON, and displaying alerts based on the response.
If you want to deploy this React app using Amazon EC2, please click here.