一、准备工作
·请阅读 Web 美颜特效 SDK 接入指南，熟悉 SDK 基本用法。
·WebRTC 的推流相关请参见 结合 WebRTC 的推流，这篇重点介绍采取预初始方案时代码及流程差异部分。
·预初始化方案相关介绍，请参见 加载优化。
二、初始化SDK
…let resourceReady = false// ar sdk 基础配置参数const config = { // input: stream, // 不指定input auth: { licenseKey: LICENSE_KEY, appId: APPID, authFunc: getSignature }, // 初始美颜效果（可选参数） beautify: { whiten: 0.1, // 美白 0-1 dermabrasion: 0.5, // 磨皮 0-1 lift: 0.3, // 瘦脸 0-1 shave: 0, // 削脸 0-1 eye: 0, // 大眼 0-1 chin: 0, // 下巴 0-1 }}// config 传入 ar sdkconst ar = new ArSdk(config);// resourceReady 回调事件触发，意味着相关资源已加载完成，等待 initCore 提供输入ar.on('resourceReady', () => { resourceReady = true})// 调用 initCore 后会触发 ready 事件ar.on('ready', () => { // 获取 ar sdk 输出流数据 const arStream = await ar.getOutput(); // 处理输出流 …})…
三、用户操作触发 initCore 事件
// 此处以用户点击【开启摄像头】为例，介绍预初始化方案设置输入流的方式function onClickStartCamera(){ let w = 1280; let h = 720; // 获取设备输入流 const arInputStream = await navigator.mediaDevices.getUserMedia({ audio: true, video: { width: w, height: h } }); if(!resourceReady){ // 此模式下，resourceReady未触发时，调用initCore无意义，业务可以做一些个性化处理 return } // 设置 ar sdk 输入流数据 ar.initCore({ input: arInputStream })}
四、代码示例
你可以下载 示例代码 解压后查看AR_LEB_WEB代码目录中的AR_and_LEB_Preload.html文件。