tencent cloud

Tencent Effect SDK

製品紹介
製品概要
製品機能
基本概念
製品のメリット
ユースケース
購入ガイド
価格一覧
購入プロセス
支払い遅滞・払い戻しの説明
Demo 体験
無料テスト
License案内
モバイル版Licenseの追加と更新
PC版Licenseの追加と更新
Web版Licenseの追加と更新
よくある質問
SDK ダウンロード
機能説明
SDK ダウンロード
バージョン履歴
SDK統合ガイド
Tencent Effect SDKの独立した統合
アトミック機能統合ガイド
APIドキュメント
iOS
Android
Flutter
機能の実践
SDKパッケージの簡素化
美顔シーン推奨パラメータ
ショート動画(エンタープライズ版)の移行ガイド
サードパーティプッシュによる美顔の接続(Flutter)
コンテンツ作成ツールの活用
Web美顔エフェクト
製品概要
クイックスタート
SDKへのアクセス
APIドキュメント
体験版
よくあるご質問
よくある質問
一般関連
技術系関連
License関連
TE SDK ポリシー
プライバシーポリシー
データ処理とセキュリティ契約

ミニプログラムへのアクセス

PDF
フォーカスモード
フォントサイズ
最終更新日: 2023-04-27 16:11:51
ミニプログラムにアクセスする場合は、ご自身のミニプログラムアカウントが必要です。詳しくは、WeChat Mini Programドキュメントをご参照ください。

ミニプログラムプロジェクトへのアクセス

ステップ1:ドメイン名ホワイトリストを設定します

SDK内部はバックエンドに認証とリソースロードをリクエストします。ミニプログラムのバックエンドでドメイン名ホワイトリストの設定が必要です。
1. ミニプログラムバックエンドに移動し、開発 > 開発管理 > 開発設定 > サーバードメイン名に進みます。
2. 変更をクリックし、以下のドメイン名を設定の上、保存します。
リクエストドメイン名:
https://webar.qcloud.com;
https://webar-static.tencent-cloud.com;
https://aegis.qq.com;
および上述の署名インターフェース(get-ar-sign)のアドレス
downloadFileドメイン名:
https://webar-static.tencent-cloud.com

ステップ2:npmのインストールと構築

1. インストール:
npm install tencentcloud-webar
2. 開発者ツールメニュー > ツール > npm構築をクリック。
3. app.jsonでworkersパスを設定:
"workers": "miniprogram_npm/tencentcloud-webar/worker"

ステップ3:ファイルの導入

// 0.3.0より前のバージョンについての参照方式(ファイル1件)
// import "../../miniprogram_npm/tencentcloud-webar/lib.js";
// 0.3.0およびそれより後のバージョンについての参照方法(ファイル2件+必要に応じて3dモジュールを初期化)
import '../../miniprogram_npm/tencentcloud-webar/lib.js';
import '../../miniprogram_npm/tencentcloud-webar/core.js';
// 必要に応じて3dプラグインを初期化します。3dが必要ない場合は、参照なしにすることができます。
import '../../miniprogram_npm/tencentcloud-webar/lib-3d.js';
import { plugin3d } from '../../miniprogram_npm/tencentcloud-webar/plugin-3d'
// ArSdkインポート
import { ArSdk } from "../../miniprogram_npm/tencentcloud-webar/index.js";
注意
ミニプログラムの単一ファイルには500kb以内という制限があります。そのためSDKは複数のjsファイルに分けて提供します。
0.3.0より後のバージョンでは、SDKに対してさらに進んだ分割を行い、新しく3Dサポートを追加しました。3Dモジュールについて必要に応じたロード方式を提供します。導入前には現在使用中のSDKのバージョン情報をご確認の上、対応する導入方式をご選択ください。

ステップ4:インスタンスの初期化

