1 Import SDK

Import NvEffectSdk.js

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

Install meishewasmloader Reference

npm i meishewasmloader --save

Use WASMLoader to load wasm files

import { WASMLoader }  from 'meishewasmloader';
const wasmLoader = WASMLoader({
    // State changed callback       
    showLoader: function (state) {},
    // Error callback
    showError(errorText: string) {},
    // Finish callback
    loadingFinished() {},
});
wasmLoader.loadEmscriptenModule("https://alieasset.meishesdk.com/NvWasm/domain/21/", { effectSdk:true });

Note: https://alieasset.meishesdk.com/NvWasm/domain/21/ is the test address provided by Meishe. You need to contact business people to get SDK related files, and replace this address with your address when deploying product;
For improving loading speed, we recommend that compress wasm-related files by brotli or gzip configuration of cdn or nginx;
The addresses in steps 1 and 2 need to be consistent, otherwise unpredictable results will occur;

2 Verify License

Meishe web EffectSDK support non-license mode on localhost, so you can preview all effects on localhost quickly. Otherwise, you need to contact business people to get license files, then verify license as following: Use verifySdkLicenseFileUrl() to verify sdk license in loadingFinished callback of WASMLoader:

if(nveGetEffectContextInstance().verifySdkLicenseFileUrl('/static/effectsdk.lic')) {
    // Success
} else {
    // Fail
}

All SDK effects cannot be used if authentication failed.

3 Init ARScene Renderer

const arSceneRenderer = new NveARSceneRenderer();
await arSceneRenderer.init({
    faceModelUrl:"https://alieasset.meishesdk.com/model/ms_face240_v2.0.8.model",
    eyecontourModelUrl:"https://alieasset.meishesdk.com/model/ms_eyecontour_v1.0.2.model",
    makeupDataUrl:"https://alieasset.meishesdk.com/model/makeup2_240_v2.1.2.dat",
    beautyIntensity: 1,     //beauty intensity
    beautyLutUrl: "",       //beauty lut file url
    beautyLutIntensity: 1,  //beauty lut file intensity
});

Note: Beauty effect added by default after initialization.

4 Startup Camera

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

5 Set Beauty & Shape & Makeup

await arSceneRenderer.setEffectList([
    //Makeup
    {
        url:"https://qasset.meishesdk.com/material/pu/makeup/FDFB2239-44D1-491D-85A1-7A537860118E/FDFB2239-44D1-491D-85A1-7A537860118E.1.makeup",
        licUrl: "",
        intensity:1,
    },
    //Shape
    {
        url:"https://qasset.meishesdk.com/material/pu/makeup/63BD3F32-D01B-4755-92D5-0DE361E4045A/63BD3F32-D01B-4755-92D5-0DE361E4045A.3.facemesh",
        licUrl: "",
        intensity:1,
    },
]);

6 Get Output Stream

const outputStream = arSceneRenderer.getOutputStream();