افزودن فیلترهای واقعیت افزوده به تماس‌های ویدیویی با استفاده از DeepAR و Dyte

ek3nk4r 2023-07-05

0 77 خواندن این مطلب 8 دقیقه زمان میبرد

افزودن فیلترهای واقعیت افزوده به تماس‌های ویدیویی با استفاده از DeepAR و Dyte

پیشنهاد ویژه

خرید فالوور واقعی خرید لایک اینستاگرام خرید ویو اینستاگرام خرید فالوور اینستاگرام

مگر اینکه زیر سنگ زندگی می کنید، از پلتفرم های رسانه های اجتماعی مانند TikTok، Instagram، Facebook یا Snapchat استفاده می کردید. هنگام ارسال عکس یا ویدیو در این پلتفرم‌ها، معمولاً این امکان را دارید که عکس یا ویدیو را با استفاده از فیلترهای مختلف بهبود بخشید.

می‌توانید خود را در یک تصویر یا ویدیو با رنگ موی متفاوت تغییر دهید یا کلاه بپوشید، حتی اگر با پوشیدن آن عکس نگرفته‌اید یا ویدیو ضبط نکرده‌اید.

پلتفرم‌های رسانه‌های اجتماعی از فیلترهای واقعیت افزوده (AR) استفاده می‌کنند تا همه این پیشرفت‌های عکس یا ویدیو را ممکن کنند. فیلترهای واقعیت افزوده افکت‌های دیجیتالی هستند که با استفاده از فناوری بینایی رایانه‌ای برای ردیابی حرکات و ویژگی‌های چهره یک فرد در یک تصویر یا ویدیو، می‌توانند به‌صورت بلادرنگ روی تصاویر یا ویدیوها اعمال شوند.

فیلترهای AR عمدتاً برای سرگرمی، برندسازی و بازاریابی استفاده می‌شوند، زیرا روشی سرگرم‌کننده و جذاب برای افزایش محتوای بصری ارائه می‌دهند. این فیلترها همچنین می توانند تجربیات همه جانبه ای مانند آزمایش های مجازی برای لباس ایجاد کنند و محصولات را به صورت منحصر به فرد و تعاملی به نمایش بگذارند.

در این مقاله، نحوه ساخت اپلیکیشن تماس ویدیویی با فیلترهای واقعیت افزوده با استفاده از Dyte video SDK، DeepAR و کیت UI اجزای وب را یاد خواهید گرفت. Dyte یک پلت فرم توسعه‌دهنده است که SDK‌های قوی را برای ایجاد تجربه‌های زنده در یک برنامه ارائه می‌دهد.

فهرست مطالب

پیش نیازها

برای پیگیری این مقاله، به نرم افزار زیر روی کامپیوتر خود نیاز دارید:

یک ویرایشگر متن: من از Visual Studio Code به عنوان یک ویرایشگر متن برای این مقاله استفاده خواهم کرد. برای نصب VS Code، به صفحه دانلود VS Code بروید و آن را برای سیستم عامل خود دانلود کنید.

یک حساب Dyte ایجاد و راه اندازی کنید

مرحله 1: به dyte.io بروید و روی دکمه Start building کلیک کنید.

صفحه اصلی dyte.io
گام 2: در صفحه بعدی با استفاده از حساب Google یا GitHub خود برای یک حساب Dyte رایگان ثبت نام کنید.
صفحه ثبت نام برای یک حساب Dyte رایگان با استفاده از حساب Google یا GitHub خود
مرحله 3: پس از ایجاد یک حساب Dyte، با ارائه شناسه سازمان و کلید API به صفحه «کلیدهای API» هدایت خواهید شد. کلید API خود را ایمن نگه دارید و آن را با کسی به اشتراک ندهید.
کلیدهای API پورتال توسعه دهنده

از پیش تنظیم ها ایجاد کنید

