製品概要
製品機能
基本概念
製品のメリット
ユースケース
https://webar.qcloud.com;https://webar-static.tencent-cloud.com;https://aegis.qq.com;および上述の署名インターフェース(get-ar-sign)のアドレス
https://webar-static.tencent-cloud.com
npm install tencentcloud-webar
"workers": "miniprogram_npm/tencentcloud-webar/worker"
// 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";
// wxml//カメラを開きます<cameradevice-position="{{'front'}}"frame-size="large" flash="off" resolution="medium"style="width: 750rpx; height: 134rpx;position:absolute;top:-9999px;"/>//sdkが処理済みの画面をリアルタイムでこのcanvas上に出力します<canvastype="webgl"canvas-id="main-canvas"id="main-canvas"style="width: 750rpx; height: 1334rpx;"></canvas>//撮影はImageDataオブジェクトをこのcanvas上に描画します<canvastype="2d"canvas-id="photo-canvas"id="photo-canvas"style="position:absolute;width:720px;height:1280px;top:-9999px;left:-9999px;"></canvas>// jsComponent({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 = sdksdk.setBeautify({whiten: 0.2});sdk.on('created', () => {// コールバック中に業務ロジックの処理が可能です。詳しい内容については、[パラメータと方法]()をご参照ください})}}})
stringタイプの画像リンクのみです。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});}})}})
Component({methods: {// 録画の開始startRecord() {this.sdk.startRecord()}// 録画を終了async stopRecord() {const res = await this.sdk.stopRecord();// 録画をローカルに保存しますwx.saveVideoToPhotosAlbum({filePath: res.tempFilePath})}}})
フィードバック