移动端Safari中Facebook嵌入直播iframe无法启动问题排查

问题复现 #

• 进入Facebook直播页面，点击更多选项，选择「嵌入」
• 复制平台生成的iframe代码
• 将代码粘贴至自有网站中
• 在移动端Safari打开该网站，直播无法启动

问题分析 #

直接复制iframe的src链接在Safari新标签页打开时，直播可正常运行；调整iframe的allow属性后直播恢复正常，因此判定问题出在该属性的权限配置上。

解决方案 #

修改iframe的allow属性，补充**camera; microphone**权限。

修改后的完整代码示例：

<iframe src="URL_GENERATED_BY_FACEBOOK" width="560" height="314" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share; camera; microphone" allowFullScreen="true"></iframe>

补充这两个权限后，移动端Safari即可正常加载并启动嵌入的Facebook直播。

内容的提问来源于stack exchange，提问作者Victor