agora-meishe-effect-sdk

插件说明

设置相应头，使得浏览器中可以使用 SharedArrayBuffer，

$3

``ts
{
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')
res.setHeader('Cross-Origin-Resource-Policy', 'cross-origin')
next()
})
},
configurePreviewServer: (server) => {
server.middlewares.use((_req, res, next) => {
res.setHeader('Cross-Origin-Embedder-Policy', 'require-corp')
res.setHeader('Cross-Origin-Opener-Policy', 'same-origin')
res.setHeader('Cross-Origin-Resource-Policy', 'cross-origin')
next()
})
},
},

`

插件使用方式

1. 安装插件

`bash
npm i agora-meishe-effect-sdk
npm i jszip
`

2. 引入插件

`ts
import { EffectSDKExtension } from 'agora-meishe-effect-sdk'
import JSZip from 'jszip'
`

3. 创建实例，注册插件

`ts
const effectSDKExtension = new EffectSDKExtension()
AgoraRTC.registerExtensions([effectSDKExtension])
`

4. 初始化插件功能，配置参数

`ts
// 创建 processor
const effectSDKProcessor = effectSDKExtension.createProcessor()
effectSDKProcessorRef.current = effectSDKProcessor
const settings = videoTrack.getMediaStreamTrack().getSettings()
// 其中所需的model文件，.dat文件，sdkCDNUrl，licFileUrl，需要从美摄获取。 这是美摄的测试数据
const arSceneRenderer = await effectSDKProcessor.init({
faceModelUrl: 'https://xxx',
eyecontourModelUrl: 'https://xxx',
avatarModelUrl: 'https://xxx',
segmentationModelUrl: 'https://xxx',
makeupDataUrl: 'https://xxx',
fakefaceDataUrl: 'https://xxx',
faceCommonDataUrl: 'https://xxx',
advancedBeautyDataUrl: 'https://xxx',
detectionMode: 32768 | 32,
ratio: settings.width + ':' + settings.height!,
sdkCDNUrl: 'https://xxx',
licFileUrl: '',
jszip: JSZip // npm包 JSZip 对象
})
if (!arSceneRenderer) {
return
}

// 配置参数 详情参考 https://www.meishesdk.com/web/doc_ch/html/index.html 中的EffectSDK 使用
await arSceneRenderer.setEffectList([
{
url: 'https://xxx', // 特效包地址
},
])
const sticker = await arSceneRenderer.createExternalEffectInstance({
inPoint: 0,
duration: 5000000,
url: 'https://xxx', // 贴纸包地址
licUrl: '',
})
arSceneRenderer.appendExternalEffectInstance(sticker)

// 将插件注入摄像头数据流处理管道
videoTrack.pipe(effectSDKProcessor).pipe(videoTrack.processorDestination)
``