AR实践：结合ARKit与Agora SDK实现电影中的全息视频会议-白红宇

AR实践：结合ARKit与Agora SDK实现电影中的全息视频会议

阅读量：6156 次

发布时间：2019-06-21

本文共 7205 字，大约阅读时间需要 24 分钟。

作者：龚宇华，声网Agora.io 首席iOS研发工程师，负责iOS端移动应用产品设计和技术架构。

去年中旬，苹果在 WWDC2017 推出了 ARKit。通过它，开发者可以更加快速地在 iOS 平台开发 AR 应用，利用镜头将虚拟照进现实。最近苹果还增强了 iOS 系统对 ARKit的支持，并将加大对 AR 应用的推广力度。

在本篇中，我们将会把 ARKit 融入视频会议场景中。本文将会介绍视频中两种场景的实现：

将 ARKit 融入直播中

将直播连麦的对方画面渲染到 AR 场景中

我们将一起在直播场景中利用 ARKit 实现平面检测，还将应用到 Agora SDK 2.1 的新功能“自定义视频源与渲染器”。如果你在此之前还未了解过 ARKit 的基本类及其原理，可以先阅读《》。

不多说，先上效果图。尽管与电影中看到的全息视频会议效果还有距离，但大家可以试着对后期效果优化无限接近电影场景（文末有源码）。我们在这里仅分享利用 AR 在视频会议中的实现技巧。

准备工作1：基础的AR功能

我们首先使用ARKit创建一个简单的识别平面的应用做为开发基础。

在Xcode中使用 Augmented Reality App 模版创建一个新项目，其中 Content Technology 选择 SceneKit.

启动平面检测

在 ViewController 中设置 ARConfiguration 为平面检测。

override func viewDidLoad() {    super.viewDidLoad()        sceneView.delegate = self    sceneView.session.delegate = self    sceneView.showsStatistics = true}override func viewWillAppear(_ animated: Bool) {    super.viewWillAppear(animated)        let configuration = ARWorldTrackingConfiguration()    configuration.planeDetection = .horizontal    sceneView.session.run(configuration)}

显示识别出的平面

实现 ARSCNViewDelegate 的回调方法 renderer:didAddNode:forAnchor: ，在识别出的平面上添加一个红色的面。

