เพิ่มฟีเจอร์ยืนยันตัวตนให้แอปพลิเคชันแบบง่ายๆ ด้วย AI API ตรวจจับใบหน้าจาก aiFace
ใบบทความที่แล้วเราได้อธิบายถึงภาพรวมของ AI API ตรวจจับและจดจำใบหน้า ให้นักพัฒนาซอฟต์แวร์ได้เข้าใจหลักการการทำงานกันไปเรียบร้อยแล้ว และหลังจากเข้าใจ Concept ของการใช้ Face Recognition แล้ว ต่อมา AIGEN จะมาแนะนำ 4 ขั้นตอนง่ายๆ ในการนำ AI API ตรวจจับใบหน้าไปใช้งานเบื้องต้นกับการเขียนเว็บไซต์ (webcam) เพื่อเป็นแนวทางให้นักพัฒนาซอฟต์แวร์สามารถทำตามกันได้
4 ขั้นตอนการนำ AI API ตรวจจับใบหน้าไปใช้กับการพัฒนาแอปพลิเคชัน
1. เตรียม HTML (webcam) สำหรับการถ่ายรูป
ขั้นตอนนี้เราจะเตรียม code สำหรับจัดการ User Interface ของกล้องถ่ายรูปในรูปแบบของ HTML เพื่อกำหนดตำแหน่งและขนาดของกล้องบนเว็บไซต์
<!DOCTYPE html>
<html>
<head>
<title>Demo - Capture Photo From Webcam Using Javascript</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta
name="viewport"
content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"
/>
<style type="text/css">
.wrap {
position: relative;
}
.overlay {
position: absolute;
bottom: 0;
width: 100%;
z-index: 25;
text-align: center;
}
</style>
</head>
<body>
<h2>Demo - Capture Photo From Webcam Using Javascript</h2>
<!-- wrapper for button -->
<div class="wrap">
<video
autoplay="true"
style="width: 640px; border-radius: 10px"
></video>
<div class="overlay">
<button
name="click_photo"
style="height: 65px; margin-bottom: 15px; border-radius: 10px"
>
Click Photo
</button>
</div>
</div>
// Add Script Here <script></script>
</body>
</html>
2. เพิ่ม Javascript สำหรับควมคุม Webcam
ส่วนของการควบคุมกล้อง จะใช้ Javascript Code ทำการควบคุมการทำงานของกล้องบน HTML ทั้งการเปิดกล้อง การกดถ่ายรูป เพื่อใช้สำหรับการส่งข้อมูลรูปภาพไปยัง AI API
<script>
(async function () {
//start
console.log("start open camera");
let video = document.querySelector("div.wrap video");
let click_button = document.querySelector(
"div.overlay button[name='click_photo']"
);
//image resolution ***more resolution is data tranfer size
let width = 640;
let height = 480;
let stream = null;
//get media consent
try {
stream = await navigator.mediaDevices.getUserMedia({
video: { width, height },
audio: false,
});
} catch (error) {
//on error can't open camera handler
alert(error.message);
return;
}
video.srcObject = stream;
//onclick event take photo
click_button.addEventListener("click", function () {
let canvas = document.createElement("canvas");
canvas.width = width;
canvas.height = height;
canvas
.getContext("2d")
.drawImage(video, 0, 0, canvas.width, canvas.height);
//base64 data for server side **due to security issue, please encrypt base64 with any secret key before send
let image_data_url = canvas
.toDataURL("image/jpeg")
.replace(/^data:image\/jpeg;base64,/, "");
//log base64
console.log(image_data_url);
});
})();
</script>
3. เพิ่มการเชื่อมต่อกับ AI API Face Recognition จาก AIGEN
เมื่อได้รูปภาพจากการถ่ายรูปของกล้องแล้ว เราจะทำการนำรูปภาพนั้นส่งต่อไปยัง AI API เพื่อทำการตรวจสอบว่า รูปภาพใบหน้ามีความเหมือนกันหรือไม่ โดยมีตัวอย่างการส่งข้อมูลด้วยการใช้ Javascript ด้านล่างนี้
// post data function
function request(url, params = {}) {
let options = {}
options.method = 'POST'
options.headers = {
'Content-Type': 'application/json',
'x-aigen-key': '<key>'
}
options.body = JSON.stringify(params)
const result = fetch(url, options).then((response) => response.json())
return result
}
//onclick event take photo จากข้อ 2.
click_button.addEventListener("click", function () {
let canvas = document.createElement("canvas");
canvas.width = width;
canvas.height = height;
canvas
.getContext("2d")
.drawImage(video, 0, 0, canvas.width, canvas.height);
//base64 data for server side **due to security issue, please encrypt base64 with any secret key before send
let image_data_url = canvas
.toDataURL("image/jpeg")
.replace(/^data:image\/jpeg;base64,/, "");
//log base64
console.log(image_data_url);
const api = "https://apis.aigen.online/aiface/face-compare/v1"
const data = {
image1: "BASE64 รูปจากบัตรประชาชน หรือ database",
image2: image_data_url,
}
// ส่งข้อมูลไปยัง API
request(api, data, { headers: headers })
.then((data) => {
console.log(data);
})
.catch((err) => {
console.error(err);
});
});4. ตัวอย่างผลลัพธ์ที่ได้จาก Face Compare AI API
ผลลัพธ์ที่ได้จากการส่งข้อมูลรูปภาพไปยัง AI API ของ AIGEN จะมาในรูปแบบของ JSON Response Format
{
"request_id": "string",
"confidence": 100, // ค่าความแม่นยำเปรียบเทียบ
"thresholds": { // ค่า threshold สำหรับเปรียบเทียบ (confidence > err = success)
"err_01": 32.33,
"err_001": 54.38,
"err_0001": 59.71
},
"time_used": 0,
"error_message": "error_message"
}
จากตัวอย่าง Code ทั้งหมดเราจะได้การส่งข้อมูลไปตรวจสอบที่ AI API Face recognition ของ AIGEN และเมื่อได้ข้อมูลส่งกลับมาแล้ว ธุรกิจก็จะสามารถนำข่อมูลเหล่านี้ไปใช้งานต่อใน Business Process ต่อไปได้
ต้องการนำ AI API ตรวจจับใบหน้าไปใช้กับแอปพลิเคชันของธุรกิจ
AI API ตรวจจับใบหน้าจะช่วยยกระดับประสบการณ์ให้กับผู้ใช้งานแอปพลิเคชันให้สามารถยืนยันตัวตน หรือเข้าถึงการทำธุรกรรมต่างๆ บนแอปพลิเคชันได้อย่างสะดวก รวดเร็ว และปลอดภัย เรียกได้ว่าเป็นอีกหนึ่งฟีเจอร์สำคัญที่แอปพลิเคชันยุคใหม่จำเป็นต้องมี และเพื่อให้การพัฒนาฟีเจอร์นี้ของธุรกิจทำได้อย่างรวดเร็ว AIGEN มีบริการ AI API ตรวจจับใบหน้าที่พร้อมใช้งานให้กับธุรกิจ และนักพัฒนาซอฟต์แวร์สามารถนำไปใช้งานได้ในทันที ตอบโจทย์การพัฒนาซอฟต์แวร์ยุคใหม่ได้เป็นอย่างดี สามารถดูรายละเอียด AI API Documentation ของเราได้ หรือติดต่อเพื่อพูดคุยกับผู้เชี่ยวชาญของเราได้ที่นี่
ทีมงานผู้เชี่ยวชาญด้าน AI อัจฉริยะ พร้อมช่วยขับเคลื่อนการทำงานของธุรกิจ มีประสบการณ์ให้บริการโซลูชัน AI เพื่อองค์กรระดับประเทศมากมาย
