ios - 在 ARKit 上使用 YoutubePlayerView

Question

我正在开发 ARKit 应用程序，我正在检测平面图并使用 YoutubePlayerView 添加 YouTube 视频 pod 浮出水面。我设法检测到表面并添加了 YouTubePlayerView。

播放 YourTube 视频中的音频但不显示视频。

有没有人以前遇到过同样的问题。

以下是我的代码。

    import UIKit
    import SceneKit
    import ARKit
    import YoutubePlayerView
     
    class ViewController: UIViewController, ARSCNViewDelegate {
     
    @IBOutlet var sceneView: ARSCNView!
    let videoPlayerNode = SCNNode()
     
        override func viewDidLoad() {
            super.viewDidLoad()
            // Set the view's delegate
            sceneView.delegate = self
     
            // Show statistics such as fps and timing information
            sceneView.showsStatistics = true
        }
     
        override func viewWillAppear(_ animated: Bool) {
            super.viewWillAppear(animated)
     
            // Create a session configuration
            let configuration = ARWorldTrackingConfiguration()
     
            // Enable horizontal plane detection
            configuration.planeDetection = .horizontal
     
            // show Feature Points
            sceneView.debugOptions = [ARSCNDebugOptions.showFeaturePoints]
     
            // Run the view's session
            sceneView.session.run(configuration)
        }
     
        override func viewWillDisappear(_ animated: Bool) {
            super.viewWillDisappear(animated)
     
            // Pause the view's session
            sceneView.session.pause()
        }
     
        func renderer(_ renderer: SCNSceneRenderer, didAdd node: SCNNode, for anchor: ARAnchor) {
     
            if let planeAnchor = anchor as? ARPlaneAnchor {
     
            let videoPlayerGeometry = SCNPlane(width: CGFloat(planeAnchor.extent.x), height: CGFloat(planeAnchor.extent.z))
     
            DispatchQueue.main.async {
                let playerView = YoutubePlayerView(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
                let playerVars: [String: Any] = [
                                    "controls": 1,
                                    "modestbranding": 1,
                                    "playsinline": 1,
                                    "autoplay": 1,
                                    "origin": "https://youtube.com"
                ]
                playerView.delegate = self
                playerView.loadWithVideoId("w277oTvoKAM", with: playerVars) // CdXesX6mYUE

                videoPlayerGeometry.firstMaterial?.diffuse.contents = playerView
                self.videoPlayerNode.geometry = videoPlayerGeometry
                self.videoPlayerNode.eulerAngles.x = -.pi / 2
                node.addChildNode(self.videoPlayerNode)
                }
            }
        }
    }
     
     
    extension ViewController: YoutubePlayerViewDelegate {
        func playerViewDidBecomeReady(_ playerView: YoutubePlayerView) {
            print("Ready")
            playerView.fetchPlayerState { (state) in
            print("Fetch Player State: \(state)")
        }
     
        func playerView(_ playerView: YoutubePlayerView, didChangedToState state: YoutubePlayerState) {
            print("Changed to state: \(state)")
        }
     
        func playerView(_ playerView: YoutubePlayerView, didChangeToQuality quality: YoutubePlaybackQuality) {
            print("Changed to quality: \(quality)")
        }
     
        func playerView(_ playerView: YoutubePlayerView, receivedError error: Error) {
            print("Error: \(error)")
        }
     
        func playerView(_ playerView: YoutubePlayerView, didPlayTime time: Float) {
            print("Play time: \(time)")
        }
     
        func playerViewPreferredInitialLoadingView(_ playerView: YoutubePlayerView) -> UIView? {
            let view = UIView()
            view.backgroundColor = .red
            return view
        }
    }

谢谢!

Answer 1

主要问题是使用 UIView 而不是使用 SpriteKit 的场景或 AVPlayer:

videoPlayerGeometry.firstMaterial?.diffuse.contents = skScene

或:

videoPlayerGeometry.firstMaterial?.diffuse.contents = avPlayer

以下是 .contents 实例属性的可能候选者:

• NSColor/UIColor/CGColor
• NS编号
• NSImage/UIImage/CGImage
• AVPlayer 中的 NSString 或 NSURL 对象
• CALayer
• SKTexture/MDLTexture/MTLTexture
• SpriteKit 场景
• 由六张图片组成的特殊格式数组的立方体贴图

您还错过了网址中的 /watch?v=:

let playerVars: [String: Any] = [ "controls" : 1,
                                  "modestbranding" : 1,
                                  "playsinline" : 1,
                                  "autoplay" : 1,
                                  "origin" : "https://www.youtube.com/embed/"
                                ]

playerView.loadWithVideoId("w277oTvoKAM", with: playerVars)

如果它不起作用，请尝试 https://www.youtube.com/embed/w277oTvoKAM。

此外，全局声明您的 playerView 属性。并将 playerView.delegate 放入 viewDidLoad() 方法中:

override func viewDidLoad() {
    super.viewDidLoad()

    sceneView.delegate = self
    playerView.delegate = self   // a delegate for using playerView() methods
}

附言

在 ARKit 应用中播放视频作为纹理的常规方法不适用于 YouTube 视频。但是，如果您对这种方法感兴趣，我将在此处编写它(以了解如何提供纹理):

func renderer(_ renderer: SCNSceneRenderer,
             didAdd node: SCNNode,
              for anchor: ARAnchor) {

    if let planeAnchor = anchor as? ARPlaneAnchor {

        let playerGeo = SCNPlane(width: CGFloat(planeAnchor.extent.x),
                                height: CGFloat(planeAnchor.extent.z))

        DispatchQueue.main.async {

            // here's how your video would be in a full screen mode
            // let videoURL = URL(string: "https://www.youtube.com/embed/w277oTvoKAM")

            let videoURL = URL(fileURLWithPath: "Assets/video.mp4")

            let videoNode = SKVideoNode(url: videoURL!)

            let skScene = SKScene(size:
                          CGSize(width: playerGeo.width * 1280,
                                height: playerGeo.height * 720))

            videoNode.position = CGPoint(
                                     x: skScene.size.width / 2,
                                     y: skScene.size.height / 2)

            videoNode.size = skScene.size

            skScene.addChild(videoNode)
            playerGeo.firstMaterial?.diffuse.contents = skScene
            videoNode.play()

            let playerNode = SCNNode()
            playerNode.geometry = playerGeo
            playerNode.eulerAngles.x = -.pi / 2
            node.addChildNode(playerNode)
        }
    }
}

YouTube 视频在 WKWebView 中播放，但它是 2D 的。使其适用于 3D 几何是一项挑战。