Ionic iOS 上的 Twitch 嵌入式播放器无法正常工作

Posted 2023-02-23

【中文标题】Ionic iOS 上的 Twitch 嵌入式播放器无法正常工作

【英文标题】：Twitch Embedded Player on Ionic iOS not working

【发布时间】：2021-06-23 18:29:29

【问题描述】：

我使用 Ionic 创建了一个应用程序，它嵌入了用于流和剪辑的 twitch 播放器。

var url = https://player.twitch.tv/?video=v$videoId&time=$time&parent=localhost

<iframe [src]='url' frameborder='0' allow='autoplay; encrypted-media' allowfullscreen></iframe>

在 android 上它运行完美，但在 ios 应用程序中 iframe 不会显示并且没有播放器可用。只是一个白屏。

有人知道这个问题可能与ios有关吗？

【问题讨论】：

我怀疑这是与 iOS 相关的安全权限。要么不支持，要么清单文件需要一些特殊条目

另外，您可能应该通过 angular sanitizer 传递 url

我已经绕过了代码中的url，抱歉我没有提到：this.trustedVideoUrl = this.domSanitizer.bypassSecurityTrustResourceUrl(this.twitchService.getEmbedLiveStreamUrl(this.selectedChannel.channelName));

【参考方案1】：

我也有同样的问题。安全限制确实是罪魁祸首：我在 iframe 尝试加载时打开了 Safari 控制台并看到了这个错误：

拒绝加载 https://player.twitch.tv/?channel=...&controls=false&parent=localhost&muted=true，因为它没有出现在内容安全策略的 frame-ancestors 指令中。

查看 Twitch 返回的这个安全标头，它看起来像这样：

Content-Security-Policy: frame-ancestors http://localhost:* https://localhost:*

但是，在使用 Ionic WebView 时，根据其documentation:

iosScheme

<preference name="iosScheme" value="httpsionic" /> 默认值为离子

配置应用程序用于加载内容的方案。

http、https 或 file 等值无效，将使用默认值。

所以您的WKWebView 默认将ionic://locahost 作为其应用程序URL，这与Twitch 指定的http://localhost 和https://localhost 前缀不匹配。

我尝试在 Twitch iframe URL 中使用 &parent=ionic://localhost。 WKWebView 并没有拒绝打开 iframe，但 Twitch 本身对那个参数中的特殊字符感到害怕并拒绝呈现其播放器页面。

在我看来，目前 iOS Ionic/Cordova 应用程序和 Twitch iframe 是相互排斥的。

编辑： 我在 Twitch 论坛上发现了一堆关于这个主题的讨论（1、2），但没有一个在技术上深入到可以找到可行的解决方案或解决方法的地步。不幸的是，线程在 1 个月不活动后被关闭，所以我不得不在 Twitch 论坛中打开另一个thread，从我的角度解释技术细节。我还在他们的用户语音反馈门户中添加了一个功能请求。恐怕试图让 Twitch 意识到/接受他们应该对移动嵌入做些什么是我们目前所能做的。这是它的链接：

https://twitch.uservoice.com/forums/310213-developers/suggestions/44682766-make-embeds-work-on-ios-web-based-apps-like-ionic