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() } }
comm