Play Youtube video on ARImageAnchor in Swift

Question

I want to play a youtube video on my image tracking module like when image tracked then play youtube video on it.

Can anyone help me?

private func makeVideo(with url: URL, size: CGSize) -> SCNNode? {

   DispatchQueue.main.async {
      self.player.frame = CGRect(x: 0, y: 0, width: 650, height: 400)
      self.player.autoplay = true
      self.player.loadPlayer()
   }

    // 4
    let avMaterial = SCNMaterial()
    avMaterial.diffuse.contents = player

    // 5
    let videoPlane = SCNPlane(width: size.width, height: size.height)
    videoPlane.materials = [avMaterial]

    // 6
    let videoNode = SCNNode(geometry: videoPlane)
    videoNode.eulerAngles.x = -.pi / 2
    return videoNode
}

import YoutubeKit

let player = YTSwiftyPlayer(playerVars: [.videoID("GJQsT-h0FTU")])

I try this but it shows a black screen on image but audio is play

Answer 1

this may be not exactly solution to your issue, but I hope it can help you in some ways

So, what you can do in addition to the Image Detection is to display the UIWebView

'UIWebView' was deprecated in iOS 12.0: No longer supported; please adopt WKWebView.

Even though the Xcode will warn you with something like the message above, but the WKWebView does not display a thing, so you will need to stick with WebView until they fix the issue

So, assuming that you have figured out the image detection part and you are able to locate and put nodes over detected image you can implement following function:

func displayWebSite(on rootNode: SCNNode, horizontalOffset: CGFloat) {
        DispatchQueue.main.async {

            // Open YouTube
            let request = URLRequest(url: URL(string: "https://youtu.be/7ehEPsrw1X8")!)

            // Define the size
            let webView = UIWebView(frame: CGRect(x: 0, y: 0, width: 650, height: 900))
            webView.loadRequest(request)

            // Set size
            let webViewPlane = SCNPlane(width: horizontalOffset, height: horizontalOffset * 1.45)
            webViewPlane.cornerRadius = 0.025

            // Define geometry
            let webViewNode = SCNNode(geometry: webViewPlane)
            // Set the WebView as a material to the plane
            webViewNode.geometry?.firstMaterial?.diffuse.contents = webView
            webViewNode.opacity = 0

            // Put a little in front to avoid merger with detected image
            webViewNode.position.z += 0.04

            // Add the node
            rootNode.addChildNode(webViewNode)
        }
    }

For your reference you can check one of my projects to see how that function works within a project