Share

เพิ่มฟีเจอร์ยืนยันตัวตนให้แอปพลิเคชันแบบง่ายๆ ด้วย AI API ตรวจจับใบหน้าจาก aiFace

ใบบทความที่แล้วเราได้อธิบายถึงภาพรวมของ AI API ตรวจจับและจดจำใบหน้า ให้นักพัฒนาซอฟต์แวร์ได้เข้าใจหลักการการทำงานกันไปเรียบร้อยแล้ว และหลังจากเข้าใจ Concept ของการใช้ Face Recognition แล้ว ต่อมา AIGEN จะมาแนะนำ 4 ขั้นตอนง่ายๆ ในการนำ AI API ตรวจจับใบหน้าไปใช้งานเบื้องต้นกับการเขียนเว็บไซต์ (webcam) เพื่อเป็นแนวทางให้นักพัฒนาซอฟต์แวร์สามารถทำตามกันได้

ai api ยืนยันตัวตนด้วยใบหน้าสำหรับแอปพลิเคชัน

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 ของเราได้ หรือติดต่อเพื่อพูดคุยกับผู้เชี่ยวชาญของเราได้ที่นี่

AIGEN Live chat