@cloudflare/realtimekit-virtual-background

实时 Kit 视频背景变换器

在您的 RealtimeKit 会议上添加视频背景并模糊到参与者视频种子的软件包 .
探索文件“

查看演示 • 妇女 报告错误 • 妇女 请求特性

目录

• 关于项目
  • 内设
• 开始
  • 先决条件
  • 安装
• 使用量
• 捐款
• 许可证

关于项目

这个软件包为在您自定义的UI执行中添加视频背景和模糊到参与者的视频反馈提供了基础.

如果你正在使用 rtk-meeting 组件直接并偏向抽象而不是此包,指 UI Kit 插件。 。 。 .

内设

• 实时 Kit
• 字体

开始

安装

npm install @cloudflare/realtimekit-virtual-background

运行示例

1. 运行 npm install 在此仓库中.
2. 替换 YOUR_AUTH_TOKEN 内 index.html 带有有效的实时Kit参与者符号.
3. 运行 npm run dev 打开 http://localhost:3002。 。 。 .
4. 启用设置屏幕上的相机来尝试虚拟背景 .

使用量

禁用每个帧渲染视频中间软件的默认,通过让这个中间软件自行控制来提高速度和质量.

await meeting.self.setVideoMiddlewareGlobalConfig({
  disablePerFrameCanvasRendering: true
});

A 类 videoBackgroundTransformer 对象可以使用 RealtimeKitVideoBackgroundTransformer.init({meeting: meeting}) 方法.

const videoBackgroundTransformer = await RealtimeKitVideoBackgroundTransformer.init({
  meeting,
});

由 : videoBackgroundTransformer数字 :

1. createStaticBackgroundVideoMiddleware 需要一个 imageUrl 作为参数,然后为当前用户创建图像背景.

meeting.self.addVideoMiddleware(
    await videoBackgroundTransformer.createStaticBackgroundVideoMiddleware(imageUrl)
);

2. createBackgroundBlurVideoMiddleware 预期 blurStrength (0-100)作为参数(默认为50%),并被给定的模糊Strength模糊了用户的背景.

meeting.self.addVideoMiddleware(
  await videoBackgroundTransformer.createBackgroundBlurVideoMiddleware(50)
);

说明: 一些浏览器或其旧版本可能不支持WebGL或本软件包使用的浏览器API. 我们建议事先检查支助情况:

if(RealtimeKitVideoBackgroundTransformer.isSupported()){
  const videoBackgroundTransformer = await RealtimeKitVideoBackgroundTransformer.init({
    meeting: meeting,
  });
  meeting.self.addVideoMiddleware(
    await videoBackgroundTransformer.createStaticBackgroundVideoMiddleware(`REPLACE_THIS_WITH_IMAGE_URL`)
  );
}

说明: 图像 URL 必须允许 CORS 避免覆盖画布 。 您可以在 https://unsplash.com/ (中文(中国大陆) ) 打开 https://imgur.com (中文(简体) )。 。 。 .

如果您想要调整分区以获得更好的、更尖锐的结果, 请在初始化 RealtimeKitVideoBackground Transfer 时通过想要的分区配置 .

const videoBackgroundTransformer = await RealtimeKitVideoBackgroundTransformer.init({
  meeting,
  segmentationConfig: {
    model: 'mlkit', // 'meet' | 'mlkit'
    backend: 'wasmSimd',
    inputResolution: '256x256', // '256x144' for meet
    pipeline: 'webgl2', // 'webgl2' | 'canvas2dCpu' // canvas2dCpu gives sharper blur, webgl2 is faster.
    targetFps: 35,
  }
});