فرادرستشخیص چهره زنده و اعمال فیلترهای مختلف در جاوا اسکریپت | به زبان ساده
در این مقاله به بررسی روش پیاده‌سازی تشخیص چهره زنده و اعمال فیلترهای مختلف در جاوا اسکریپت می‌پردازیم. این فیلترها شبیه به قابلیت‌هایی است که در اپلیکیشن‌هایی مانند اینستاگرام یا اسنپ‌چت مشاهده کرده‌اید. در این پروژه برخی فیلترهای بسیار جذاب مانند ماسک اسپایدرمن، سایر شخصیت‌ها و غیره را امتحان خواهیم کرد.
تشخیص ویژگی‌های چهره
یک کتابخانه به نام clmtrackr در جاوا اسکریپت وجود دارد که برای تشخیص چهره روی تصویر استفاده می‌شود.
این کتابخانه قابلیت یافتن اجزای چهره مانند بینی، گوش‌ها و غیره را نیز دارد. به طور کلی این کتابخانه مدل ژنریکی ارائه می‌کند که از پیش آموزش دیده و آماده استفاده است.
اگر تصویری را با این کتابخانه پردازش کنیم، یک آرایه برای هر نقطه روی نقشه بازگشت می‌دهد و هر نقطه به وسیله موقعیت‌های x و y مشخص می‌شود. اگر بخواهید هر چیزی را جایگزین کنید، می‌توانید از این نقطه‌ها کمک بگرید. در بخش بعدی یک پروژه جذاب را با استفاده از این کتابخانه می‌سازیم.
ساختمان ابتدایی کد
برای ساخت این اپلیکیشن از یک کتابخانه به نام p5.js استفاده خواهیم کرد. این یک کتابخانه جاوا اسکریپت است که به طور عمده برای کار با canvas طراحی شده است. این یک کتابخانه سنتی UI نیست، بلکه زمان ساخت UI در مواردی که نیاز به آپدیت دارد را تعریف می‌کند. این کتابخانه سه رویداد اصلی به شرح زیر دارد:
- Preload - این رویداد برای اجرای کتابخانه صحیحی که پیش و پس از ساخت هر UI روی صفحه بارگذاری می‌شود، مورد استفاده قرار می‌گیرد.
- Setup - این رویداد نیز یک بار و پس از رویداد preload یعنی زمانی که آماده ساخت UI اولیه هستیم، اجرا می‌شود.
- Draw – این تابعی است که درون یک حلقه فراخوانی می‌شود و هر بار که سیستم نیاز به رندر کردن صفحه داشته باشد اجرا خواهد شد.
Preload
اکنون از رویداد Preload برای بارگذاری تصویر در صفحه استفاده می‌کنیم. کد آن به صورت زیر است:
ایجاد بوم
برای این که این بوم واکنش‌گرایی بیشتری پیدا کند، باید اندازه دینامیکی بر اساس اندازه صفحه داشته باشد. نسبت ابعادی برابر با 4:3 است. این گزینه ایده‌آلی نیست، اما مجبور هستیم برخی فرضیات را لحاظ کنیم تا کد بهینه باشد. اکنون باید یک بوم با تابع createCanvas کتابخانه P5.js به صورت زیر بسازیم:
دریافت استریم ویدئو
در این مرحله بوم به درستی کار می‌کند و از این رو باید ویدئو را از طریق وب‌کم یا دوربین دریافت کنیم. تابع videoCapture در کتابخانه P5.js به این منظور تدارک دیده شده است.
ساخت بخش انتخاب فیلتر
اکنون باید یک فیلتر بسازیم. برای فیلترها به گزینه‌های بیشتری نیاز داریم. ما می‌توانیم از یک تابع بازشدنی ساده برای این پروژه استفاده کنیم. به این منظور از تابع ()createSelect استفاده می‌کنیم:
ساخت بخش دریافت تصویر
اکنون برای تهیه تصویر باید از image tracker استفاده کنیم که یک شیء برای فید ویدئو است و هر فریم را در چهره مشخص می‌سازد. این ترکر کافی است یک بار تنظیم شود:
رسم فیلترهای ویدئویی
به این منظور باید رویداد draw را در P5.js به‌روزرسانی کنیم. خروجی منبع ویدئویی روی بوم هر فیلتری که انتخاب شده باشد را اعمال می‌کند. در این مورد تابع رسم کاملاً ساده است. این تابع پیچیدگی‌های کار را به تعریف فیلتر واگذار می‌کند:
ساخت فیلترها
ساخت فیلتر می‌تواند فرایندی ساده یا پیچیده باشد و این موضوع در عمل به فیلتری وابسته است که می‌خواهید بسازید. برای ساخت ماسک باید تصویر ماسک را به مرکز صفحه اضافه کنیم. ابتدا باید مطمئن شویم که شیء faceTracker با استفاده از تابع ()faceTraker.getCurrentPosition به درستی چهره را تشخیص داده است.
زمانی که چهره تشخیص داده شد، باید از P5.js برای رندر تصویر با استفاده از نقطه 62 چهره در مرکز تصویر استفاده کنیم. سپس عرض و ارتفاع را داریم که نمایش‌دهنده اندازه چهره است.
سخن پایانی
امیدواریم این مطلب باعث شده باشد که معلومات شما در مورد روش ساخت فیلتر با استفاده از کتابخانه جاوا اسکریپت ارتقا یابد. شما می‌توانید با کمی تلاش فیلترهای جالبی ایجاد کنید.
