<camera
device-position="{{'front'}}"
frame-size="large" flash="off" resolution="medium"
style="width: 750rpx; height: 134rpx;position:absolute;top:-9999px;"
/>
<canvas
type="webgl"
canvas-id="main-canvas"
id="main-canvas"
style="width: 750rpx; height: 1334rpx;">
</canvas>
<canvas
type="2d"
canvas-id="photo-canvas"
id="photo-canvas"
style="position:absolute;width:720px;height:1280px;top:-9999px;left:-9999px;">
</canvas>
* 腾讯云账号 APPID
*
* 进入[腾讯云账号中心](https://console.cloud.tencent.com/developer) 即可查看 APPID
*/
const APPID = '';
* Web LicenseKey
*
* 登录音视频终端 SDK 控制台的[Web License 管理](https://console.cloud.tencent.com/vcube/web),创建项目即可获得 LicenseKey
*/
const LICENSE_KEY = '';
* 计算签名用的密钥 Token
*
* 注意:此处仅用于 DEMO 调试,正式环境中请将 Token 保管在服务端,签名方法迁移到服务端实现,通过接口提供,前端调用拉取签名,参考
* [签名方法](https://cloud.tencent.com/document/product/616/71370#.E7.AD.BE.E5.90.8D.E6.96.B9.E6.B3.95)
*/
const token = '';
Component({
data: {
makeupList: [],
stickerList: [],
filterList: [],
recording: false
},
methods: {
async getCanvasNode(id) {
return new Promise((resolve) => {
this.createSelectorQuery()
.select(`#${id}`)
.node()
.exec((res) => {
const canvasNode = res[0].node;
resolve(canvasNode);
});
});
},
getSignature() {
const timestamp = Math.round(new Date().getTime() / 1000);
const signature = sha256(timestamp + token + APPID + timestamp).toUpperCase();
return { signature, timestamp };
},
async initSdkCamera() {
const outputCanvas = await this.getCanvasNode("main-canvas");
const auth = {
licenseKey: LICENSE_KEY,
appId: APP_ID,
authFunc: this.getSignature
};
const config = {
auth,
camera: {
width:720,
height:1280,
},
output: outputCanvas,
beautify: {
whiten: 0.1,
dermabrasion: 0.3,
lift: 0,
shave: 0,
eye: 0.2,
chin: 0,
}
};
const ar = new ArSdk(config);
ar.on('created', () => {
ar.getEffectList({
Type: 'Preset'
}).then((res) => {
const list = res.map(item => ({
name: item.Name,
id: item.EffectId,
cover: item.CoverUrl,
url: item.Url,
label: item.Label,
type: item.PresetType,
}));
const makeupList = list.filter(item=>item.label.indexOf('美妆')>=0)
const stickerList = list.filter(item=>item.label.indexOf('贴纸')>=0)
this.setData({
makeupList,
stickerList
});
}).catch((e) => {
console.log(e);
});
ar.getCommonFilter().then((res) => {
const list = res.map(item => ({
name: item.Name,
id: item.EffectId,
cover: item.CoverUrl,
url: item.Url,
label: item.Label,
type: item.PresetType,
}));
this.setData({
filterList: list
});
}).catch((e) => {
console.log(e);
});
});
ar.on('ready', (e) => {
this._sdkReady = true
});
ar.on('error', (e) => {
console.log(e);
});
this.ar = ar
},
onChangeBeauty(val){
if(!this._sdkReady) return
this.ar.setBeautify({
dermabrasion: val.dermabrasion,
});
},
onChangeMakeup(id, intensity){
if(!this._sdkReady) return
this.ar.setEffect([{id, intensity}]);
},
onChangeSticker(id, intensity){
if(!this._sdkReady) return
this.ar.setEffect([{id, intensity}]);
},
onChangeFilter(id, intensity){
if(!this._sdkReady) return
this.ar.setFilter(id, 1);
}
}
})
本页内容是否解决了您的问题?