ディープARとダイトを使用してビデオ通話にARフィルターを追加する

DeepARとダイトを活用してビデオ通話にARフィルターを追加する方法' (Using DeepAR and Daito to Add AR Filters to Video Calls)

岩の下に住んでいない限り、おそらくTikTok、Instagram、Facebook、またはSnapchatなどのソーシャルメディアプラットフォームを使用したことがあるでしょう。これらのプラットフォーム上で写真やビデオを投稿する際、通常、さまざまなフィルターを使用して写真やビデオを強化するオプションがあります。

異なる髪の色で自分自身をイメージやビデオに変身させたり、写っていないのに帽子をかぶった写真やビデオを撮ったりすることができます。

ソーシャルメディアプラットフォームでは、拡張現実（AR）フィルターを使用してこれらの写真やビデオの強化を行っています。ARフィルターは、画像やビデオにリアルタイムで適用できるデジタルエフェクトであり、コンピュータビジョン技術を使用して画像やビデオ内の人物の動きや顔の特徴を追跡します。

ARフィルターは、主にエンターテイメント、ブランド、マーケティングに使用されており、視覚的なコンテンツの強化に楽しく魅力的な方法を提供します。これらのフィルターは、衣料品の仮想試着や製品のユニークでインタラクティブな展示など、没入型の体験も創造することができます。

• 「Pythonのitertoolsで無限イテレータを探索する」
• トップ10の生成AI 3Dオブジェクトジェネレーター
• 「2023年に試してみることができるChatGPTのトップ22の代替品（無料および有料）」

この記事では、DyteビデオSDK、DeepAR、およびWebコンポーネントUIキットを使用して、ARフィルターを備えたビデオ通話アプリを作成する方法について学びます。Dyteは、アプリケーション内でライブエクスペリエンスを構築するための堅牢なSDKを提供する開発者向けのプラットフォームです。

前提条件

この記事に従うには、コンピュータに次のソフトウェアがインストールされている必要があります：

• テキストエディタ： この記事では、テキストエディタとしてVisual Studio Codeを使用します。VS Codeをインストールするには、VS Codeのダウンロードページに移動して、お使いのオペレーティングシステムに合わせてダウンロードしてください。

Dyteアカウントの作成と設定

ステップ1： dyte.ioにアクセスし、「ビルドを開始する」ボタンをクリックします。

ステップ2： 次のページで、GoogleアカウントまたはGitHubアカウントを使用して無料のDyteアカウントにサインアップします。

ステップ3： Dyteアカウントを作成した後、組織IDとAPIキーが記載された「APIキー」ページにリダイレクトされます。APIキーを安全な場所に保管し、他の人と共有しないでください。

プリセットの作成

Dyteには、事前に設定されたプリセットがたくさん含まれています。作成しない場合は、デフォルトのプリセットを使用できます。

Dyteミーティングの作成

ステップ1： ミーティングページを作成にアクセスします。

ステップ2： ページの右側にある、ユーザー名入力欄に組織IDを、パスワード入力欄にAPIキーを入力します（APIキーは「APIキー」ページで提供されるものです）。

ステップ3： 「Body」セクションで、「AR Filters」というタイトルのミーティングを付け、次に「Send API Request」ボタンをクリックします。

ステップ4： Dyte Developer Portalの「Meetings」ページに移動すると、「AR Filters」というタイトルのミーティングが作成されているはずです。

ミーティングに参加者を追加する

ステップ1： 参加者を追加するページにアクセスし、組織IDとAPIキー（これらはDyte Developer Portalで取得できます）の入力欄に入力します。前の手順で作成した「AR Filters」というミーティングのMeeting IDを「Parameters」セクションに追加します。

ステップ2： 「Body」セクションで、以下のオプションを入力し、次に「Send API Request」ボタンをクリックします。

ステップ4：tokenを取得します。このトークンは会議の各参加者に固有のものであり、理想的には、自分自身のバックエンドでDyteのAPIを呼び出して各参加者のトークンを取得することが望ましいです。

Dyteミーティングの作成

ステップ1： コンピューターに「ARFilters」という名前のフォルダーを作成します。次に、テキストエディタでフォルダを開き、それにindex.htmlファイルを追加します。

ステップ2： Dyte SDKをインストールします。

ステップ3： index.htmlで、ARフィルタを制御するための2つのカスタムボタンを持つ基本的なミーティングUIを作成します。

Dyteが提供するカスタムコンポーネントを使用して、デフォルトのミーティングUIを作成します。

