API تشخیص چهره کروم — راهنمای کاربردی

۱۶۵ بازدید

آخرین به‌روزرسانی: ۱۱ اردیبهشت ۱۴۰۲

زمان مطالعه: ۳ دقیقه

«رابط برنامه‌نویسی کاربردی» (Application Programming Interface) «کروم» (Chrome) برای تشخیص چهره، همچنان در حال توسعه است و نسخه کنونی آن، آزمایشی محسوب می‌شود. به نظر می‌رسد این سیستم هنوز روی برخی از پلتفرم‌ها نمی‌تواند به خوبی چهره‌ها را تشخیص بدهد. برای مثال، در یک ازمایش انجام شده، API فوق، در سیستم‌عامل گنو/لینوکس هیچ چیز را نتوانست تشخیص بدهد، در ویندوز تنها چهره‌ها را تشخیص داد و در مک توانست صورت، چشم‌ها و دهان را تشخیص بدهد. با این وجود، این API فرصت رشد زیادی دارد و احتمالا به زودی مشکلات بیان شده برای آن، رفع می‌شوند. در این مطلب، API تشخیص چهره کروم به طور کامل مورد بررسی قرار می‌گیرد.

فهرست مطالب این نوشته

API تشخیص چهره کروم

دلیل استفاده از API تشخیص چهره مرورگر کروم

کد API تشخیص چهره گوگل

نمونه اولیه ویدئو

API تشخیص چهره کروم

برای کار با این API، ابتدا باید Experimental Web Platform Features را روی فلگ‌های کروم فعال کرد.

فیلم آموزش کار با گوگل کروم Google Chrome و تنظیمات آن در فرادرس

کلیک کنید

انجام این کار بسیار ساده است. برای فعال کردن قابلیت مذکور، ابتدا باید به مسیر زیر رفت.

chrome://flags/#enable-experimental-web-platform-features

و بخش Experimental Web Platform Features را فعال (Enable) کرد.

API تشخیص چهره کروم

پس از آن، باید روی گزینه Relaunch Now که در پایین صفحه قرار دارد کلیک کرد.

API تشخیص چهره کروم

بعد از راه‌اندازی مجدد، کاربر باید بتواند به API تشخیص چهره، برای مثال از طریق صفحه کنسول، دسترسی داشته باشد.

FaceDetector

دلیل استفاده از API تشخیص چهره مرورگر کروم

همانطور که پیش‌تر بیان شد، این API هنوز کامل نشده، محدود و دارای باگ است. استفاده از چنین API‌هایی معمولا توصیه نمی‌شود، ولی به نظر می رسد که کار با این API چالش خوبی برای ساخت نوعی فیلتر شبیه به فیلترهای اسنپ‌چت (Snapchat )/اینستاگرام (Instagram) باشد.

فیلم آموزش روش صحیح جستجو در گوگل – سرچ Google در فرادرس

کلیک کنید

خبر انتشار API مرورگر کروم، برای اولین بار توسط «وِس باس» (Wes Bos) در شبکه اجتماعی «توییتر» (Twitter) منتشر شد.

API تشخیص چهره کروم

در گیت‌هاب پروژه نیز، مثال‌های جالبی در این رابطه وجود دارد. از جمله این مثال‌ها می‌توان به موارد زیر اشاره کرد:

استفاده از این API روی Web Workers / Service Workers
بریدن تصویر پروفایل کاربر با تشخیص دادن چهره و به طور خودکار
تگ زدن سریع تصاویر که با پیدا کردن سریع تصاویر و قرار دادن تگ‌ها در نزدیکی چهره انجام می‌شود

کد API تشخیص چهره گوگل

نمونه اولیه ویدئو

برای بررسی اینکه آیا می‌توان خروجی شبیه به فیلترهای اسنپ‌چت با چشم‌های گوگولی (+) دریافت کرد یا خیر، کد لازم برای پیاده‌سازی آن نوشته شد که در ادامه آمده است. این کد به درستی کار می‌کند.

فیلم آموزش مقدماتی کتابخانه ReactJS در جاوا اسکریپت در فرادرس

کلیک کنید

نکته مهمی که حین انجام این کار به چشم می‌خورد، کرش کردن API روی ویدئوهایی با ۳۰ یا ۶۰ فرم در ثانیه (fps) بود که حاکی از مناسب نبودن این API برای کار با فایل‌های ویدئویی است (دستکم در حال حاضر). قطعه کد مربوط به این کار، در ادامه آمده است.

