Добавление AR-фильтров к видеовызовам с помощью DeepAR и Dyte

Расширение видео вызовов с помощью AR-фильтров с DeepAR и Dyte

Если вы не живете под камнем, вы, вероятно, использовали такие платформы социальных медиа, как TikTok, Instagram, Facebook или Snapchat. При публикации фотографий или видео на этих платформах обычно есть возможность улучшить фото или видео с помощью различных фильтров.

Вы можете преобразить себя на фотографии или видео, сменить цвет волос или надеть кепку, даже если вы не носили ее на фотографии или видео.

Социальные медиа платформы используют фильтры дополненной реальности (AR), чтобы сделать все эти улучшения фото или видео возможными. Фильтры AR – это цифровые эффекты, которые могут быть применены к изображениям или видео в режиме реального времени, используя технологию компьютерного зрения для отслеживания движений и особенностей лица человека на изображении или видео.

Фильтры AR в основном используются для развлечения, брендинга и маркетинга, потому что они предлагают интересный и привлекательный способ улучшить визуальный контент. Эти фильтры также могут создавать захватывающие впечатления, такие как виртуальное примерочное для одежды, и уникальным и интерактивным образом демонстрировать продукты.

• Изучение бесконечных итераторов в модуле itertools Python
• Топ 10 генеративных AI генераторов 3D-объектов
• Топ-22 альтернативы ChatGPT, которые вы можете попробовать в 2023 году (бесплатные и платные)

В этой статье вы узнаете, как создать видео-приложение для звонков с фильтрами AR, используя Dyte video SDK, DeepAR и UI-компоненты веб-набора. Dyte – это удобная для разработчиков платформа, которая предлагает мощные SDK для создания живых впечатлений внутри приложения.

Предварительные требования

Чтобы следовать инструкциям в этой статье, вам понадобится следующее программное обеспечение, установленное на вашем компьютере:

• Текстовый редактор: В этой статье я буду использовать Visual Studio Code в качестве текстового редактора. Чтобы установить VS Code, перейдите на страницу загрузки VS Code и скачайте его для вашей операционной системы.

Создание и Настройка учетной записи Dyte

Шаг 1: Перейдите на dyte.io и нажмите кнопку “Start building”.

Шаг 2: Зарегистрируйтесь в бесплатной учетной записи Dyte на следующей странице, используя вашу учетную запись Google или GitHub.

Шаг 3: После создания учетной записи Dyte вы будете перенаправлены на страницу “API Keys” с указанным идентификатором организации и ключом API. Храните свой ключ API в безопасности и не делитесь им с кем-либо.

Создание пресетов

Dyte включает в себя набор предварительно настроенных пресетов. Если вы не хотите создавать собственный пресет, вы можете использовать пресет по умолчанию.

Создание встречи Dyte

Шаг 1: Перейдите на страницу Создание встречи.

Шаг 2: Справа на странице заполните поле для ввода ‘Username’ идентификатором организации, а поле ‘Password’ – вашим ключом API, указанным на странице ‘API Keys’.

Шаг 3: В разделе ‘Body’ дайте встрече название “AR Filters”. Затем нажмите кнопку ‘Send API Request’.

Шаг 4: Перейдите на страницу ‘Meetings’ в Портале разработчика Dyte, и вы должны увидеть, что создана встреча с названием AR Filters.

Добавление участника на встречу

Шаг 1: Перейдите на страницу Добавление участника и заполните поля ‘Organization ID’ и ‘API Key’ (вы можете получить их из Портала разработчика Dyte), как показано на предыдущем шаге.

Шаг 2: В разделе ‘Parameters’ добавьте идентификатор встречи AR Filters, которую мы создали ранее.

Шаг 3: В разделе ‘Body’ заполните параметры, как показано ниже. Затем нажмите кнопку ‘Send API Request’.

Шаг 4: Получите токен. Этот токен уникален для каждого участника встречи, и вы идеально бы хотели получить его для каждого участника, вызывая API Dyte на вашем собственном бэкенде.

Создание вашей встречи с Dyte

Шаг 1: Создайте папку с названием “ARFilters” на вашем компьютере. Затем откройте папку в текстовом редакторе и добавьте в нее файл index.html.

Шаг 2: Установите SDK Dyte.

Шаг 3: В вашем файле index.html создайте основной пользовательский интерфейс для встречи с двумя настраиваемыми кнопками для управления фильтрами AR.

Мы используем настраиваемые компоненты, предлагаемые Dyte, чтобы создать интерфейс встречи по умолчанию.

