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

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

image

以下为演讲精华摘录:

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

ARKit 如何实现 AR 场景?

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

image

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

image

目前,苹果和 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场景

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

image
let videoSource = ARVideoSource()
agoraKit.setVideoSource(videoSource) 
image
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环境中,实现方式如下。

image
 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查看源码。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,133评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,682评论 3 390
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,784评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,508评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,603评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,607评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,604评论 3 415
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,359评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,805评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,121评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,280评论 1 344
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,959评论 5 339
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,588评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,206评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,442评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,193评论 2 367
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,144评论 2 352

推荐阅读更多精彩内容