Dyte شامل مجموعه ای از تنظیمات از پیش تنظیم شده است. اگر مایل به ایجاد آن نیستید، به سادگی می توانید از پیش تنظیم پیش فرض استفاده کنید.
تنظیمات از پیش تنظیم شده Dyte

یک جلسه Dyte ایجاد کنید

مرحله 1: به صفحه ایجاد جلسه بروید.
یک صفحه جلسه ایجاد کنید
گام 2: در سمت راست صفحه، قسمت ورودی نام کاربری را با شناسه سازمان و قسمت ورودی رمز عبور را با کلید API خود که در صفحه کلیدهای API ارائه شده است، پر کنید.
پر کردن شناسه سازمان و کلید API
مرحله 3: در بخش Body، عنوان «فیلترهای AR» را به جلسه بدهید. سپس روی دکمه Send API Request کلیک کنید.
با دادن عنوان «فیلترهای AR» به جلسه
مرحله 4: به صفحه Meetings در Dyte Developer Portal بروید و می بینید که جلسه ای با عنوان AR Filters ایجاد شده است.
صفحه جلسات باید جلسه ای با عنوان "فیلترهای AR"

یک شرکت کننده به جلسه اضافه کنید

مرحله 1: به صفحه افزودن یک شرکت‌کننده بروید و فیلدهای ورودی سازمان شناسه و کلید API را (می‌توانید از پورتال توسعه‌دهنده Dyte دریافت کنید) را پر کنید، همانطور که در مرحله بالا نشان داده شده است.
یک صفحه شرکت کننده اضافه کنید
گام 2: در قسمت Parameters، شناسه جلسه جلسه فیلترهای AR را که قبلا ایجاد کردیم اضافه کنید.
بخش پارامترها
مرحله 3: در قسمت Body گزینه ها را مطابق شکل زیر پر کنید. سپس روی دکمه «ارسال درخواست API» کلیک کنید.
پر کردن گزینه ها در بخش بدنه
مرحله 4: بدست آوردن token. این توکن برای هر یک از شرکت‌کنندگان در جلسه منحصربه‌فرد است و در حالت ایده‌آل می‌خواهید آن را برای هر شرکت‌کننده با فراخوانی APIهای Dyte در باطن خود دریافت کنید.
نام authToken را در آخرین خط پاسخ API به عنوان 'token' دریافت کنید

ایجاد جلسه Dyte شما

مرحله 1: پوشه ای به نام “ARFilters” در رایانه خود ایجاد کنید. سپس پوشه را در یک ویرایشگر متن باز کنید و یک فایل index.html به آن اضافه کنید.
افزودن پوشه ARFilters به فایل index.html در یک ویرایشگر متن
گام 2: SDK دوم را نصب کنید.

<head>
  <script type="module">
      import { defineCustomElements } from '<https://cdn.jsdelivr.net/npm/@dytesdk/ui-kit@1.51.1/loader/index.es2017.js>';
      defineCustomElements();
  </script>
  <!-- Import Web Core via CDN too -->
  <script src="<https://cdn.dyte.in/core/dyte-1.14.0.js>"></script>
</head>

مرحله 3: در شما index.html برای کنترل فیلترهای واقعیت افزوده، یک رابط کاربری اولیه جلسه با دو دکمه سفارشی بسازید.