• Dyteヘッダー：このコンポーネントは、タイトル、参加者数、時計などの基本的なミーティングの詳細をすべてロードします。
• Dyteグリッド：このコンポーネントは、ミーティングのすべての参加者のビデオストリームを表示します。
• Dyteサイドバー：このコンポーネントは、チャット、投票、参加者リストなどを表示します。
• Dyteコントロールバー：ここにはミーティングのコントロールが追加されます。ユーザーはこのコントロールバーからカメラやマイクの切り替え、設定の調整、またはARフィルタの管理を行うことができます。

私たちはまた、main.jsにリンクするスクリプトを挿入します。これは、すべてのビジネスロジックを含む外部ファイルです。

ステップ4： ビジネスロジックを書く

authTokenを使用して基本的なDyteミーティングを初期化し、ミーティングオブジェクトをすべてのコンポーネントに渡します。

ステップ5： ミーティングにCSSを追加する

style.cssを作成します。このファイルにはミーティングのスタイルがすべて保持されます。

ステップ6：HTMLファイルをブラウザで開き、マイクとカメラへのアクセスを許可するように求められ、ミーティングインターフェースが表示されるはずです。

DeepARアカウントの設定

ステップ1：DeepAR開発者ホームページに移動し、「はじめに」ボタンをクリックします。

ステップ2：次のページで、GoogleアカウントまたはGitHubアカウントを使用して無料のDeepARアカウントにサインアップします。

DeepARプロジェクトの作成

ステップ1：DeepARアカウントにサインアップしてログインすると、プロジェクトページにリダイレクトされます。

ステップ2：「プロジェクトの作成」ボタンをクリックします。プロジェクトに「AR Filters」という名前をつけ、利用規約に同意したら、続行ボタンをクリックします。

ステップ3：プロジェクトを作成した後、アプリを追加するようにリダイレクトされます。この場合、Webアプリのセクションに移動し、Add Appオプションを選択します。ドメイン名を追加するように求められます。ドメイン名を追加し、続行ボタンをクリックします。

ステップ4： Webアプリを作成した後、DeepARアプリキーを受け取ります。このキーは、DeepARフィルタをライセンスキーとして初期化します。

ビデオ通話アプリにARフィルタを追加する

ライセンスキーを取得し、基本的なDyteミーティングを立ち上げたので、楽しいARフィルタをミーティングに追加する時間です。

ステップ1： DeepARをインストールします

CDNを使用してDeepARをプロジェクトにインポートすることができます。

ステップ2： DeepARモジュールを初期化します

プロジェクトリポジトリにいくつかのフィルタを追加し、それらのフィルタへのパスを提供します。

次に、キャンバス要素を作成し、DeepARモジュールを初期化します。

ステップ3： Dyteビデオ通話にARフィルタを追加する

ここでは、ARフィルタのオン/オフを切り替えるための関数と、フィルタ間を切り替えるための関数を作成しています。

Dyteを利用する場合、 AddVideoMiddleware APIを使用してミドルウェアを追加します。このAPIは、ミドルウェア関数を受け取ります。

フィルターを切り替えるには、DeepARのswitchEffectメソッドを使用します。

さて、DeepARを使用してビデオのミドルウェア関数を作成しましょう。

これで、DyteビデオSDKとDeepARを使用してARフィルターを備えたビデオ通話アプリを作成しました！以下のような外観を実現するために、ARフィルターを追加しましょう。

サンプルアプリケーションのライブデモはこちらで試すことができ、プロジェクトのソースコード全体はこちらで入手できます。

まとめ

まとめると、DyteビデオSDKとDeepAR SDKを使用してARフィルターを備えたビデオ通話アプリを作成する方法をご紹介しました。Dyteのカスタマイズ可能なUIキットを使用すると、コントロールの管理、ボタンの追加や削除、カスタムコントロールの作成などが、わずかなコードで簡単に行えます。

もし本記事が開発者としての興味を引いたなら、DyteのライブストリーミングSDKを試してみてください。私たちは使いやすいSDKを提供し、従来のHLSよりも低いレイテンシーでインタラクティブなライブストリームを提供します。同じフレンドリーな開発者エクスペリエンスと拡張性により、どこでも快適にご利用いただけます。DyteのライブストリーミングSDKはProduct Huntで近日中にローンチされます！

Dyteのテクノロジーを活用してアプリの通信機能を革新する方法や、SDKの活用に関する知見を得るには、SDKを参照してください。質問がある場合は、開発者コミュニティにお問い合わせいただけます。

We will continue to update VoAGI; if you have any questions or suggestions, please contact us!