Aggiunta di filtri AR alle videochiamate utilizzando DeepAR e Dyte

Arricchire le videochiamate con filtri AR grazie a DeepAR e Dyte

A meno che tu non viva sotto una roccia, avrai utilizzato piattaforme di social media come TikTok, Instagram, Facebook o Snapchat. Quando pubblichi una foto o un video su queste piattaforme, di solito hai l’opzione di migliorare la foto o il video utilizzando vari filtri.

Puoi trasformarti in un’immagine o un video con un colore di capelli diverso o indossare un cappello anche se non hai scattato la foto o registrato un video indossandone uno.

Le piattaforme di social media utilizzano filtri di Realtà Aumentata (AR) per rendere possibili tutti questi miglioramenti alle foto o ai video. I filtri AR sono effetti digitali che possono essere applicati a immagini o video in tempo reale, utilizzando la tecnologia di visione artificiale per seguire i movimenti e le caratteristiche facciali di una persona in un’immagine o un video.

I filtri AR vengono principalmente utilizzati per intrattenimento, branding e marketing perché offrono un modo divertente e coinvolgente per migliorare il contenuto visivo. Questi filtri possono anche creare esperienze immersive, come le prove virtuali di abbigliamento, e mostrare i prodotti in modo unico e interattivo.

In questo articolo imparerai come creare un’app per videochiamate con filtri AR utilizzando Dyte video SDK, DeepAR e il kit di componenti web. Dyte è una piattaforma sviluppata appositamente per offrire SDK robusti per creare esperienze live all’interno di un’applicazione.

Prerequisiti

Per seguire questo articolo avrai bisogno dei seguenti software installati sul tuo computer:

  • Un editor di testo: Utilizzerò Visual Studio Code come editor di testo per questo articolo. Per installare VS Code, vai alla pagina di download di VS Code e scaricalo per il tuo sistema operativo.

Crea e Configura un Account Dyte

Passo 1: Vai su dyte.io e clicca sul pulsante “Inizia a creare”.

Passo 2: Registrati per un account Dyte gratuito nella pagina successiva utilizzando il tuo account Google o GitHub.

Passo 3: Dopo aver creato un account Dyte, sarai reindirizzato alla pagina ‘API Keys’, con un ID dell’organizzazione e una chiave API forniti. Mantieni la tua chiave API sicura e non condividerla con nessuno.

Crea Preset

Dyte include una serie di preset preconfigurati. Puoi semplicemente utilizzare il preset predefinito se non desideri crearne uno.

Crea una Riunione Dyte

Passo 1: Vai alla pagina Crea una Riunione.

Passo 2: Sul lato destro della pagina, compila il campo di input Nome utente con l’ID dell’organizzazione e il campo di input Password con la chiave API fornita nella pagina API Keys.

Passo 3: Nella sezione Corpo, assegna alla riunione il titolo “Filtri AR”. Quindi clicca sul pulsante Invia Richiesta API.

Passo 4: Vai alla pagina Riunioni nel Portale Sviluppatori Dyte, e dovresti vedere che è stata creata una riunione intitolata Filtri AR.

Aggiungi un Partecipante alla Riunione

Passo 1: Vai alla pagina Aggiungi un Partecipante e compila i campi di input ID dell’organizzazione e Chiave API (che puoi ottenere dal Portale Sviluppatori Dyte), come mostrato nel passaggio precedente.

Passo 2: Nella sezione Parametri, aggiungi l’ID della Riunione creata precedentemente per i Filtri AR.

Passo 3: Nella sezione Corpo, compila le opzioni come indicato di seguito. Quindi clicca sul pulsante “Invia Richiesta API”.

Passaggio 4: Ottenere il token. Questo token è unico per ogni partecipante alla riunione, e idealmente vorresti ottenerlo per ogni partecipante chiamando le API di Dyte nel tuo backend personale.

Creazione della tua riunione Dyte

Passaggio 1: Crea una cartella chiamata ‘ARFilters’ sul tuo computer. Quindi, apri la cartella in un editor di testo e aggiungi un file index.html.

Passaggio 2: Installa il SDK di Dyte.

Passaggio 3: Nel tuo file index.html costruisci un’interfaccia utente di base per la riunione con due pulsanti personalizzati per controllare i filtri AR.

Utilizziamo componenti personalizzati offerti da Dyte per creare un’interfaccia utente predefinita per la riunione.

  • Dyte Header: Questo componente carica tutti i dettagli di base della riunione come il titolo, il numero di partecipanti, l’orologio e molto altro.
  • Dyte Grid: Questo componente visualizza tutti i flussi video di tutti i partecipanti alla riunione.
  • Dyte Sidebar: Questo componente visualizza la chat, i sondaggi, l’elenco dei partecipanti e altro ancora.
  • Dyte Controlbar: Qui aggiungiamo i controlli per la nostra riunione. Un utente può attivare/disattivare la telecamera e il microfono, regolare le impostazioni o gestire i filtri AR da questa barra di controllo.

