Error occurred when set perspective360Degree for 360 video.

[ewangke]

What happened?

Hi, @SvenTiigi

I'm trying to YouTube play 360 video with the cool project, but an error occurred when set perspective360Degree. I set a breakpoint on YouTubePlayerWebView+Evaluate.swift:81, and the error message is as below:

(lldb) po error
▿ Optional<Error>
  - some : Error Domain=WKErrorDomain Code=5 "JavaScript execution returned a result of an unsupported type" UserInfo={NSLocalizedDescription=JavaScript execution returned a result of an unsupported type}

The javascript executed is as below:

(lldb) po javaScript
▿ JavaScript
  - rawValue : "player.setSphericalProperties({\"yaw\":50,\"fov\":30,\"pitch\":20,\"roll\":60});"

which is generated by API call like this:

self.youTubePlayer.set(
   perspective360Degree: .init(
        yaw: 50,
        pitch: 20,
        roll: 60,
        fov: 10
   )
)

What are the steps to reproduce?

Step 1:

Replace the button event with code snippets below

self.youTubePlayer.set(
   perspective360Degree: .init(
        yaw: 50,
        pitch: 20,
        roll: 60,
        fov: 10
   )
)

Replace the WWDC22 url with another 360 YouTube url: https://www.youtube.com/watch?v=s_hdc_XiXiA&t=4s

Step 2:

Build and run the Example target，I tried both the simulator and iPhone device. Tap any item within the scrollView to trigger perspective360Degree update.

What is the expected behavior?

I tried to update perspective360Degree and expect different perspective can be viewed, just like the official iframe - Controlling 360° videos demo.

Would you please look into this issue, or maybe give me some hint for debugging. Many thanks!

[SvenTiigi]

Thanks for your excellent bug report @ewangke.

Since the JavaScript execution returned a result of an unsupported type WKError comes directly from the evaluateJavaScript function of WKWebView, it seems that the setSphericalProperties JavaScript function returns an invalid value that isn't supported by WebKit/WKWebView, such as null.

I've added a fix to the develop branch which wraps the execution of the JavaScript function in a self-executing anonymous JavaScript function to avoid the invalid return value.

[ewangke]

Thanks for your fix and quick response @SvenTiigi .

The fix eliminates the WKError now.

But I still can't update video's perspective by API setSphericalProperties, and getSphericalProperties always returns an empty object.

I notice that the official document example works on Safari for macOS, but didn't work on mobile Safari for iOS.

I know that it's most likely the iFrame API limitation. Is it possible to play 360 video via iFrame API on iOS?

[SvenTiigi]

Hi @ewangke,

I've tested the video perspective APIs and can confirm that the setSphericalProperties and getSphericalProperties JS functions of the YouTube Player iFrame API are definitely not working correctly on iOS and macOS 🙈

As a result I will remove the video perspective APIs from YouTubePlayerKit as there is no suitable workaround available and the official youtube-ios-player-helper also doesn't provide any kind of support for this API.

Thanks for your investigations!

[ewangke]

@SvenTiigi, thanks for your help!