|
美摄Web端SDK
3.10.2
|
Cross-Origin-Opener-Policy: same-origin Cross-Origin-Embedder-Policy: require-corp以开发环境为例
// vite.config.js
export default defineConfig({
plugins: [
...,
{
name: "configure-response-headers",
configureServer: (server) => {
server.middlewares.use((_req, res, next) => {
res.setHeader("Cross-Origin-Embedder-Policy", "require-corp");
res.setHeader("Cross-Origin-Opener-Policy", "same-origin");
next();
});
},
},
],
...
})
<script src="https://alieasset.meishesdk.com/NvWasm/domain/13/NvEffectSdk.js"></script>
npm i meishewasmloader --save
import { WASMLoader } from 'meishewasmloader';
const wasmLoader = WASMLoader({
// 加载进度回调
showLoader: function (state) {},
// 失败回调
showError(errorText: string) {},
// 成功回调
loadingFinished() {},
});
wasmLoader.loadEmscriptenModule("https://alieasset.meishesdk.com/NvWasm/domain/13/", {effectSdk:true});
美摄web端Effectsdk为了便于客户接入测试，针对localhost启动的方式，不需要进行授权验证就可以使用所有效果，
import axios from 'axios';
const response = await axios.get('/static/effectsdk.lic', { responseType: 'arraybuffer' });
FS.writeFile('/effectsdk.lic', new Uint8Array(response.data));
if(nveGetEffectContextInstance().verifySdkLicenseFile('/effectsdk.lic')) {
// 授权成功
} else {
// 授权失败
}
授权验证失败则无法使用sdk的所有效果。
import axios from 'axios';
const faceModelUrl = "https://alieasset.meishesdk.com/model/ms_face240_v2.0.8.model";
const response = await axios.get(faceModelUrl, { responseType: 'arraybuffer' });
const faceModel = '/' + faceModelUrl.split('/').pop();
await FS.writeFile(faceModel, new Uint8Array(response.data));
nveGetEffectContextInstance().initHumanDetection(
faceModel,
"",
NveHumanDetectionFeatureEnum.FaceLandmark | NveHumanDetectionFeatureEnum.FaceAction
| NveHumanDetectionFeatureEnum.SemiImageMode | NveHumanDetectionFeatureEnum.MultiThread
);
import axios from 'axios';
const eyeballModelUrl = "https://alieasset.meishesdk.com/model/ms_eyecontour_v1.0.2.model";
const response = await axios.get(eyeballModelUrl, { responseType: 'arraybuffer' });
const eyeballModel = '/' + eyeballModelUrl.split('/').pop();
await FS.writeFile(eyeballModel, new Uint8Array(response.data));
nveGetEffectContextInstance().initHumanDetectionExt(
eyeballModel,
"",
NveHumanDetectionFeatureEnum.EyeballLandmark | NveHumanDetectionFeatureEnum.SemiImageMode
| NveHumanDetectionFeatureEnum.MultiThread
);
import axios from 'axios';
const segmentationModelUrl = "https://alieasset.meishesdk.com/model/ms_humanseg_v1.0.17.model";
const response = await axios.get(segmentationModelUrl, { responseType: 'arraybuffer' });
const segmentationModel = '/' + segmentationModelUrl.split('/').pop();
await FS.writeFile(segmentationModel, new Uint8Array(response.data));
nveGetEffectContextInstance().initHumanDetectionExt(
segmentationModel,
"",
NveHumanDetectionFeatureEnum.SegmentationBackground
);
import axios from 'axios';
const faceDataUrl = "https://alieasset.meishesdk.com/model/makeup2_240_v2.1.2.dat";
const response = await axios.get(faceDataUrl, { responseType: 'arraybuffer' });
const faceData = '/' + faceDataUrl.split('/').pop();
await FS.writeFile(faceData, new Uint8Array(response.data));
nveGetEffectContextInstance().setupHumanDetectionData(NveHumanDetectionDataTypeEnum.Makeup2, faceData);
import axios from 'axios';
const packageUrl = "https://qasset.meishesdk.com/material/pu/makeup/FDFB2239-44D1-491D-85A1-7A537860118E/FDFB2239-44D1-491D-85A1-7A537860118E.1.makeup";
const response = await axios.get(packageUrl, { responseType: 'arraybuffer' });
const packageFile = '/' + packageUrl.split('/').pop();
await FS.writeFile(packageFile, new Uint8Array(response.data));
let packageLicenseFile = '';
let packageType = NveAssetPackageTypeEnum.Makeup;
const assetPackageManager = nveGetEffectContextInstance().getAssetPackageManager();
assetPackageManager.onFinishAssetPackageInstallation = (assetPackageId, assetPackageFilePath, assetPackageType, error) => {};
assetPackageManager.installAssetPackage(packageFile, packageLicenseFile, packageType);
const ratio = new NveRational(16, 9);
const effectInstance = nveGetEffectContextInstance().createVideoEffect('Pinky', ratio, true);
const result = await nveGetEffectContextInstance().renderEffects([effectInstance],
inputImageData,
Math.floor(performance.now(),
NveRenderFlagEnum.OutputImageBitmap);
import axios from 'axios';
async installAsset(packageUrl, packageLicenseUrl) {
let response = await axios.get(packageUrl, { responseType: 'arraybuffer' });
const packageFile = '/' + packageUrl.split('/').pop();
const assetUuid = packageUrl.split('/').pop().split('.')[0];
const suffix = packageFile.split('.').pop();
await FS.writeFile(packageFile, new Uint8Array(response.data));
let packageLicenseFile = '';
if (packageLicenseUrl) {
response = await axios.get(packageLicenseUrl, { responseType: 'arraybuffer' });
packageLicenseFile = '/' + packageLicenseUrl.split('/').pop();
await FS.writeFile(packageLicenseFile, new Uint8Array(response.data));
}
let assetType
if (suffix === 'videofx') {
assetType = NveAssetPackageTypeEnum.VideoFx;
} else if (suffix === 'captionstyle') {
assetType = NveAssetPackageTypeEnum.CaptionStyle;
} else if (suffix === 'animatedsticker') {
assetType = NveAssetPackageTypeEnum.AnimatedSticker;
} else if (suffix === 'videotransition') {
assetType = NveAssetPackageTypeEnum.VideoTransition;
} else if (suffix === 'makeup') {
assetType = NveAssetPackageTypeEnum.Makeup;
} else if (suffix === 'facemesh') {
assetType = NveAssetPackageTypeEnum.FaceMesh;
}
return new Promise((resolve, reject) => {
if (!assetType) {
reject(assetUuid);
return;
}
const assetPackageManager = nveGetEffectContextInstance().getAssetPackageManager();
// 检查包状态，如果已经安装，则不需要再次安装
const status = assetPackageManager.getAssetPackageStatus(assetUuid, assetType);
if (status !== NveAssetPackageStatusEnum.NotInstalled) {
resolve(assetUuid);
return;
}
assetPackageManager.onFinishAssetPackageInstallation = (assetPackageId, assetPackageFilePath, assetPackageType, error) => {
FS.unlink(assetPackageFilePath, 0);
if (error === 0 && assetPackageId === assetUuid) {
resolve(assetUuid);
} else {
reject(assetUuid);
}
}
assetPackageManager.installAssetPackage(packageFile, packageLicenseFile, assetType);
})
}
const ratio = new NveRational(16, 9);
const effectInstance = nveGetEffectContextInstance().createVideoEffect('AR Scene', ratio, true);
// 美颜
effectInstance.setIntVal("Advanced Beauty Type", 0);
effectInstance.setBooleanVal("Beauty Effect", true);
effectInstance.setBooleanVal("Advanced Beauty Enable", true);
effectInstance.setFloatVal("Advanced Beauty Intensity", 1);
// 美白
const lutUrl = '/static/test.mslut';
const response = await axios.get(lutUrl, { responseType: 'arraybuffer' });
const lutFile = '/' + lutUrl.split('/').pop();
await FS.writeFile(lutFile, new Uint8Array(response.data));
effectInstance.setBooleanVal("Whitening Lut Enabled", true);
effectInstance.setStringVal("Whitening Lut File", lutFile);
// 美型
effectInstance.setBooleanVal("Face Mesh Internal Enabled", true);
const faceMeshUrl = 'https://qasset.meishesdk.com/material/pu/makeup/63BD3F32-D01B-4755-92D5-0DE361E4045A/63BD3F32-D01B-4755-92D5-0DE361E4045A.3.facemesh';
const faceMeshUuid = await this.installAsset(faceMeshUrl);
effectInstance.setStringVal("Face Mesh Face Size Custom Package Id", faceMeshUuid);
// 美妆
const makeupUrl = 'https://qasset.meishesdk.com/material/pu/makeup/FDFB2239-44D1-491D-85A1-7A537860118E/FDFB2239-44D1-491D-85A1-7A537860118E.1.makeup';
const makeupUuid = await this.installAsset(makeupUrl);
effectInstance.setStringVal("Makeup Lip Package Id", makeupUuid);
1.9.1