const { ArSdk } = window.AR;
* 腾讯云账号 APPID
*
* 进入[腾讯云账号中心](https://console.tencentcloud.com/developer) 即可查看 APPID
*/
const APPID = '';
* Web LicenseKey
*
* 登录音视频终端 SDK 控制台的[Web License 管理](https://console.tencentcloud.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 = '';
* 定义获取签名方法
*
* 注意:此处方案仅适用于 DEMO 调试,正式环境中签名方法推荐在服务端实现,通过接口提供,前端调用拉取签名
* 如:
* async function () {
* return fetch('http://xxx.com/get-ar-sign').then(res => res.json());
* };
*/
const getSignature = function () {
const timestamp = Math.round(new Date().getTime() / 1000);
const signature = sha256(timestamp + token + APPID + timestamp).toUpperCase();
return { signature, timestamp };
};
let w = 720;
let h = 480;
const stream = await navigator.mediaDevices.getUserMedia({
audio: true,
video: { width: w, height: h }
})
const config = {
input: stream,
auth: {
licenseKey: LICENSE_KEY,
appId: APPID,
authFunc: getSignature
},
beautify: {
whiten: 0.1,
dermabrasion: 0.5,
lift: 0.3,
shave: 0,
eye: 0,
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)
renderMakeupList(makeupList);
renderStickerList(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,
}));
renderFilterList(list);
}).catch((e) => {
console.log(e);
});
});
ar.on('ready', async (e) => {
$('#dermabrasion_range_input').change((e) => {
ar.setBeautify({
dermabrasion: e.target.value,
});
});
$('#makeup_list li').click(() => {
ar.setEffect([{id: effect.id, intensity: 1}]);
});
$('#sticker_list li').click(() => {
ar.setEffect([{id: effect.id, intensity: 1}]);
});
ar.setFilter(filterList[0].id, 1);
$('#filter_list li').click(() => {
ar.setFilter(filter.id, 1);
});
const arStream = await ar.getOutput();
});
ar.on('error', (e) => {
console.log(e);
});
本页内容是否解决了您的问题?