• Заголовок Dyte: Этот компонент загружает все основные детали встречи, такие как название, количество участников, часы и многое другое.
• Сетка Dyte: Этот компонент отображает все видеопотоки от всех участников встречи.
• Боковая панель Dyte: Этот компонент отображает чат, опросы, список участников и многое другое.
• Панель управления Dyte: Здесь мы добавляем элементы управления для нашей встречи. Пользователь может включать и выключать камеру и микрофон, настраивать параметры или управлять фильтрами AR с этой панели управления.

Мы также вставляем скрипт, который ссылается на main.js, внешний файл, который будет содержать всю нашу бизнес-логику.

Шаг 4: Напишите бизнес-логику

Мы инициализируем основную встречу с помощью authToken и передаем объект встречи всем нашим компонентам.

Шаг 5: Добавляем CSS в нашу встречу.

Создайте файл style.css; в этом файле будут содержаться все наши стили для встречи.

Шаг 6: Откройте HTML-файл в браузере, и вам будет предложено разрешить доступ к микрофону и камере, и вы должны будете видеть интерфейс встречи.

Настройка учетной записи DeepAR

Шаг 1: Перейдите на главную страницу разработчика DeepAR и нажмите кнопку “Начать”.

Шаг 2: Зарегистрируйтесь для бесплатной учетной записи DeepAR, используя свою учетную запись Google или GitHub на следующей странице.

Создание проекта DeepAR

Шаг 1: После регистрации и входа в свою учетную запись DeepAR вы будете перенаправлены на страницу проектов.

Шаг 2: Нажмите кнопку “Создать проект”. Назовите проект “AR Filters”, примите условия и нажмите кнопку “Продолжить”.

Шаг 3: После создания проекта вам будет предложено добавить приложение. В этом случае перейдите в раздел веб-приложений и выберите опцию Добавить приложение. Вам будет предложено добавить имя домена. Добавьте свое имя домена и нажмите кнопку “Продолжить”.

Шаг 4: После создания веб-приложения вы получите ключ DeepAR App Key. Ключ инициализирует DeepAR фильтр в качестве лицензионного ключа.

Добавление AR-фильтров в ваше видеовызывающее приложение

Теперь, когда вы получили свой лицензионный ключ и у вас работает базовая встреча Dyte, настало время добавить веселые AR-фильтры в вашу встречу.

Шаг 1: Установите DeepAR

Вы можете импортировать DeepAR в свой проект с помощью CDN.

Шаг 2: Инициализируйте модуль DeepAR

Добавьте некоторые фильтры в наши репозитории проекта и укажите путь к этим фильтрам.

Затем мы создаем элемент canvas и инициализируем модуль DeepAR.

Шаг 3: Добавьте AR-фильтры в ваше видеовызывающее приложение Dyte

Здесь мы создаем две функции, одну для включения/выключения AR-фильтра, а другую для переключения между фильтрами.

Мы добавляем middleware в Dyte с помощью его API AddVideoMiddleware, который принимает функцию middleware.

Для переключения между фильтрами мы используем метод switchEffect DeepAR.

Теперь давайте создадим нашу функцию middleware для видео, используя DeepAR.

После выполнения этих действий мы создали приложение для видеозвонков с AR-фильтрами, используя SDK видеоотображения Dyte и DeepAR! Наденьте свои AR-фильтры, чтобы выглядеть примерно так.

Вы можете опробовать живую демонстрацию образца приложения здесь, а весь исходный код проекта доступен здесь.

Заключение

В заключение, мы рассказали вам, как создать приложение для видеозвонков с AR-фильтрами, используя видеоотображение Dyte и SDK DeepAR. С помощью настраиваемого пользовательского интерфейса Dyte вы можете легко управлять элементами управления, добавлять или удалять кнопки, создавать настраиваемые элементы управления и многое другое всего за несколько строк кода.

Если вас заинтересовала эта статья, то ознакомьтесь с SDK для прямой трансляции Dyte. Мы предоставляем простые в использовании SDK для интерактивных прямых трансляций в масштабе со значительно более низкой задержкой, чем у традиционной HLS. Почувствуйте себя как дома благодаря такому же дружелюбному опыту разработчика и расширяемости. SDK для прямой трансляции Dyte скоро будет запущен на Product Hunt!

Получите лучшие инсайты по использованию технологии Dyte и узнайте, как она может изменить возможности коммуникации вашего приложения с помощью своих SDK. Вы можете задать вопросы нашему разработчическому сообществу, если у вас возникнут вопросы.