Inseriamo anche uno script che collega a main.js, un file esterno che conterrà tutta la nostra logica di business.

Passaggio 4: Scrivi la logica di business

Inizializziamo una riunione di base di Dyte utilizzando il nostro authToken e passiamo l’oggetto della riunione a tutti i nostri componenti.

Passaggio 5: Aggiungi CSS alla nostra riunione.

Crea un file style.css; questo file conterrà tutti i nostri stili per la riunione.

Passaggio 6: Apri il file HTML su un browser e ti verrà chiesto di consentire l’accesso al tuo microfono e alla tua telecamera, e dovresti essere in grado di vedere l’interfaccia della riunione.

Configurazione di un account DeepAR

Passaggio 1: Vai alla pagina principale degli sviluppatori di DeepAR e clicca sul pulsante “Inizia”.

Passaggio 2: Iscriviti a un account DeepAR gratuito utilizzando il tuo account Google o GitHub sulla pagina successiva.

Crea un progetto DeepAR

Passaggio 1: Dopo esserti registrato e aver effettuato l’accesso al tuo account DeepAR, verrai reindirizzato alla pagina dei progetti.

Passaggio 2: Clicca sul pulsante “Crea un progetto”. Nomina il progetto Filtri AR, accetta i termini e le condizioni, quindi clicca sul pulsante “Continua”.

Passaggio 3: Dopo aver creato il progetto, verrai reindirizzato per aggiungere un’app. In questo caso, vai alla sezione Web App e seleziona l’opzione Aggiungi App. Ti verrà chiesto di aggiungere un nome di dominio. Aggiungi il tuo nome di dominio e clicca sul pulsante “Continua”.

Passaggio 4: Dopo aver creato l’app web, riceverai la DeepAR App Key. La chiave inizializzerà il filtro DeepAR come chiave di licenza.

Aggiunta di filtri AR alla tua app di videochiamata

Ora che hai ottenuto la tua chiave di licenza e hai una riunione di base di Dyte in funzione. È il momento di aggiungere divertenti filtri AR alla tua riunione.

Passaggio 1: Installa DeepAR

Puoi importare DeepAR nel tuo progetto utilizzando CDN.

Passaggio 2: Inizializza il modulo DeepAR

Aggiungi alcuni filtri ai repository del tuo progetto e fornisce un percorso per quei filtri.

In seguito, creiamo un elemento canvas e inizializziamo il modulo DeepAR.

Passaggio 3: Aggiungi filtri AR alla tua chiamata video di Dyte

Qui, stiamo creando due funzioni, una per attivare/disattivare il filtro AR e l’altra per passare tra i filtri.

Aggiungiamo middleware a Dyte utilizzando la sua API AddVideoMiddleware, che richiede una funzione middleware.

Per passare da un filtro all’altro, utilizziamo il metodo switchEffect di DeepAR.

Ora, creiamo la nostra funzione middleware video utilizzando DeepAR.

Fatto questo, abbiamo creato un’app per videochiamate con filtri AR utilizzando il SDK video di Dyte e DeepAR! Usa i tuoi filtri AR per ottenere un aspetto simile.

Puoi provare la demo live dell’applicazione di esempio qui, mentre il codice sorgente completo del progetto è disponibile qui.

Conclusioni

In conclusione, ti abbiamo mostrato come creare un’app per videochiamate con filtri AR utilizzando gli SDK video di Dyte e DeepAR. Con il kit UI personalizzabile di Dyte, puoi gestire facilmente i controlli, aggiungere o rimuovere pulsanti, creare controlli personalizzati e fare molto altro con poche righe di codice.

Se questo articolo ha stimolato il costruttore che è in te, allora dai un’occhiata al SDK di live-streaming di Dyte. Forniamo SDK facili da usare per fornire streaming live interattivi su larga scala con latenza molto inferiore rispetto all’HLS tradizionale. Sentiti a casa con la stessa esperienza di sviluppo amichevole ed estendibilità. Lo SDK di streaming live di Dyte sarà lanciato a breve su Product Hunt!

Ottieni una migliore comprensione di come sfruttare la tecnologia di Dyte e scopri come può rivoluzionare le capacità di comunicazione della tua app con i suoi SDK. Puoi chiedere alla nostra comunità di sviluppatori se hai domande.