Developing A 360 Degree Video Player iOS Application for Offline Users .

Posted in: Blog

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.


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.


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.


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
            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)
            progressObserver = player.addPeriodicTimeObserverForInterval(CMTimeMakeWithSeconds(0.1, Int32(NSEC_PER_SEC)),
                queue: nil,
                usingBlock: { [unowned self] (time) -> Void in

Leave a Reply

Your email address will not be published. Required fields are marked *