<body>
    <div id="app">
      <dyte-dialog-manager class="dyte"></dyte-dialog-manager>
      <dyte-participants-audio class="dyte"></dyte-participants-audio>
      <dyte-notifications class="dyte"></dyte-notifications>
      <dyte-header class="dyte"></dyte-header>
      <div class="dyte-grid">
        <dyte-grid class="dyte"></dyte-grid>
        <dyte-sidebar class="dyte" default-section="none">
        </dyte-sidebar>
      </div>
      <div class="dyte-controlbar">
        <div class="controlbar-section">
          <dyte-settings-toggle class="dyte"></dyte-settings-toggle>
        </div>
        <div class="controlbar-section">
          <dyte-mic-toggle class="dyte"></dyte-mic-toggle>
          <dyte-camera-toggle class="dyte"></dyte-camera-toggle>
          <dyte-leave-button class="dyte"></dyte-leave-button>
          <dyte-controlbar-button
            label="Add Filter"
            size="lg"
            id="arFilter"
            style="background-color: black; color: white">
          </dyte-controlbar-button>
          <dyte-controlbar-button
            label="Change Filter"
            size="lg"
            id="switchFilter"
            style="background-color: black; color: white">
          </dyte-controlbar-button>
        </div>
        <div class="controlbar-section">
          <dyte-chat-toggle class="dyte"></dyte-chat-toggle>
          <dyte-participants-toggle class="dyte"></dyte-participants-toggle>
          <dyte-polls-toggle class="dyte"></dyte-polls-toggle>
        </div>
      </div>
    </div>
    <script type="module" src="https://dev.to/main.js"></script>
  </body>

ما از مؤلفه های سفارشی ارائه شده توسط Dyte برای ایجاد رابط کاربری پیش فرض جلسه استفاده می کنیم.

سربرگ دوم: این مؤلفه تمام جزئیات اولیه جلسه مانند عنوان، تعداد شرکت کنندگان، ساعت و موارد دیگر را بارگیری می کند.
گرید دوم: این مؤلفه تمام جریان های ویدیویی را از همه شرکت کنندگان در جلسه ارائه می کند.
نوار کناری دوم: این مؤلفه چت، نظرسنجی، فهرست شرکت‌کنندگان و موارد دیگر را ارائه می‌کند.
نوار کنترل دوم: اینجاست که ما کنترل‌هایی را برای جلسه خود اضافه می‌کنیم. کاربر می تواند دوربین و میکروفون خود را تغییر دهد، تنظیمات را تنظیم کند یا فیلترهای AR را از این نوار کنترل مدیریت کند.

ما همچنین یک اسکریپت را وارد می کنیم که به آن پیوند دارد main.js، یک فایل خارجی که شامل تمام منطق تجاری ما خواهد بود.

مرحله 4: منطق کسب و کار را بنویسید

ما یک جلسه Dyte اساسی را با استفاده از ما مقداردهی اولیه می کنیم authToken و شی جلسه را به تمام اجزای ما ارسال کنید.

import icons from './icons.json';

const init = async () => {
  // Initialize Dyte Meeting
  const meeting = await DyteClient.init({
    authToken: import.meta.env.VITE_AUTH_TOKEN,
    defaults: {
      audio: false,
      video: false,
    },
  });

    // Passing the `meeting` prop to all our components
    const els = document.getElementsByClassName('dyte');
  els[0].config = meeting.self.config;
  for (const el of els) {
    el.meeting = meeting;
  }

    // Adding state management for the sidebar component
    document.body.addEventListener('dyteStateUpdate', ({ detail }) => {
      document.querySelector('dyte-sidebar').style.display = detail.activeSidebar ? 'flex' : 'none';
      document.querySelector('dyte-sidebar').states = { sidebar: detail.activeSidebar ? detail.sidebar : 'none' };
    });

    // Adding icons to our custom buttons
  const AddFilter = document.getElementById("arFilter");
  const SwitchFilter = document.getElementById("switchFilter");

  AddFilter.icon = icons.addFilter;
  SwitchFilter.icon = icons.switchFilter;
};

init();

مرحله 5: افزودن CSS به جلسه ما.

ایجاد یک style.css; این فایل تمام استایل های ما را برای جلسه نگه می دارد.

body, html {
  height: 100vh;
  width: 100vw;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  background: rgb(8, 8, 8);
}

#app {
  display: flex;
  flex-direction: column;
  font-family: Arial, Helvetica, sans-serif;
  flex-grow: 1;
  color: white;
}

.ended-screen {
  align-items: center;
  justify-content: center;
}

.dyte-grid {
  flex-grow: 1;
  display: flex;
  flex-direction: row;
}

