您当前的位置是:  首页 > 新闻 > 文章精选 >
 首页 > 新闻 > 文章精选 >

声网龚宇华:详解如何在实时视频通话中实现AR功能

2018-04-25 11:22:20   作者:   来源:CTI论坛   评论:0  点击:


  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、实现视频会议,然后把它两个结合起来。”龚宇华表示。
  目前,苹果和 Google 分别推出了 ARKit 和 ARCore,为我们在移动端实现 AR 场景降低了门槛。实现AR的原理是怎样的呢?我们以 ARKit为例,来看下它是如何工作的。如刚刚所说,AR 就是在实际环境中植入虚拟元素,那么首先要识别出周围环境,也就是通过 iPhone 的摄像头来实现。在手机加速计、陀螺仪的帮助下,ARKit 可以识别3D 的环境并判断手机在环境中的姿态。
  通过以上实现过程,我们很容易理解 ARKit 的限制,比如:
  • 光线差:没有足够的光或光线过强的镜面反光。尝试避免这些光线差的环境。
  • 缺少纹理:如果摄像头指向一面白墙,那也没法获得特征,ARKit 也去无法找到并追踪用户。尝试避免看向纯色、反光表面等地方。
  • 快速移动:通常情况下检测和估算 3D 姿态只会借助图片,如果摄像头移动太快图片就会糊,从而导致追踪失败。但 ARKit 会利用视觉惯性里程计,综合图片信息和设备运动传感器来估计用户转向的位置。因此 ARKit 在追踪方面非常强大。
  在完成环境识别之后,还需要渲染,通常我们会想到使用 OpenGL 或 Metal 渲染,但是它们的开发成本比较高,所以苹果想了一办法,就是通过 SceneKit 进行渲染。
  我们可以通过以下几行代码实现 AR,也就是“将大象关进冰箱”的第一步。
  1. @IBOutlet weak var sceneView: ARSCNView!
  2. override func viewDidAppear(_ animated: Bool) {
  3. super.viewDidAppear(animated)
  4. guard ARWorldTrackingConfiguration.isSupported else {
  5. return
  6. }
  7. let configuration = ARWorldTrackingConfiguration()
  8. configuration.planeDetection = .horizontal
  9. sceneView.session.run(configuration)
  10. }
  实现视频通话功能
  我们可以通过声网Agora SDK 来快速实现视频通话。在这样的视频通话场景中,声网Agora SDK 具备几个优势:
  • 低延时:声网SDK 实时通讯网络,可实现全球百毫秒级音视频通话;
  • 快速集成:开发者最快可在30分钟内完成集成;
  • 全球化部署:支持全球200多个国家与地区。
  在下载最新版声网Agora SDK 后,将其添加到我们的 AR Demo 中。通过以下代码,可以基于 Agora 实现视频会议。
  1// 初始化引擎
  2let agoraKit = AgoraRtcEngineKit.sharedEngine(withAppId: myAppId,
  3                                              delegate: self)
  4// 设置为发送端
  5agoraKit.setChannelProfile(.liveBroadcasting)
  6agoraKit.setClientRole(.broadcaster)
  7agoraKit.enableVideo()
  8// 加入会议
  9agoraKit.joinChannel(byToken: nil,
  10                     channelId: “QCon2018”,
  11                     info: nil,
  12                     uid: 0,
  13                     joinSuccess: nil)
  将视频通话融入AR场景
  在完成视频会议的搭建之后,我们还需要传输本地视频与音频。
  1let videoSource = ARVideoSource()
  2agoraKit.setVideoSource(videoSource)
  1func session(_ session: ARSession, didUpdate frame: ARFrame) {
  2    videoSource.sendBuffer(frame.capturedImage, timestamp: frame.timestamp)
  3}
  1agoraKit.enableExternalAudioSource(withSampleRate: 44100, channelsPerFrame: 1)
  1func session(_ session: ARSession, didOutputAudioSampleBuffer audioSampleBuffer: CMSampleBuffer) {
  2    agoraKit.pushExternalAudioFrameSampleBuffer(audioSampleBuffer)
  3}
  最后,当我们通过SDK获得了其它用户发来的音视频数据后,我们还需要将其渲染到AR环境中,实现方式如下。
  1class ARVideoRenderer : NSObject, AgoraVideoSinkProtocol {
  2    var renderNode: SCNNode!
  3    func bufferType() -> AgoraVideoBufferType { return .rawData }
  4    func pixelFormat() -> AgoraVideoPixelFormat { return .I420 }
  5    func renderRawData(_ rawData: UnsafeMutableRawPointer,
  6                       size: CGSize,
  7                       rotation: AgoraVideoRotation) {
  8        let rgbTexture = createTexture(widthYUV: rawData, size: size, rotation: rotation)
  9        renderNode.geometry?.firstMaterial?.diffuse.contents = rgbTexture
  10    }
  11    func shouldInitialize() -> Bool { return setupMetal() }
  12    func shouldStart() { }
  13    func shouldStop() { }
  14    func shouldDispose() { }
  15}
  我们曾在之前《基于ARKit与Agora SDK实现AR视频会议》文章中分享了详细的实现步骤,大家也可以访问「阅读原文」查看源码。
  声网Agora 有奖征文活动 正在进行中,只要在5月25日前分享你与声网Agora SDK 相关的开发经验,即有机会获得机械键盘、T恤等声网定制奖品。报名与活动咨询,关注微信公众号后台留言。点击图片了解更多活动详情。
 
【免责声明】本文仅代表作者本人观点,与CTI论坛无关。CTI论坛对文中陈述、观点判断保持中立,不对所包含内容的准确性、可靠性或完整性提供任何明示或暗示的保证。请读者仅作参考,并请自行承担全部责任。

专题