Cách phát video 360 trên thiết bị iOS

Question

Xem qua các trang web khác nhau và phân tích các tài nguyên khác nhau Tôi phát hiện ra rằng để phát video 360 trên iPhone, bạn nên sử dụng lib bên 3-d (Panorama). Nhưng tôi thực sự quan tâm đến việc làm thế nào bạn có thể tự làm được. Vì các phần tử iOS chuẩn không hỗ trợ chức năng như vậy.

Vui lòng cung cấp một số lời khuyên về các cách tiếp cận mà tôi nên sử dụng để tạo trình phát riêng cho video 360.

Answer 1

Bạn có thể làm điều đó bằng cách sử dụng bộ khung cảnh, không có bất kỳ thư viện hoặc phụ thuộc bên ngoài nào.

Tạo một SCNScene và ánh xạ máy ảnh của bạn theo chuyển động của thiết bị. Các máy ảnh có một chút bù đắp như vậy để lập bản đồ một mắt và tạo hiệu ứng lập thể 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   
} 

Cập nhật vị trí máy ảnh trong 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) 

     } 
    } 
} 

Dưới đây là một số mã để thêm một SCNSphere hiển thị một 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 
    } 
} 

Tôi đã kết hợp một dự án trên github để hiển thị như thế nào, với hướng dẫn phải rõ ràng!

Hoạt động với VR bằng tông Google.

https://github.com/Aralekk/simple360player_iOS

Answer 2

Ngoài Aralekk's repo, tôi đã tìm thấy hanton's repo hữu ích khi tạo video của riêng tôi 360 ° người chơi. Here là liên kết đến repo của tôi và here là blogpost có liên quan.

Answer 3

Tôi đã triển khai giải pháp tương tự bằng SceneKit cho iOS tại đây: ThreeSixtyPlayer.

Theo ý kiến ​​của tôi, mã này đơn giản hơn và dễ mở rộng hơn các giải pháp khác ngoài đó. Tuy nhiên đó chỉ là những điều cơ bản (không phát lại lập thể, chỉ hỗ trợ hình học hình cầu, chưa hỗ trợ các tông, v.v.).