插件说明

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

以下是 vite 开发， vite.config.ts 中的 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')
      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. 安装插件

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

2. 引入插件

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

3. 创建实例，注册插件

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

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

// 创建 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)