AR實踐：基於ARKit實現電影中的全息視頻會議

做者簡介：龔宇華，聲網Agora.io 首席iOS研發工程師，負責iOS端移動應用產品設計和技術架構。

去年中旬，蘋果在 WWDC2017 推出了 ARKit。經過它，開發者能夠更加快速地在 iOS 平臺開發 AR 應用，利用鏡頭將虛擬照進現實。最近蘋果還加強了 iOS 系統對 ARKit的支持，並將加大對 AR 應用的推廣力度。

在本篇中，咱們將會把 ARKit 融入視頻會議場景中。本文將會介紹視頻中兩種場景的實現：

• 將 ARKit 融入直播中

• 將直播連麥的對方畫面渲染到 AR 場景中

咱們將一塊兒在直播場景中利用 ARKit 實現平面檢測，還將應用到 Agora SDK 2.1 的新功能「自定義視頻源與渲染器」。若是你在此以前還未了解過 ARKit 的基本類及其原理，能夠先閱讀《上篇：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 = self
agoraKit.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)
}
複製代碼

這樣當連麥端加入頻道後，就會在虛擬顯示屏上顯示對方的視頻，獲得一個虛擬會議室的效果，正如咱們在文章開頭所看到的。

總結

用最新 2.1 版 Agora SDK 的自定義視頻源和自定義視頻渲染器接口，能夠輕鬆地把 AR 和直播場景結合起來。Demo 基於 Agora SDK 以及 SD-RTN™ 運行，能夠支持17人的同時視頻連麥。能夠預見，AR 技術會爲實時視頻連麥帶來全新的體驗。

完整 Demo 請見 Github

如遇到開發問題，歡迎訪問聲網 Agora問答版塊，發帖與咱們的工程師交流。