Recently, many social media platforms such as Facebook and YouTube have started the functionality of 360 degree videos. This new trend has acquired great attention since then. It manifests panoramic views of the real-world in the form of video recordings. The user can capture the view in any direction and from any angle, all at the same time.

Problem

Nowadays, cameras are available in the market that can create 360 degree videos. However, there must be an application on the mobile end as well, where the user can see these 360 degree videos offline from any source.

Solution

Our engineer, Ghulam Rasool, developed a video player application for an iOS client that displayed offline version of 360 degree videos, successfully. Native iOS libraries provided by Apple have been implemented in this video player. Thus, making it 100% Native. No other cross platform tool or web view client had been used during the development of this application.

SpriteKit, SceneKit and different kinds of gestures including swipe gesture, pan gesture, etc. were enabled. These gestures allowed video player users to slide or swipe in any direction, angle or place in order to see the video. As a result, the offline user experience was enhanced.

Code

The code has been written in Swift. Below is the sample code for playing any 360 degree video:

    func play(){

        let fileURL: NSURL? = NSURL.fileURLWithPath(NSBundle.mainBundle().pathForResource("a", ofType: "formate")!)
        
        if (fileURL != nil){
            
            player = AVPlayer(URL: fileURL!)
            
            videoSpriteKitNode =  SKVideoNode(AVPlayer: player)
            videoNode = SCNNode()
            videoNode!.geometry = SCNSphere(radius: 30)
            
            let spriteKitScene = SKScene(size: CGSize(width: 2500, height: 2500))
            spriteKitScene.scaleMode = .AspectFit
            
            videoSpriteKitNode!.position = CGPoint(x: spriteKitScene.size.width / 2.0, y: spriteKitScene.size.height / 2.0)
            videoSpriteKitNode!.size = spriteKitScene.size
            
            spriteKitScene.addChild(videoSpriteKitNode!)
            
            videoNode!.geometry?.firstMaterial?.diffuse.contents = spriteKitScene
            videoNode!.geometry?.firstMaterial?.doubleSided = true
            
            // Flip video upside down, so that it's shown in the right position
            var transform = SCNMatrix4MakeRotation(Float(M_PI), 0.0, 0.0, 1.0)
            transform = SCNMatrix4Translate(transform, 1.0, 1.0, 0.0)
            
            videoNode!.pivot = SCNMatrix4MakeRotation(Float(M_PI_2), 0.0, -1.0, 0.0)
            videoNode!.geometry?.firstMaterial?.diffuse.contentsTransform = transform
            videoNode!.position = SCNVector3(x: 0, y: 0, z: 0)
            
            scene!.rootNode.addChildNode(videoNode!)
            
            progressObserver = player.addPeriodicTimeObserverForInterval(CMTimeMakeWithSeconds(0.1, Int32(NSEC_PER_SEC)),
                queue: nil,
                usingBlock: { [unowned self] (time) -> Void in
                    self.updateSliderProgression()
                })
            
            playPausePlayer()
        }
    }