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

ミニプログラムにアクセスする場合は、ご自身のミニプログラムアカウントが必要です。詳しくは、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件＋必要に応じて3ｄモジュールを初期化）
import '../../miniprogram_npm/tencentcloud-webar/lib.js';
import '../../miniprogram_npm/tencentcloud-webar/core.js';
// 必要に応じて3ｄプラグインを初期化します。3ｄが必要ない場合は、参照なしにすることができます。
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
            })
        }
    }
})
﻿
ミニプログラムプロジェクトへのアクセス
撮影と録画