iOSネイティブでHLS or mp4などの配信される360度動画をサクッと再生する件 #iOS

まずはじめに

今回の記事では、配信HLSやローカルmp4の360度動画をiOSネイティブでお手軽に再生してしまおうという解説記事を提供します。

使うライブラリについて

今回の実装では、iOS SDK標準以外のSDKについてはつかっていません、使うのは、AVFoundation、SceneKitおよびSpriteKitを使用しています。他のSDKなどの使用および、解説などもしません。

動画読み込みおよび再生

動画の読み込みおよび再生は、AVFoundtionとSpriteKitの２つを使って実装します。動画を読み込みには、まず、AVFoundtionのAVPlayerメソッドを使います。
urlは、動画のアドレスまたは、ローカルのビデオパスを指定します。

let player = AVPlayer(url: url as URL)

そして全天球用のテクスチャとして貼るためにSpriteKitをつかって、スプライト化します。SKVideoNodeは、SceneKitでも使えるNodeとして動作します。ビデオの再生をするために、playメソッドを呼びます。SKSceneとして、sceneを作り、videoNodeを追加しておきます。

videoNode = SKVideoNode(avPlayer: player)
if let videoNode = videoNode {
            let size = CGSize(width: 1280,height: 720)
            videoNode.size = size
            videoNode.position = CGPoint(x: size.width/2.0,y: size.height/2.0)
            let spriteScene = SKScene(size: size)
}
spriteScene.addChild(videoNode)
videoNode?.play()

全天球モデルの生成

次に全天球用の球を作るメソッドを作成しました。

func createSphereNode(material: AnyObject?) -> SCNNode {
        let sphere = SCNSphere(radius: 20.0)
        sphere.firstMaterial!.isDoubleSided = true
        sphere.firstMaterial!.diffuse.contents = material
        let sphereNode = SCNNode(geometry: sphere)
        sphereNode.position = SCNVector3Make(0,0,0)
        return sphereNode
    }

sphere.firstMaterial!.diffuse.contentsにはさまざまな、オブジェクトを設定でき、このあたりは,contentsの定義をみてみると、ドキュメントにはありませんが、その説明がコメントしてソースに書いてありました。SKSceneも設定でき、先程のSKVideoから作成したsceneをmaterialに設定します。

その他:端末のモーションセンサーを使った画面の回転

Facebookの360度動画などでもある、端末を回転すると360度動画のほうも回転する機能を次のように定義してみました。

func startCameraTracking() {
        motionManager.deviceMotionUpdateInterval = 1.0 / 60.0
        motionManager.startDeviceMotionUpdates(to: OperationQueue.main) { [weak self] (data: CMDeviceMotion?,error: Error?) in
            guard let data = data else { return }
            let attitude: CMAttitude = data.attitude
            self?.cameraNode.eulerAngles = SCNVector3Make(Float(attitude.roll + Double.pi/2.0), -Float(attitude.yaw), -Float(attitude.pitch))
        };
    }

まとめ

HLSの再生mp4動画の再生および360度に展開する部分のコードを提示した、また再生された動画を全天球のモデルを生成した上で、そのモデルに展開する方法をしめした。

ソースコード

2019/4/22の最新環境でビルド可能なソースコード
https://github.com/tarotaro/360Video