Cómo reproducir video 360 en el dispositivo iOS

Mirando a través de diferentes sitios web y parsing diferentes resources, descubrí que para reproducir 360 videos en el iPhone, debería usar 3-party lib ( Panotwig ). Pero estoy realmente interesado en cómo es posible hacerlo por su count. Porque los elementos estándar de iOS no son compatibles con dicha funcionalidad.

Por favor, dé algunos consejos sobre los enfoques que debería usar para crear un reproductor propio para 360 videos.

Puede hacerlo utilizando el kit de escena, sin bibliotecas o dependencies externas.

Cree un SCNScene y asigne su camera a los movimientos del dispositivo. Las cameras están un poco desviadas para mapear una por ojo y crear un efecto estereoscópico 3D.

 override func viewDidLoad() { super.viewDidLoad() leftSceneView?.backgroundColor = UIColor.blackColor() rightSceneView?.backgroundColor = UIColor.whiteColor() // Create Scene scene = SCNScene() leftSceneView?.scene = scene rightSceneView?.scene = scene // Create cameras let camX = 0.0 as Float let camY = 0.0 as Float let camZ = 0.0 as Float let zFar = 50.0 let leftCamera = SCNCamera() let rightCamera = SCNCamera() leftCamera.zFar = zFar rightCamera.zFar = zFar let leftCameraNode = SCNNode() leftCameraNode.camera = leftCamera leftCameraNode.position = SCNVector3(x: camX - 0.5, y: camY, z: camZ) let rightCameraNode = SCNNode() rightCameraNode.camera = rightCamera rightCameraNode.position = SCNVector3(x: camX + 0.5, y: camY, z: camZ) camerasNode = SCNNode() camerasNode!.position = SCNVector3(x: camX, y:camY, z:camZ) camerasNode!.addChildNode(leftCameraNode) camerasNode!.addChildNode(rightCameraNode) camerasNode!.eulerAngles = SCNVector3Make(degreesToRadians(-90.0), 0, 0) cameraRollNode = SCNNode() cameraRollNode!.addChildNode(camerasNode!) cameraPitchNode = SCNNode() cameraPitchNode!.addChildNode(cameraRollNode!) cameraYawNode = SCNNode() cameraYawNode!.addChildNode(cameraPitchNode!) scene!.rootNode.addChildNode(cameraYawNode!) leftSceneView?.pointOfView = leftCameraNode rightSceneView?.pointOfView = rightCameraNode // Respond to user head movement. Refreshes the position of the camera 60 times per second. motionManager = CMMotionManager() motionManager?.deviceMotionUpdateInterval = 1.0 / 60.0 motionManager?.startDeviceMotionUpdatesUsingReferenceFrame(CMAttitudeReferenceFrame.XArbitraryZVertical) leftSceneView?.delegate = self leftSceneView?.playing = true rightSceneView?.playing = true } 

Actualice la position de la camera en sceneRenderer:

 func renderer(aRenderer: SCNSceneRenderer, updateAtTime time: NSTimeInterval){ // Render the scene dispatch_async(dispatch_get_main_queue()) { () -> Void in if let mm = self.motionManager, let motion = mm.deviceMotion { let currentAttitude = motion.attitude var orientationMultiplier = 1.0 if(UIApplication.shanetworkingApplication().statusBarOrientation == UIInterfaceOrientation.LandscapeRight){ orientationMultiplier = -1.0} self.cameraRollNode!.eulerAngles.x = Float(currentAttitude.roll * orientationMultiplier) self.cameraPitchNode!.eulerAngles.z = Float(currentAttitude.pitch) self.cameraYawNode!.eulerAngles.y = Float(currentAttitude.yaw) } } } 

Aquí hay un código para agregar una SCNSphere que muestra un AVPlayer.

 func play(){ //let fileURL: NSURL? = NSURL(string: "http://www.kolor.com/360-videos-files/noa-neal-graffiti-360-music-video-full-hd.mp4") let fileURL: NSURL? = NSURL.fileURLWithPath(NSBundle.mainBundle().pathForResource("vr", ofType: "mp4")!) if (fileURL != nil){ videoSpriteKitNode = SKVideoNode(AVPlayer: AVPlayer(URL: fileURL!)) 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!) videoSpriteKitNode!.play() playingVideo = true } } 

He creado un proyecto en github para mostrar cómo, ¡con instrucciones que deberían ser claras!

Funciona también en VR con una cartulina Google.

https://github.com/Aralekk/simple360player_iOS

Aparte del repago de Aralekk , he encontrado que el reparto de hanton es útil al crear mi propio reproductor de video de 360 ​​°. Aquí está el enlace a mi repository y aquí está el blogpost relacionado.

Implementé una solución similar usando SceneKit para iOS aquí: ThreeSixtyPlayer .

En mi opinión, este código es un poco más simple y más escalable que otras soluciones. Sin embargo, es solo lo básico (no hay reproducción estereoscópica, solo admite geometry de esfera, no admite cartulina, etc.).