dyte-grid {
 flex-grow: 1;
}

dyte-sidebar {
  margin: 10px 20px;
  border-radius: 10px;
}

.dyte-controlbar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  min-height: 20px;
  margin:10px 0;
  width: 100%;
}

.controlbar-section {
  display: flex;
  flex-direction: row;
  align-items: center;
}

مرحله 6: فایل HTML را در یک مرورگر باز کنید و از شما خواسته می شود اجازه دسترسی به میکروفون و دوربین خود را بدهید. اگر دوربینتان فعال باشد، باید خود را روی صفحه ببینید.
جلسه با دوربین فعال است

راه اندازی یک حساب DeepAR

مرحله 1: به صفحه اصلی توسعه دهنده DeepAR بروید و روی دکمه «شروع به کار» کلیک کنید.
صفحه اصلی DeepAR
گام 2: با استفاده از حساب Google یا GitHub خود در صفحه بعد، برای یک حساب DeepAR رایگان ثبت نام کنید.
صفحه ثبت نام DeepAR

یک پروژه DeepAR ایجاد کنید

مرحله 1: پس از ثبت نام و ورود به حساب DeepAR خود، به صفحه پروژه ها هدایت می شوید.
صفحه پروژه های DeepAR
گام 2: روی دکمه “ایجاد پروژه” کلیک کنید. نام پروژه را فیلترهای AR بگذارید، با شرایط و ضوابط موافقت کنید، سپس روی دکمه ادامه کلیک کنید.
یک کادر محاوره ای پروژه ایجاد کنید
مرحله 3: پس از ایجاد پروژه، برای افزودن یک برنامه هدایت می شوید. در این صورت به قسمت Web App رفته و انتخاب کنید Add App گزینه. از شما خواسته می شود که یک نام دامنه اضافه کنید. نام دامنه خود را اضافه کنید و روی دکمه ادامه کلیک کنید.
برنامه وب DeepAR
مرحله 4: پس از ایجاد برنامه وب، کلید برنامه DeepAR را دریافت خواهید کرد. کلید فیلتر DeepAR را به عنوان یک کلید مجوز مقداردهی اولیه می کند.

افزودن فیلترهای واقعیت افزوده به برنامه تماس ویدیویی

اکنون که کلید مجوز خود را دریافت کرده اید و یک Dyte Meeting را راه اندازی و اجرا کرده اید. وقت آن است که فیلترهای AR سرگرم کننده را به جلسه خود اضافه کنید.

مرحله 1: DeepAR را نصب کنید

می توانید DeepAR را با استفاده از CDN وارد پروژه خود کنید.

<script src="<https://cdn.jsdelivr.net/npm/deepar/js/deepar.js>"></script>

گام 2: ماژول DeepAR را راه اندازی کنید

چند فیلتر را به مخازن پروژه خود اضافه کنید و مسیری برای آن فیلترها ارائه دهید.

// Initialize DeepAR
  const filters = [
    "./effects/lion",
    "./effects/flowers",
    "./effects/dalmatian",
    "./effects/background_segmentation",
    "./effects/background_blur",
    "./effects/aviators",
  ];

در مرحله بعد، یک عنصر canvas ایجاد می کنیم و ماژول DeepAR را مقداردهی اولیه می کنیم.

const deepARCanvas = document.createElement("canvas");
  deepARCanvas.width = 680;
  deepARCanvas.height = 480;
  const deepAR = await deepar.initialize({
    licenseKey: import.meta.env.VITE_DEEP_AR_TOKEN,
    canvas: deepARCanvas,
    effect: filters[0],
    additionalOptions: {
      cameraConfig: {
        disableDefaultCamera: true,
      },
    },
  });

مرحله 3: فیلترهای AR را به تماس ویدیویی Dyte خود اضافه کنید

در اینجا، ما دو تابع ایجاد می کنیم، یکی برای روشن/خاموش کردن فیلتر AR و دیگری برای جابجایی بین فیلترها.