func renderer(_ renderer: SCNSceneRenderer, didAdd node: SCNNode, for anchor: ARAnchor) {    guard let planeAnchor = anchor as? ARPlaneAnchor else {        return    }            // 创建红色平面模型    let plane = SCNBox(width: CGFloat(planeAnchor.extent.x),                       height: CGFloat(planeAnchor.extent.y),                       length: CGFloat(planeAnchor.extent.z),                       chamferRadius: 0)    plane.firstMaterial?.diffuse.contents = UIColor.red            // 用模型生成 Node 对象并添加到识别出的平面上    let planeNode = SCNNode(geometry: plane)    node.addChildNode(planeNode)            // 渐隐消失    planeNode.runAction(SCNAction.fadeOut(duration: 1))}

这样就完成了一个最简单的AR应用，当识别出环境中的平面时，会在上面添加一个红色的矩形，并渐隐消失。

准备工作2：基础的直播功能

接下来我们需要使用 Agora SDK 在应用中添加直播功能。

首先在官网下载最新的 SDK 包并添加到我们的 Demo 中。接着在 ViewController 中添加 AgoraRtcEngineKit 的实例，并且进行直播相关的设置。

let agoraKit: AgoraRtcEngineKit = {    let engine = AgoraRtcEngineKit.sharedEngine(withAppId: <#Your AppId#>, delegate: nil)    engine.setChannelProfile(.liveBroadcasting)    engine.setClientRole(.broadcaster)    engine.enableVideo()    return engine}()

最后在 viewDidLoad 方法中加入频道。

agoraKit.delegate = selfagoraKit.joinChannel(byToken: nil, channelId: "agoraar", info: nil, uid: 0, joinSuccess: nil)

至此，所有的准备工作都已经完成，我们有了一个可以识别平面的AR应用，同时又可以进行音视频通话，接下来要做的就是把这两个功能结合起来。

将 ARKit 的画面直播出去

因为 ARKit 已经占用了设备摄像头，我们无法自己启动 AVCaptureSession 进行采集。幸好 ARFrame 的 capturedImage 接口提供了摄像头采集到的数据可以供我们直接使用。

添加自定义视频源

为了发送视频数据，我们需要构造一个实现了 AgoraVideoSourceProtocol 协议的类 ARVideoSource 。其中 bufferType 返回 AgoraVideoBufferTypePixelBuffer 类型。

class ARVideoSource: NSObject, AgoraVideoSourceProtocol {    var consumer: AgoraVideoFrameConsumer?            func shouldInitialize() -> Bool { return true }            func shouldStart() { }            func shouldStop() { }            func shouldDispose() { }            func bufferType() -> AgoraVideoBufferType {        return .pixelBuffer    }}

给这个 ARVideoSource 类添加一个发送视频帧的方法：

func sendBuffer(_ buffer: CVPixelBuffer, timestamp: TimeInterval) {    let time = CMTime(seconds: timestamp, preferredTimescale: 10000)    consumer?.consumePixelBuffer(buffer, withTimestamp: time, rotation: .rotationNone)}

接着在 ViewController 中实例化一个 ARVideoSource, 并在 viewDidLoad 中通过 setVideoSource 接口设置给 Agora SDK

let videoSource = ARVideoSource()override func viewDidLoad() {    ……    agoraKit.setVideoSource(videoSource)    ……}

这样在我们需要的时候，只要调用 videoSource 的 sendBuffer:timestamp: 方法，就可以把视频帧传给 Agora SDK 了。

发送摄像头数据

我们可以通过 ARSession 的回调拿到每一帧 ARFrame ，从中读出摄像头的数据，并使用 videoSource 发送出去。

在 viewDidLoad 中设置 ARSession 的回调

sceneView.session.delegate = self

实现 ARSessionDelegate 回调，读取每一帧的摄像头数据，并传给 Agora SDK 。

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

发送 ARSCNView 数据

ARFrame 的 capturedImage 是摄像头采集到的原始数据，如果我们想发送的是已经添加好虚拟物体的画面，那就只能自己获取 ARSCNView 的数据了。这里提供一种简单的思路：设定一个定时器，定时去将 SCNView 转为 UIImage，接着转换为CVPixelBuffer，然后提供给 videoSource。下面只提供了示例逻辑代码。

func startCaptureView() {    // 0.1秒间隔的定时器    timer.schedule(deadline: .now(), repeating: .milliseconds(100))        timer.setEventHandler { [unowned self] in        // 将 sceneView 数据变成 UIImage        let sceneImage: UIImage = self.image(ofView: self.sceneView)                // 转化为 CVPixelBuffer 后提供给 Agora SDK        self.videoSourceQueue.async { [unowned self] in            let buffer: CVPixelBuffer = self.pixelBuffer(ofImage: sceneImage)            self.videoSource.sendBuffer(buffer, timestamp: Double(mach_absolute_time()))        }    }        timer.resume()}

将直播连麦的对方画面渲染到 AR 场景中

我们可以先在 AR 场景中添加一个 SCNNode, 接着通过 Metal 把连麦对方的视频数据渲染到 SCNNode 上。这样即可实现在 AR 环境中显示连麦端的画面。

添加虚拟显示屏

首先我们需要创建用来渲染远端视频的虚拟显示屏，并通过用户的点击添加到 AR 场景中。

在 Storyboard 中给 ARSCNView 添加一个 UITapGestureRecognizer，当用户点击屏幕后，通过 ARSCNView 的 hitTest 方法得到在平面上的位置，并把一个虚拟显示屏放在点击的位置上。

@IBAction func doSceneViewTapped(_ recognizer: UITapGestureRecognizer) {    let location = recognizer.location(in: sceneView)        guard let result = sceneView.hitTest(location, types: .existingPlane).first else {        return    }        let scene = SCNScene(named: "art.scnassets/displayer.scn")!    let rootNode = scene.rootNode    rootNode.simdTransform = result.worldTransform    sceneView.scene.rootNode.addChildNode(rootNode)            let displayer = rootNode.childNode(withName: "displayer", recursively: false)!    let screen = displayer.childNode(withName: "screen", recursively: false)!            unusedScreenNodes.append(screen)}

用户通过点击可以添加多个显示屏，并被存在 unusedScreenNodes 数组中待用。

添加自定义视频渲染器

为了从 Agora SDK 获取到远端的视频数据，我们需要构造一个实现了 AgoraVideoSinkProtocol 协议的类型 ARVideoRenderer。

class ARVideoRenderer: NSObject {    var renderNode: SCNNode?}extension ARVideoRenderer: AgoraVideoSinkProtocol {    func shouldInitialize() -> Bool { return true }            func shouldStart() { }            func shouldStop() { }            func shouldDispose() { }            func bufferType() -> AgoraVideoBufferType {        return .rawData    }        func pixelFormat() -> AgoraVideoPixelFormat {        return .I420    }        func renderRawData(_ rawData: UnsafeMutableRawPointer, size: CGSize, rotation: AgoraVideoRotation) {        ……    }}

通过 renderRawData:size:rotation: 方法可以拿到远端的视频数据，然后就可以使用 Metal 渲染到 SCNNode 上。具体的 Metal 渲染代码可以参考文末的完整版 Demo.

将自定义渲染器设置给 Agora SDK

通过实现 AgoraRtcEngineDelegate 协议的 rtcEngine:didJoinedOfUid:elapsed: 回调，可以得到连麦者加入频道的事件。在回调中创建 ARVideoRenderer 的实例，把前面用户通过点击屏幕创建的虚拟显示屏 Node 设置给 ARVideoRenderer，最后通过 setRemoteVideoRenderer:forUserId: 接口把自定义渲染器设置给 Agora SDK。

func rtcEngine(_ engine: AgoraRtcEngineKit, didJoinedOfUid uid: UInt, elapsed: Int) {    guard !unusedScreenNodes.isEmpty else {        return    }            let screenNode = unusedScreenNodes.removeFirst()    let renderer = ARVideoRenderer()    renderer.renderNode = screenNode            agoraKit.setRemoteVideoRenderer(renderer, forUserId: uid)}

这样当连麦端加入频道后，就会在虚拟显示屏上显示对方的视频，得到一个虚拟会议室的效果，正如我们在文章开头所看到的。