1 导入库文件

引入美摄SDK接口文件NvEffectSdk.js

<script src="https://alieasset.meishesdk.com/NvWasm/domain/21/NvEffectSdk.js"></script>

安装meishewasmloader 参考

npm i meishewasmloader --save

使用WASMLoader加载wasm相关文件

import { WASMLoader }  from 'meishewasmloader';
const wasmLoader = WASMLoader({
    // 加载进度回调       
    showLoader: function (state) {},
    // 失败回调
    showError(errorText: string) {},
    // 成功回调
    loadingFinished() {},
});
wasmLoader.loadEmscriptenModule("https://alieasset.meishesdk.com/NvWasm/domain/21/", { effectSdk:true });

注解: https://alieasset.meishesdk.com/NvWasm/domain/21/ 地址为美摄提供的测试公用地址，如果客户产品准备发布上线，需要联系商务获取sdk相关文件，私有化部署到客户的环境中，替换此地址再使用；
私有化部署wasm相关文件时，要对wasm文件配置brotli或者gzip进行压缩，有助于提升加载速度；
步骤1和2中的地址需要保持一致，否则会导致不可预期的结果；

2 授权验证

美摄web端Effectsdk为了便于客户接入测试，针对localhost启动的方式，不需要进行授权验证就可以使用所有效果，客户使用非localhost环境部署时，需要联系商务获取sdk授权文件，再按照如下方式进行授权验证即可。 wasm文件加载成功的回调函数loadingFinished中调用verifySdkLicenseFileUrl()进行授权验证:

if(nveGetEffectContextInstance().verifySdkLicenseFileUrl('/static/effectsdk.lic')) {
    // 授权成功
} else {
    // 授权失败
}

授权验证失败则无法使用sdk的所有效果。

3 初始化ARScene快捷渲染器

const arSceneRenderer = new NveARSceneRenderer();
await arSceneRenderer.init({
    faceModelUrl:"https://alieasset.meishesdk.com/model/ms_face240_v2.0.8.model",
    segmentationModelUrl:"https://alieasset.meishesdk.com/model/ms_humanseg_v1.0.15.model",
});

注解: 初始化完成后默认会带有美颜。

4 启动摄像头

await arSceneRenderer.startupCamera({
    audio: false,
    video: {width: 1280, height: 720, frameRate: {ideal: 30, max: 60}}
});

5 设置人像分割虚拟背景

//图片背景
await arSceneRenderer.setEffectList([
    {
        segmentationBackgroundUrl:"/static/background.jpg",
    },
]);

//背景虚化
await arSceneRenderer.setEffectList([
    {
        url:"/static/F31CBEBD-9F86-4AC6-87AB-1A289A62E3AE.1.videofx",
        licUrl: "",
    },
]);

6 获取输出流

const outputStream = arSceneRenderer.getOutputStream();