顔フィルターと拡張現実（AR）は、SnapchatやInstagramのようなアプリのおかげで、ますます人気が高まっています。これらの魅力的な機能により、ユーザーは外見を向上させ、楽しいフィルターで遊び、リアルタイムで創造性を表現することができます。しかし、同じエキサイティングな機能を自分のWebアプリケーションに取り入れることができるのをご存知でしたか？Tencent RTCとその強力なBeauty AR Web SDKを使用すれば、わずか5分でSnapchatのような顔フィルターWebアプリを作成できます！
このチュートリアルでは、リアルタイムの美顔機能をサポートするWebアプリケーションのセットアップと実行について説明します。AR美顔、フィルター、メイク、ステッカーなどの魅力的な機能を実装する方法を学び、ユーザー体験を向上させることができます。
ステップ1. ライセンスの作成
1. 試用ライセンスの申請
試用ライセンスの申請の指示に従って、Webライセンスを作成したことを確認してください。
2. ライセンスキーとトークンの取得
作成後、プロジェクトリストで作成したテストプロジェクトの情報を確認し、Beauty AR Web用の**License Tokenとテストプロジェクト用のLicense keyを取得できます。また、App ID**も取得できます。
注意：
ライセンストークンは認証署名の計算に使用されるため、安全かつ機密に保管してください。ここでは、デモをローカルで実行するのを助けるために、フロントエンドで署名を計算するためにトークンを使用しています。実際の本番環境では、サーバー上で署名アルゴリズムを実装する必要があります。
ステップ2. ローカルで実行
- サンプルプロジェクトコードをプルします。
git clone https://github.com/tencentcloud-webar/web-demo-en.git
cd quick-start
-
index.jsの指定された設定項目を、ステップ1で取得したライセンスキー、トークン、APPIDに以下のように置き換えます：
- ローカル開発環境でプロジェクトを実行します。
注意：
プロジェクトをローカルで実行する前に、デバイスにnodejs環境がすでにインストールされていることを確認してください。
プロジェクトディレクトリで以下のコマンドを順番に実行し、ブラウザでlocalhost:8090にアクセスしてBeauty AR Webの機能を試してください。
# 依存関係のインストール
npm i
# コードのコンパイルと実行
npm run dev
上記の手順に従うと、デスクトップブラウザ用のSDKのフィルターと効果を試すことができます。概要の指示に従って、組み込みの素材を使用してさまざまなメイクフィルターや効果を試したり、カスタムステッカー、メイク、フィルターなどのBeauty AR Webのより多くの機能を使用したりできます。効果素材のカスタマイズ方法の詳細な指示については、お問い合わせください。
結論
おめでとうございます！Tencent RTCのBeauty AR Web SDKを使用して、わずか5分でSnapchatのような顔フィルターWebアプリケーションを構築することに成功しました。このブログ投稿のステップバイステップの指示に従うことで、リアルタイムのAR美顔、フィルター、メイク、ステッカーなどの魅力的な機能を実装する方法を学び、ユーザーを魅了することができます。