Press "Enter" to skip to content

使用DeepAR和Dyte为视频通话添加AR滤镜

除非你生活在石头下面,否则你应该会使用像抖音、Instagram、Facebook或者Snapchat这样的社交媒体平台。当在这些平台上发布照片或者视频时,通常你可以使用各种滤镜来增强照片或者视频。

你可以通过图像或者视频将自己变成不同的发色,甚至戴帽子,即使你并没有在照片或者视频中戴上。

社交媒体平台使用增强现实(AR)滤镜来实现所有这些照片或者视频增强的功能。AR滤镜是可以应用于图像或者视频的数字效果,使用计算机视觉技术实时追踪图像或者视频中某人的动作和面部特征。

AR滤镜主要用于娱乐、品牌推广和营销,因为它们提供了一种有趣而引人入胜的方式来增强视觉内容。这些滤镜还可以创建身临其境的体验,例如试衣虚拟试穿,并以独特和互动的方式展示产品。

在本文中,你将学习如何使用Dyte视频SDK、DeepAR和Web组件UI工具包构建一个带有AR滤镜的视频通话应用程序。Dyte是一个开发者友好的平台,提供了强大的SDK来构建应用程序中的实时体验。

前提条件

要完成本文,你需要在计算机上安装以下软件:

  • 一个文本编辑器:我会在本文中使用Visual Studio Code作为文本编辑器。要安装VS Code,转到VS Code下载页面,然后根据你的操作系统下载安装它。

创建和设置Dyte账号

步骤1:转到dyte.io,然后点击“开始创建”按钮。

步骤2:在下一页上使用你的Google或GitHub账号注册一个免费的Dyte账号。

步骤3:创建完Dyte账号后,你将被重定向到“API Keys”页面,上面提供了组织ID和API密钥。请保护好你的API密钥,不要与他人分享。

创建预设

Dyte包含一系列预配置的预设。如果你不想创建新的预设,可以简单使用默认预设。

创建一个Dyte会议

步骤1:转到创建一个会议页面

步骤2:在页面右侧,使用组织ID填写用户名输入框,使用API密钥填写密码输入框,这些信息可以在API Keys页面中找到。

步骤3:在“Body”部分,为会议指定一个标题“AR Filters”,然后点击“发送API请求”按钮。

步骤4:Dyte开发者门户的“会议”页面中,你应该看到创建了一个名为AR Filters的会议。

向会议中添加参与者

步骤1:转到添加参与者页面,并填写组织ID和API密钥(可以从Dyte开发者门户中获取),如上一步所示。

步骤2:在“参数”部分,添加之前创建的AR Filters会议的会议ID。

步骤3:在“Body”部分,按照下面的示例填写选项,然后点击“发送API请求”按钮。

步骤4:获取token。该token对于会议中的每个参与者都是唯一的,你可以通过调用Dyte的API在自己的后端获取每个参与者的token。

创建你的Dyte会议

步骤1: 在计算机上创建一个名为”ARFilters”的文件夹。然后,在文本编辑器中打开该文件夹,并向其中添加一个index.html文件。

步骤2: 安装Dyte SDK。

步骤3: 在你的index.html中构建一个基本的会议界面,包含两个自定义按钮来控制AR滤镜。

我们使用Dyte提供的自定义组件来创建默认的会议界面。

  • Dyte 头部:此组件加载所有基本的会议详情,比如标题、参与者数量、时钟等。
  • Dyte 网格:此组件渲染会议中所有参与者的视频流。
  • Dyte 侧边栏:此组件渲染聊天、投票、参与者列表等。
  • Dyte 控制栏:这是我们为会议添加控制项的地方。用户可以从控制栏中切换摄像头和麦克风,调整设置或管理AR滤镜。

我们还插入了一个链接到main.js的脚本,该脚本是一个外部文件,其中包含了我们所有的业务逻辑。

步骤4: 编写业务逻辑

我们使用我们的authToken初始化一个基本的Dyte会议,并将会议对象传递给所有的组件。

步骤5: 为我们的会议添加CSS样式。

创建一个style.css文件,该文件将保存我们会议的所有样式。

步骤6:在浏览器中打开HTML文件,你将被提示允许访问你的麦克风和摄像头,并且你应该能够看到会议界面。

设置DeepAR账户

步骤1:转到DeepAR开发者主页,点击“开始”按钮。

步骤2:在下一页上使用你的Google或GitHub账户免费注册DeepAR账户。

创建DeepAR项目

步骤1:在注册并登录DeepAR账户后,你将被重定向到项目页面。

步骤2:点击“创建项目”按钮。将项目命名为AR Filters,同意条款和条件,然后点击继续按钮。

步骤3:创建项目后,你将被重定向到添加应用程序的页面。在这种情况下,转到Web App部分并选择添加应用程序选项。你将被提示添加一个域名。添加你的域名,并点击继续按钮。

步骤4:创建Web应用程序后,你将收到DeepAR应用程序密钥。该密钥将初始化DeepAR滤镜的许可证密钥。

为你的视频通话应用添加AR滤镜

现在,你已经获得了许可证密钥,并且有一个基本的Dyte会议正在运行中。现在是时候为你的会议添加有趣的AR滤镜了。

步骤1: 安装DeepAR

你可以使用CDN将DeepAR导入到你的项目中。

步骤2: 初始化DeepAR模块

将一些滤镜添加到我们项目的存储库中,并为这些滤镜提供路径。

接下来,我们创建一个画布元素,并初始化DeepAR模块。

步骤3: 将AR滤镜添加到你的Dyte视频通话中

在这里,我们创建了两个函数,一个用于开启/关闭AR滤镜,另一个用于在滤镜之间切换。

我们使用Dyte的AddVideoMiddleware API添加中间件,该API接受一个中间件函数。

要在滤镜之间切换,我们使用DeepAR的switchEffect方法。

现在,让我们使用DeepAR创建我们的视频中间件函数。

完成后,我们使用Dyte视频SDK和DeepAR构建了一个具有AR滤镜的视频通话应用程序!戴上AR滤镜,看起来就像这样。

您可以在此处尝试示例应用程序的实时演示,项目的全部源代码可以在此处获得。

结论

总之,我们向您介绍了如何使用Dyte视频和DeepAR SDK构建具有AR滤镜的视频通话应用程序。使用Dyte可定制的UI工具包,您可以轻松地管理控件、添加或删除按钮、创建自定义控件等,只需几行代码即可完成。

如果这篇文章引起了您内心的建筑师兴趣,请查看Dyte的实时流媒体SDK。我们提供易于使用的SDK,以比传统HLS低得多的延迟规模交互式地进行实时流媒体传送。享受相同友好的开发者体验和可扩展性。Dyte的实时流媒体SDK将很快在Product Hunt上发布

获得有关如何利用Dyte技术的更多洞察,并发现它如何改变您的应用程序的通信能力和其SDK。如果您有任何问题,可以向我们的开发者社区提问。

Leave a Reply

Your email address will not be published. Required fields are marked *