https://webar.qcloud.com;https://webar-static.tencent-cloud.com;https://aegis.qq.com;인증 서명 API의 URL(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 플러그인 초기화(선택 사항)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 // 3d 모듈이 필요하지 않은 경우 이 매개변수를 무시할 수 있습니다(v0.3.0 및 이후 버전에서만 사용 가능)});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})}}})
피드백