미니프로그램 통합

미니프로그램 개발 방법은 Weixin 미니프로그램 문서를 참고하십시오.
미니프로그램 통합
1단계: 도메인 얼로우리스트 구성
SDK는 백엔드에 인증 및 리소스 로딩을 요청하므로 미니프로그램 백엔드에서 도메인 얼로우리스트를 구성해야 합니다.
1. 미니프로그램 백엔드를 열고 개발 > 개발 관리 > 개발 설정 > 서버 도메인 이름으로 이동합니다.
2. 수정을 클릭하고 다음 도메인 이름을 구성하고 저장합니다.
도메인 이름 요청:
https://webar.qcloud.com;
https://webar-static.tencent-cloud.com;
https://aegis.qq.com;
인증 서명 API의 URL(get-ar-sign)
downloadFile 도메인 이름:
https://webar-static.tencent-cloud.com
2단계: npm 패키지 설치 및 빌드
1. 설치:
npm install tencentcloud-webar
2. Weixin DevTools를 열고 상단 메뉴 > 툴 > 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 플러그인 초기화(선택 사항)
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 파일로 제공됩니다.
v0.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 // 3d 모듈이 필요하지 않은 경우 이 매개변수를 무시할 수 있습니다(v0.3.0 및 이후 버전에서만 사용 가능)
            });
            this.sdk = sdk
            sdk.setBeautify({
                whiten: 0.2
            });
            sdk.on('created', () => {
                // 이 콜백에 비즈니스 로직을 추가할 수 있습니다. 자세한 내용은 [매개변수 및 메소드]()를 참고하십시오.
            })
        }
    }
})
주의사항
SDK를 초기화하기 전에 RT-Cube 콘솔에서 미니프로그램 APPID를 구성해야 합니다.
Web과 달리 미니프로그램의 경우 input 매개변수는 이미지 URL string이어야 합니다.
카메라 구성은 Web과 동일합니다. input 대신 camera 매개변수를 전달합니다. 페이지에 이미 camera 태그를 삽입했는지 확인하십시오.
미니프로그램은 getOutput을 지원하지 않으므로 화면상의 WebGL canvas를 전달해야 합니다. SDK는 이 canvas에 이미지를 출력합니다.
사진 찍기 및 촬영하기
SDK는 사진 찍기와 미니프로그램 촬영 모두에서 작동합니다.
사진 촬영
동영상 촬영
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
            })
        }
    }
})
﻿
미니프로그램 통합
사진 찍기 및 촬영하기