// wxml
//カメラを開きます
<camera
device-position="{{'front'}}"
frame-size="large" flash="off" resolution="medium"
style="width: 750rpx; height: 134rpx;position:absolute;top:-9999px;"
/>
//sdkが処理済みの画面をリアルタイムでこのcanvas上に出力します
<canvas
type="webgl"
canvas-id="main-canvas"
id="main-canvas"
style="width: 750rpx; height: 1334rpx;">
</canvas>
//撮影はImageDataオブジェクトをこのcanvas上に描画します
<canvas
type="2d"
canvas-id="photo-canvas"
id="photo-canvas"
style="position:absolute;width:720px;height:1280px;top:-9999px;left:-9999px;">
</canvas>
// js
Component({
methods: {
async getCanvasNode(id) {
return new Promise((resolve) => {
this.createSelectorQuery()
.select(`#${id}`)
.node()
.exec((res) => {
const canvasNode = res[0].node;
resolve(canvasNode);
});
});
},

//カメラ初期化のタイプ
async initSdkCamera() {
// 画面上のcanvasを取得すると、sdkが処理済み画面をリアルタイムでcanvas上に出力します
const outputCanvas = await this.getCanvasNode("main-canvas");
const sdk = new ArSdk({
camera: {
width:720,
height:1280,
},
output: outputCanvas,
loading: {
enable: false,
},
auth: {
licenseKey: LICENSE_KEY,
appId: APP_ID,
authFunc: authFunc
},
plugin3d: plugin3d // 0.3.0までのバージョンの書き方です。必要に応じて3dモジュールを初期化します。3dモジュールが不要な場合は、このパラメータを省略できます。
});
this.sdk = sdk
sdk.setBeautify({
whiten: 0.2
});
sdk.on('created', () => {
// コールバック中に業務ロジックの処理が可能です。詳しい内容については、[パラメータと方法]()をご参照ください
})
}
}
})
注意
ミニプログラムのSDK初期化前には、コンソールでのミニプログラムAPPIDの設定が必要です。
ミニプログラムの特徴はWebとは異なります。そのためミニプログラムがサポートするinputパラメータは、現在stringタイプの画像リンクのみです。
カメラ設定はWebとは異なりますので、inputパラメータは渡さず、直接cameraパラメータを設定します。ページの中に必ずcameraタグが挿入されていることが前提です。
ミニプログラムはgetOutputをサポートしていません。ご自身で1つの画面上のWEBGL canvasを渡す場合、SDKは直接このcanvasに出力します。

撮影と録画

ミニプログラムは撮影と録画機能をサポートします
撮影
録画
SDKは幅と高さおよびbufferデータを含むオブジェクトを返します。ユーザーはご自身のページ内の2d canvasでこのデータを描画し、画像ファイルとしてエクスポートできます。
Component({
...
async takePhoto() {
const {uint8ArrayData, width, height} = this.sdk.takePhoto(); // takePhotoで現在の画面のbufferデータを返します
const photoCanvasNode = await this.getCanvasNode('photo-canvas');
photoCanvasNode.width = parseInt(width);
photoCanvasNode.height = parseInt(height);
const ctx = photoCanvasNode.getContext('2d');
// sdkが返したデータでImageDataオブジェクトを作成します
const imageData = photoCanvasNode.createImageData(uint8ArrayData, width, height);
// ImageDataオブジェクトをcanvas上に描画します
ctx.putImageData(imageData,0,0,0,0,width,height);
// canvasをローカル画像として保存します
wx.canvasToTempFilePath({
canvas: photoCanvasNode,
x: 0,
y: 0,
width: width,
height: height,
destWidth: width,
destHeight: height,
success: (res) => {
// 写真をローカルに保存します
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath
});
}
})
}
})
注意
ミニプログラムがバックエンドに切り替わった場合、あるいはスマホの画面ロックが確認された場合には、stopRecordを呼び出して録画を停止する必要があります。停止しない場合、エラーになる可能性があります。
Component({
methods: {
// 録画の開始
startRecord() {
this.sdk.startRecord()
}
// 録画を終了
async stopRecord() {
const res = await this.sdk.stopRecord();
// 録画をローカルに保存します
wx.saveVideoToPhotosAlbum({
filePath: res.tempFilePath
})
}
}
})


ヘルプとサポート

この記事はお役に立ちましたか?

フィードバック