Qcon演讲纪实:详解如何在实时视频通话中实现AR功能

标签: iOS  Swift  ARKit  视频会议  视频直播

2018年4月20日-22日,由 infoQ 主办的 Qcon 2018全球软件开发大会在北京如期举行。声网首席 iOS 研发工程师,iOS 端移动应用产品设计和技术架构负责人龚宇华,受邀分享了《基于 ARkit 和 ARcore,在实时视频通话中实现 AR 功能》,在演讲中剖析了 AR 与 VR 差异,ARKit 的工作原理,以及逐步讲解如何基于 ARKit 与声网Agora SDK 创建 AR 视频会议场景。

以下为演讲精华摘录:

首先,龚宇华简要分析了 AR 与 VR 的差别是什么,“VR 是将人置身于一个完全虚拟的场景中,它发展到极致就会像《黑客帝国》一样,你所看到的一切都是虚拟的;AR 则是在现实场景中增加虚拟元素,让两者结合,就像《钢铁侠》电影中的头盔一样,在可以查看周围环境的同时,显示虚拟元素”。不只是在电影中,现实中也有很多AR的应用案例,比如曾火爆一时的游戏 Pocketmon go。

ARKit 如何实现 AR 场景?

在演讲中,龚宇华为大家演示了如何实现一个 AR 视频会议场景,实现效果会与我们在电影《王牌特工》中所看到的场景类似(如下图),特工戴上眼镜之后,世界另一端的特工的虚拟形象就与他坐在同一张桌旁。

“就像我们说把大象放进冰箱里三步骤,我们要打开冰箱,把大象放进去,关上冰箱。那我们实现 AR 的虚拟会议室也是分三步骤,就是实现 AR、实现视频会议,然后把它两个结合起来。”龚宇华表示。最终我们会实现下图中的Demo效果。

目前,苹果和 Google 分别推出了 ARKit 和 ARCore,为我们在移动端实现 AR 场景降低了门槛。实现AR的原理是怎样的呢?我们以 ARKit为例,来看下它是如何工作的。如刚刚所说,AR 就是在实际环境中植入虚拟元素,那么首先要识别出周围环境,也就是通过 iPhone 的摄像头来实现。在手机加速计、陀螺仪的帮助下,ARKit 可以识别3D 的环境并判断手机在环境中的姿态。

通过以上实现过程,我们很容易理解 ARKit 的限制,比如:

  • 光线差:没有足够的光或光线过强的镜面反光。尝试避免这些光线差的环境。

  • 缺少纹理:如果摄像头指向一面白墙,那也没法获得特征,ARKit 也去无法找到并追踪用户。尝试避免看向纯色、反光表面等地方。

  • 快速移动:通常情况下检测和估算 3D 姿态只会借助图片,如果摄像头移动太快图片就会糊,从而导致追踪失败。但 ARKit 会利用视觉惯性里程计,综合图片信息和设备运动传感器来估计用户转向的位置。因此 ARKit 在追踪方面非常强大。

在完成环境识别之后,还需要渲染,通常我们会想到使用 OpenGL 或 Metal 渲染,但是它们的开发成本比较高,所以苹果想了一办法,就是通过 SceneKit 进行渲染。

我们可以通过以下几行代码实现 AR,也就是“将大象关进冰箱”的第一步。

 @IBOutlet weak var sceneView: ARSCNView!
 override func viewDidAppear(_ animated: Bool) {
     super.viewDidAppear(animated)
     guard ARWorldTrackingConfiguration.isSupported else {
         return
     }
     let configuration = ARWorldTrackingConfiguration()
     configuration.planeDetection = .horizontal
     sceneView.session.run(configuration)
}

实现视频通话功能

我们可以通过声网Agora SDK 来快速实现视频通话。在这样的视频通话场景中,声网Agora SDK 具备几个优势:

低延时:声网SDK 实时通讯网络,可实现全球百毫秒级音视频通话;

快速集成:开发者最快可在30分钟内完成集成;

全球化部署:支持全球200多个国家与地区。

在下载最新版声网Agora SDK 后,将其添加到我们的 AR Demo 中。通过以下代码,可以基于 Agora 实现视频会议。

 // 初始化引擎
 let agoraKit = AgoraRtcEngineKit.sharedEngine(withAppId: myAppId,
                                               delegate: self)
 // 设置为发送端
 agoraKit.setChannelProfile(.liveBroadcasting)
 agoraKit.setClientRole(.broadcaster)
 agoraKit.enableVideo()
 // 加入会议
 agoraKit.joinChannel(byToken: nil,
                     channelId: “QCon2018”,
                     info: nil,
                     uid: 0,
                     joinSuccess: nil)

将视频通话融入AR场景

在完成视频会议的搭建之后,我们还需要传输本地视频与音频。

let videoSource = ARVideoSource()
agoraKit.setVideoSource(videoSource) 

func session(_ session: ARSession, didUpdate frame: ARFrame) {
    videoSource.sendBuffer(frame.capturedImage, timestamp: frame.timestamp)
}

