開発者向けリソース
Web 向け Beauty AR SDKのドキュメントとサンプル
WEB BEAUTY AR の機能
アプリに必要なカメラ体験を構築
カメラ入力
- 内蔵カメラキャプチャ
- カスタムストリームと画像
リアルタイムの外観調整
- 調整できる肌のレタッチ
- フィルターとメイクエフェクト
背景の調整
- 背景ぼかし
- 画像・動画の背景
Web 向け Beauty AR SDK を見る
API をカメラ、操作 UI、エフェクト素材に接続します。
ブラウザプレビューから始める
Web 向け Beauty AR SDK でカメラ入力を取得し、処理済みストリームをプレビューします。
ドキュメントを読むsdk.on('ready', async () => {
const player = await sdk.initLocalPlayer('preview');
await player.play();
});ルックをリアルタイムで調整
スライダーを Web 向け Beauty AR SDK に接続し、初期化後にエフェクトを調整できます。
ドキュメントを読むsdk.on('ready', () => {
sdk.setBeautify({
dermabrasion: 0.3,
whiten: 0.1,
});
});人物の背後の風景を変更
Web 向け Beauty AR SDK でセグメンテーションを有効にして、背景ぼかしと画像背景を切り替えます。
ドキュメントを読む// Enable module.segmentation during initialization.
sdk.on('ready', () => {
sdk.setBackground({
type: 'image',
src: '/backgrounds/library.jpg',
});
});始める
Web 向け Beauty AR SDK を導入する
- 01
- 02
- 03
npm install tencentcloud-webarimport { ArSdk } from 'tencentcloud-webar';
// Start after the user chooses to enable the camera.
const sdk = new ArSdk({
auth: { appId, licenseKey, authFunc },
module: { beautify: true, segmentation: true },
camera: { width: 1280, height: 720 },
});
sdk.on('ready', async () => {
const player = await sdk.initLocalPlayer('preview');
await player.play();
});Web 向け Beauty AR SDK のよくある質問
Web 向け Beauty AR SDK には完成済みのビデオ通話アプリが含まれますか?
含まれません。カメラメディアの処理とプレビュー API を提供します。アプリの画面を作り、出力の配信には別の RTC またはストリーミング SDK を使ってください。
Web 向け Beauty AR SDK を認証するには?
Web ライセンスを正しいドメインに紐づけます。App ID、license key、サーバー側で署名するコールバックを設定し、license token はサーバーに保管してください。
Web 向け Beauty AR SDK で既存のカメラストリームを使えますか?
はい。既存ストリームにはカスタム入力モードを選ぶか、内蔵カメラキャプチャを使えます。カメラ権限とリソース解放はアプリ側で処理してください。
どのブラウザでテストすべきですか?
最新の互換性ガイドを確認し、対象デバイスでテストしてください。対応ブラウザではローカルで透明背景を使えますが、WebRTC 配信ではアルファチャンネルは保持されません。
Web 向け Beauty AR SDK のライセンス体系は?
アプリに必要なエフェクトを含む Web ライセンスを選択してください。本番利用の前に、最新のトライアル条件とパッケージの対象範囲を確認します。
ブラウザアプリに Web 向け Beauty AR SDK を統合するには?
ブラウザ設定と対応環境の要件に従ってください。対象とする実際のブラウザで、必要な権限、ナビゲーション、リソース解放をテストします。
アプリ公開前に Web 向け Beauty AR SDK をテストするには?
ライセンス対象の入力とエフェクト処理をテストします。カメラ使用時の権限とプレビュー終了後の解放も確認してください。
Web 向け Beauty AR SDK の画面をカスタマイズするには?
対応するエフェクトを独自のプレビューと選択 UI に接続します。素材、機能対応、ライセンス範囲は対象プラットフォームに一致させてください。

