カスタムストリーム

npm install tencentcloud-webar

import { ArSdk } from 'tencentcloud-webar';

<script charset="utf-8" src="https://webar-static.tencent-cloud.com/ar-sdk/resources/latest/webar-sdk.umd.js"></script>
<script>
// window.ARからArSdkクラスを取得
    const { ArSdk } = window.AR;
    ......
</script>

// 認証パラメータを取得
const authData = {
 licenseKey: 'xxxxxxxxx',
 appId: 'xxx',
 authFunc: authFunc // 詳細は「Licenseの設定と使用 - 署名方法」を参照
};
// SDKのストリームを入力
const stream = await navigator.mediaDevices.getUserMedia({
 audio: true,
 video: { width: w, height: h }
})

const config = {
 module: { // 0.2.0バージョンを追加
     beautify: true, // 美顔モジュールのオン・オフ。オンにすると美顔、化粧、ステッカーなどの機能が使用可能
     segmentation: true, // シルエット切り抜きモジュールのオン・オフ。オンにすると背景機能が使用可能
     segmentationLevel: 0 // 選択可能な値：0 | 1 | 2 、値が高いほど切り抜き効果が良くなり、リソース使用量が多くなり、ハイスペックのデバイスハードウェアが求められます
 },
 auth: authData, // 認証パラメータ
 input: stream, // inputストリームを入力
 beautify: { // 美顔パラメータを初期化（任意）
     whiten: 0.1,
     dermabrasion: 0.3,
     eye: 0.2,
     chin: 0,
     lift: 0.1,
     shave: 0.2,
// より多くの美顔パラメータ設定については「APIドキュメント」を参照してください
 },
// より多くのパラメータ設定については「APIドキュメント」を参照してください
}
const sdk = new ArSdk(
// sdk初期化用のconfigオブジェクトを渡します
 config
)

const config = {
 auth: authData, // 認証パラメータ
 input: 'https://xxx.png', // inputストリームを入力し、imageおよびvideoタグもサポート
}
const sdk = new ArSdk(
// sdk初期化用のconfigオブジェクトを渡します
 config
)

// createdコールバックでエフェクトとフィルターのリストを取得してページで表示できます。詳細は「SDKアクセス - パラメータとメソッド」を参照してください
sdk.on('created', () => {
// 内蔵化粧を取得
 sdk.getEffectList({
     Type: 'Preset',
    Label: '化粧',
 }).then(res => {
     effectList = res
 });
// 内蔵フィルターを取得
 sdk.getCommonFilter().then(res => {
     filterList = res
 })
})

// readyコールバックでsetBeautify/setEffect/setFilterなどのレンダリングメソッドを呼び出します
// 詳細は「SDKアクセス - 美顔とエフェクトの設定」を参照してください
sdk.on('ready', () => {
// 美顔を設定
 sdk.setBeautify({
     whiten: 0.2
 });
// エフェクトを設定
 sdk.setEffect({
     id: effectList[0].EffectId,
     intensity: 0.7
 });
// フィルターを設定
 sdk.setFilter(filterList[0].EffectId, 0.5)
})

sdk.on('cameraReady', async () => {
// cameraReadyコールバックでより早く出力画面を取得できますが、この時点では初期化時に設定した美顔パラメータはまだ適用されておらず、入力画面と同じです
// できるだけ早く画面を表示したい、かつ画面が表示されたときに美顔を適用しないシナリオに適します
// 美顔が有効になってもstreamを更新する必要はなく、SDK内部で既に処理済みです
  const output = await ar.getOutput();
// videoを使用して出力メディアストリームを再生し、効果をプレビューします
  const video = document.createElement('video')
  video.setAttribute('playsinline', '');
  video.setAttribute('autoplay', '');
  video.srcObject = output
  document.body.appendChild(video)
  video.play()
})

sdk.on('ready', async () => {
// readyコールバックで出力画面を取得すると、この時点で初期化時に設定した美顔パラメータが既に有効になっており、取得したoutput streamには既に美顔効果が適用されています
// 上記のcameraReadyでのoutput streamの取得と異なり、このコールバックの実行タイミングはやや遅いため、画面が表示されるとすぐに美顔を適用したい、かつ画面をすぐに表示しないシナリオに適します
  const output = await ar.getOutput();
// videoを使用して出力メディアストリームを再生し、効果をプレビューします
  const video = document.createElement('video')
  video.setAttribute('playsinline', '');
  video.setAttribute('autoplay', '');
  video.srcObject = output
  document.body.appendChild(video)
  video.play()
})