1import React from "react";
2import { render } from "react-dom";
3import Hello from "./Hello";
4
5const styles = {
6  fontFamily: "sans-serif",
7  textAlign: "center"
8};
9
10class App extends React.Component {
11  _videoRef = video => {
12    this.video = video;
13  };
14
15  componentWillUnmount() {
16    clearInterval(this.inverval);
17  }
18
19  componentDidMount() {
20    if (!navigator.getUserMedia) {
21      alert("No webcam!");
22      return;
23    }
24
25    if (typeof window.FaceDetector === "undefined") {
26      alert("No face detection!");
27      return;
28    }
29
30    const video = this.video;
31    const faceDetector = new window.FaceDetector();
32
33    navigator.getUserMedia(
34      { audio: false, video: { width: 1280, height: 720 } },
35      stream => {
36        video.srcObject = stream;
37        setTimeout(() => {
38          this.inverval = setInterval(async () => {
39            const faces = await faceDetector.detect(video);
40
41            faces.forEach(face => {
42              const { width, height, top, left } = face.boundingBox;
43
44              const faceBox = document.getElementById("facebox");
45
46              faceBox.style.cssText = `
47                position: absolute;
48                z-index: 2;
49                width: ${width}px;
50                height: ${height}px;
51                top: ${top}px;
52                left: ${left}px;
53              `;
54
55              face.landmarks.forEach((landmark, index) => {
56                if (landmark.type !== "eye") {
57                  return;
58                }
59
60                const { x, y } = landmark.location;
61                const div = document.getElementById(`eye-${index}`);
62                div.style.cssText = `
63                  z-index: 2;
64                  width: 35%;
65                  height: 35%;
66                  position: absolute;
67                  background-size: cover;
68                  top: ${y - top - 50}px;
69                  left: ${x - left - 50}px;
70                  background-image: url('https://orig00.deviantart.net/39bb/f/2016/217/1/0/free_googly_eye_by_terrakatski-dacmqt2.png');
71                `;
72              });
73            });
74          }, 150);
75        }, 500);
76      },
77      err => {}
78    );
79  }
80
81  render() {
82    return (
83      <div id="wrapper" style={{ position: "relative" }}>
84        <video ref={this._videoRef} autoPlay />
85        <div id="facebox">
86          <div id="eye-0" />
87          <div id="eye-1" />
88        </div>
89      </div>
90    );
91  }
92}
93
94render(<App />, document.getElementById("root"));

گیت‌هاب پروژه برای دسترسی داشتن به کدهای کامل آن، از این مسیر [+] در دسترس است. می‌توان کدهای پروژه را از این مسیر [+] مورد آزمایش قرار دارد.

فیلم آموزش گیت Git، گیت هاب و گیت لب (رایگان) در فرادرس

کلیک کنید

API روی تصویر گروهی از افراد نیز تست شده که خروجی آن به صورت زیر است و به نظر می‌رسد که به خوبی توانسته چهره‌ها را شناسایی کند.

API تشخیص چهره کروم

نکته شایان توجه این است که ظاهرا کد نوشته شده و این API، روی کامپیوترهای گوناگون خروجی‌های متفاوتی دارند. روی برخی از سیستم‌ها نیز کد اصلا اجرا نمی‌شد. در مجموع باید گفت این API در آغاز راه خود قرار دارد، ولی در صورت رفع اشکال می‌تواند قدرتمند واقع شود.

فیلم مجموعه آموزش طراحی و برنامه ‌نویسی سایت – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

اگر مطلب بالا برای شما مفید بوده، آموزش‌های زیر نیز به شما پیشنهاد می‌شود:

بر اساس رای ۰ نفر

آیا این مطلب برای شما مفید بود؟

اگر بازخوردی درباره این مطلب دارید یا پرسشی دارید که بدون پاسخ مانده است، آن را از طریق بخش نظرات مطرح کنید.

ثبت نظر

منابع:

medium

الهام حصارکی (+)

«الهام حصارکی»، فارغ‌التحصیل مقطع کارشناسی ارشد مهندسی فناوری اطلاعات، گرایش سیستم‌های اطلاعات مدیریت است. او در زمینه هوش مصنوعی و داده‌کاوی، به ویژه تحلیل شبکه‌های اجتماعی، فعالیت می‌کند.