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

szysky 发布于2019-07-16 16:21 / 1162人阅读

摘要：声网首席研发工程师，端移动应用产品设计和技术架构负责人龚宇华，受邀分享了基于和，在实时视频通话中实现功能，在演讲中剖析了与差异，的工作原理，以及逐步讲解如何基于与声网创建视频会议场景。实现视频通话功能我们可以通过声网来快速实现视频通话。

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）。

idc机房托管超融合服务器在浏览器中实现webrtc视频传输 fec在webrtc中实现中实现单点登录 asp中实现登录

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/34740.html

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

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

gitmilk 2019-06-25 16:44 评论0 收藏0
如何快速实现FaceTime多人视频效果

摘要：我们今天来分享几个往年的热门话题，并讲解基于声网如何来实现。如果基于声网来实现，我们只需要利用控制好对音频视频流的发送逻辑即可。如果你基于声网尝试实现了其它效果，并写在自己的博客中，欢迎在评论中分享。一年一度的 WWDC 开幕了。我们看了来自各个勤劳媒体的回顾与解读。在这些新功能中，最吸引我们的还是最新更新的 FaceTime。这次 FaceTime 不仅开始支持群组视频通话，还可...

ashe 2019-06-25 16:49 评论0 收藏0
开发一个实时音视频通信系统，你需要什么技术储备？

摘要：实时通讯系统是最近互联网应用的一个新领域。现在的问题是，开发一个优秀的系统需要具备哪些技术储备呢先看终端方面。各个平台，，，底层音频系统也需要深入了解。互联网不是一个可靠的实时音视频传输网络。现在我们知道开发一个系统需要什么技术了。 RTC(real time communication)实时通讯系统是最近互联网应用的一个新领域。RTC系统的应用极其广泛，我们常见的视频电话，会议系统，...

tomato 2019-07-16 16:01 评论0 收藏0
开发一个实时音视频通信系统，你需要什么技术储备？

摘要：实时通讯系统是最近互联网应用的一个新领域。现在的问题是，开发一个优秀的系统需要具备哪些技术储备呢先看终端方面。各个平台，，，底层音频系统也需要深入了解。互联网不是一个可靠的实时音视频传输网络。现在我们知道开发一个系统需要什么技术了。 RTC(real time communication)实时通讯系统是最近互联网应用的一个新领域。RTC系统的应用极其广泛，我们常见的视频电话，会议系统，...

church 2019-06-21 16:14 评论0 收藏0
前端开发周报: CSS 布局方式与JavaScript数据结构和算法

摘要：如果没有学习过计算机科学的程序员，当我们在处理一些问题时，比较熟悉的数据结构就是数组，数组无疑是一个很好的选择。 showImg(https://segmentfault.com/img/bVTSjt?w=400&h=300); 1、常见 CSS 布局方式详见：一些常见的 CSS 布局方式梳理，涉及 Flex 布局、Grid 布局、圣杯布局、双飞翼布局等。http://cherryb...

huhud 2019-08-20 18:59 评论0 收藏0