Как играть в 360 видео на устройстве iOS

Question

Просмотрев различные веб-сайты и проанализировав разные ресурсы, я узнал, что для воспроизведения 360 видеороликов на iPhone вы должны использовать 3-стороннюю партию (Panorama). Но меня действительно интересует, как это можно сделать по своему усмотрению. Поскольку стандартные элементы iOS не поддерживают такую ​​функциональность.

Просьба дать несколько советов о подходах, которые я должен использовать для создания собственного проигрывателя для 360 видеороликов.

Answer 1

Вы можете сделать это с помощью сценария, без каких-либо внешних библиотек или зависимостей.

Создайте SCNScene и переместите камеру на движения устройства. Камеры немного смещены так, чтобы отображать один на глаз и создавать 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   
} 

Обновить положение камеры в 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.sharedApplication().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) 

     } 
    } 
} 

Вот код для добавления SCNSphere отображения 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 
    } 
} 

Я собрал проект на github, чтобы показать, как с инструкциями, которые должны быть понятны!

Работы в VR тоже с картоном Google.

https://github.com/Aralekk/simple360player_iOS

Answer 2

Помимо Aralekk's репо, я обнаружил hanton's репо полезным при создании моего собственного видео 360 ° плеера. Here - это ссылка на мой репо и here связан с блогами.

Answer 3

Я реализовал аналогичное решение, используя SceneKit для iOS здесь: ThreeSixtyPlayer.

По-моему, этот код немного проще и масштабируемо, чем другие решения. Это, однако, только основы (без стереоскопического воспроизведения, только поддерживает геометрию сферы, еще не поддерживает картон и т. Д.).