const { ArSdk } = window.AR;
Tencent Cloud account's APPID
*
* You can view your APPID in the [Account Center](https://console.tencentcloud.com/developer).
*/
const APPID = '';
* Web LicenseKey
*
* Log in to the RT-Cube console and click [Web Licenses](https://console.tencentcloud.com/vcube/web) on the left sidebar. A license key will be automatically generated after you create a license.
*/
const LICENSE_KEY = '';
* The token used to calculate the signature.
*
* Note: This method is only suitable for debugging. In a production environment, you should store the token and calculate the signature on your server. The front end can get the signature by calling an API. For details, see
* [Signature](https://cloud.tencent.com/document/product/616/71370#.E7.AD.BE.E5.90.8D.E6.96.B9.E6.B3.95)
*/
const token = '';
* Get the signature
*
* Note: This method is only suitable for debugging. In a production environment, you should calculate the signature on your server. The front end can get the signature by calling an API.
* Example:
* 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('Makeup')>=0)
const stickerList = list.filter(item=>item.label.indexOf('Sticker')>=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);
});
Was this page helpful?