1agoraKit.enableExternalAudioSource(withSampleRate: 44100, channelsPerFrame: 1)
1func session(_ session: ARSession, didOutputAudioSampleBuffer audioSampleBuffer: CMSampleBuffer) {
2 agoraKit.pushExternalAudioFrameSampleBuffer(audioSampleBuffer)
3}
最后,当我们通过SDK获得了其它用户发来的音视频数据后,我们还需要将其渲染到AR环境中,实现方式如下。

 class ARVideoRenderer : NSObject, AgoraVideoSinkProtocol {
     var renderNode: SCNNode!
     func bufferType() -> AgoraVideoBufferType { return .rawData }
     func pixelFormat() -> AgoraVideoPixelFormat { return .I420 }
     func renderRawData(_ rawData: UnsafeMutableRawPointer,
                        size: CGSize,
                        rotation: AgoraVideoRotation) {
         let rgbTexture = createTexture(widthYUV: rawData, size: size, rotation: rotation)
         renderNode.geometry?.firstMaterial?.diffuse.contents = rgbTexture
    }
    func shouldInitialize() -> Bool { return setupMetal() }
    func shouldStart() { }
    func shouldStop() { }
    func shouldDispose() { }
}

我们曾在之前《基于ARKit与Agora SDK实现AR视频会议》文章中分享了详细的实现步骤,大家也可以访问声网Agora的Githu查看源码。


声网Agora有奖征文活动 正在进行中,只要分享你与声网SDK相关的开发经验博文,即有机会获得Cherry红轴机械键盘、T恤等声网定制奖品。详情请戳这里或微信咨询(ID:dorianz)。

版权声明:本文为agora_cloud原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/agora_cloud/article/details/80104610

智能推荐

剑指offer 合并两个排序的链表

题目 链接:https://leetcode-cn.com/problems/he-bing-liang-ge-pai-xu-de-lian-biao-lcof/ 思路 我想的是,与合并两个有序数组一样的思维,新建一个链表,然后判断谁的值大,进而在新的链表上面进行插入。 看书思路 合并链表是一个递归问题:合并一个节点后可以转化为一个子问题。终止条件是其中一个链表为空 代码 链表反转也可以用递归解决...

Java编程思想 第三章:操作符

Java中的操作符和c/c++中的操作符基本一致,因为我之前学习过C语言和C++,所以本章的内容大部分都已熟知,下面只做简单的介绍。 Java操作符及优先级 Java中的操作符包括算术操作符,关系操作符,逻辑操作符,位运算符、自操作运算符、移位运算符、赋值运算符和其他运算符。 算术操作符:包括加减乘除和取余(%),优先级乘除取余高于加减,都是双元运算符,其中加法(+)可以用来连接两个字符串,比如:...

JetBrains 系列开发工具,如何配置 `SCSS` `File Watcher` ,相关输出配置参数详解:webStorm phpStorm IDEA

JetBrains 系列开发工具,如何配置 SCSS File Watcher ,相关输出配置参数详解:webStorm phpStorm IDEA 前言 你目前已经了解了如何使用 SCSS 进行开发,了解了该文章的内容:『 SCSS 日常用法 』 在 JetBrains 系列开发工具中通过 FileWatcher 进行编译的 SCSS 文件都是通过 sass 这个程序进行的。『 如何添加 Fil...

C语言小函数—二进制与十六进制

测试如下 “` int main() { long int num = 15; } “`...

仿微博或微信的文章多图显示(自定义MultiImageView)

按照一般的规矩,先上张图来供大伙看看 如果大致是大伙们需要实现的功能,不烦一观 自定义MultiImageView 工具类 具体使用 app.gradle中添加依赖 implementation 'com.github.bumptech.glide:glide:4.8.0' AndroidManifest.xml中配置联网权限 <uses-permission android:name=&q...

猜你喜欢

经典进程同步和互斥问题

经典进程同步与互斥问题 前言 一、生产者-消费者问题 1.问题描述 2.问题分析 3.代码 二、读者-写者问题 1.问题描述&&分析 2.代码 三、哲学家进餐问题 1.问题描述&&分析 2.代码 四、理发师问题 1.问题描述&&分析 2.代码 前言 在多道程序设计环境中,进程同步是一个非常重要的问题,下面讨论几个经典的进程同步问题。 一、生产者-消费...

java设计模式——ThreadLocal线程单例

1、定义一个ThreadLocal线程单例,代码如下: 2、定义一个多线程类,代码如下: 3、定义一个测试类,代码如下: 4、输出结果,如下图:...

【tensorflow】线性模型实战

线性模型:y = 1.477 * x + 0.089   1. 采样数据 采样噪声eps在均值0,方差0.01的高斯分布中,而后在均匀分布U(0,1)中,区间[-10,10]进行n=100次随机采样:   2. 计算误差 循环计算每个点的预测值与真是值之间差的平方并累加,从而获得训练集上的均芳误差损失值。   3. 计算梯度   4. 梯度更新 对权重w和偏...

常见损失函数和评价指标总结(附公式&代码)

网上看到一篇很实用的帖子关于常见损失函数和评价指标,收藏下来 本文转载于https://zhuanlan.zhihu.com/p/91511706 ------------------------------------------------------------------------------------------------------------------------------...

为什么 4G/5G 的直播延时依然很高

通信技术的发展促进了视频点播和直播业务的兴起,4G 和 5G 网络技术的进步也使得流媒体技术变得越来越重要,但是网络技术并不能解决流媒体直播的高延迟问题。 本文不会介绍网络对直播业务的影响,而是会分析直播中常见的现象 — 主播和观众之间能够感觉到的明显网络延迟。除了业务上要求的延迟直播之外,有哪些因素会导致视频直播的延迟这么高呢? live-streaming  图 1 - ...