ما میان افزار را با استفاده از آن به Dyte اضافه می کنیم AddVideoMiddleware API که یک تابع میان افزاری را به عهده می گیرد.

برای جابجایی بین فیلترها، از DeepAR استفاده می کنیم switchEffect روش.

let count = 0;
let filterIndex = 0;

const AddFilter = document.getElementById("arFilter");
const SwitchFilter = document.getElementById("switchFilter");

AddFilter.icon = icons.addFilter;
SwitchFilter.icon = icons.switchFilter;

AddFilter.addEventListener("click", toggleAR);
SwitchFilter.addEventListener("click", filterChangeHandler);

function toggleAR() {
  count++;

  if (count % 2 == 0) {
    AddFilter.label="Add Filter"
    meeting.self.removeVideoMiddleware(AddTheme);
  } else {
    AddFilter.label="Remove Filter"
    meeting.self.addVideoMiddleware(AddTheme);
  }
}

async function filterChangeHandler() {
  filterIndex = (filterIndex + 1) % filters.length;
  await deepAR.switchEffect(filters[filterIndex]);
}

اکنون، بیایید تابع میان افزار ویدیوی خود را با استفاده از DeepAR ایجاد کنیم.

async function AddTheme() {
  let lastProcessedImage = null;
  const intermediatoryCanvas = document.createElement("canvas");
  intermediatoryCanvas.width = 640;
  intermediatoryCanvas.height = 480;
  const intermediatoryCanvasCtx = intermediatoryCanvas.getContext("2d");

  return async (canvas, ctx) => {
    intermediatoryCanvasCtx.drawImage(canvas, 0, 0);
    if (lastProcessedImage) {
      ctx.drawImage(
        lastProcessedImage, 0, 0,
        lastProcessedImage.width,
        lastProcessedImage.height, 0, 0,
        canvas.width, canvas.height
      );
    }
    await deepAR.processImage(intermediatoryCanvas);
    const image = new Image();
    image.id = "picture";
    image.src = await deepAR.takeScreenshot();
    lastProcessedImage = image;
  };
}

با انجام این کار، ما یک برنامه تماس ویدیویی با فیلترهای AR با استفاده از Dyte video SDK و DeepAR ساخته‌ایم! فیلترهای AR خود را به شکلی شبیه به این انتخاب کنید.
نسخه ی نمایشی DeepAR
می توانید نسخه ی نمایشی زنده برنامه نمونه را در اینجا امتحان کنید و کل کد منبع پروژه در اینجا موجود است.

نتیجه

در خاتمه، نحوه ساخت یک برنامه تماس ویدیویی با فیلترهای واقعیت افزوده با استفاده از Dyte video و DeepAR SDK را به شما آموزش دادیم. با کیت UI قابل تنظیم Dyte، می‌توانید به راحتی کنترل‌ها را مدیریت کنید، دکمه‌ها را اضافه یا حذف کنید، کنترل‌های سفارشی ایجاد کنید و کارهای بیشتری را تنها با چند خط کد انجام دهید.

اگر این مقاله سازنده را در شما غلغلک داد، پس SDK پخش زنده Dyte را بررسی کنید. ما کیت‌های توسعه نرم‌افزاری با کاربری آسان را برای ارائه جریان‌های زنده تعاملی در مقیاس با تأخیر بسیار کمتر از HLS سنتی ارائه می‌کنیم. با همان تجربه توسعه‌دهنده دوستانه و توسعه‌پذیری، احساس راحتی کنید. پخش زنده SDK Dyte به زودی در Product Hunt راه اندازی می شود!

بینش بهتری در مورد استفاده از فناوری Dyte دریافت کنید و کشف کنید که چگونه می تواند قابلیت های ارتباطی برنامه شما را با SDK های خود متحول کند. می‌توانید در support@dyte.io با ما تماس بگیرید یا اگر سؤالی دارید از جامعه توسعه‌دهندگان ما بپرسید.