gpt4 book ai didi

javascript - 跨域 iframe 麦克风权限在 Safari 12.1 中发生了变化?

转载 作者:行者123 更新时间:2023-11-28 00:37:15 25 4
gpt4 key购买 nike

Safari 12.1 似乎已停止记住跨域 iframe 的 getUserMedia(在本例中为麦克风)权限。

给出两个站点的简化示例:

域 A:

<!DOCTYPE html>
<html>
<head></head>
<body>

<button onclick="triggerUserMedia()">Get User Media</button>

<script>
function triggerUserMedia(){
const constraints = { audio: true, video: false };
navigator.mediaDevices.getUserMedia(constraints)
.then(function(stream) {
console.log('got stream');
})
.catch(function(err) {
console.log('couldn\'t get the stream');
});
}
</script>
</body>
</html>

域 B:

<!DOCTYPE html>
<html style="height:100%">
<head></head>
<body>
<iframe src="https://domain-a/index.html" allow="microphone"></iframe>
</body>
</html>

在 12.1 之前的 Safari 和当前版本的 Chrome 等中,当嵌入域 B 时多次按下按钮将导致一个“允许“域 A”使用您的麦克风?”,仅在第一个按。

但是,现在每次按下按钮时都会弹出一个权限。

有谁知道 Safari 12.1 中具体发生了什么变化导致了这种行为发生变化? (这是新的 webkit 安全限制吗?)

如何确保只请求一次权限,就像以前一样?

(我们在一个项目中多次调用getUserMedia,目的是嵌入不同的站点,所以这对用户体验造成了很大的影响)

最佳答案

我无法回答浏览器 vendor 在每次请求媒体流时都让 iframe getUserMedia 请求重新提示权限的具体情况,但我们发现解决方案是使用父 mediaDevices 单例来请求一个流。

function getRootWindow(window) {
if (window.parent === window) {
return window;
}

return getRootWindow(window.parent);
}

getRootWindow(window).navigator.mediaDevices.getUserMedia().then(...);

我们已经在 iOS、FF、Chrome、Safari 上对此进行了测试,它工作正常,一旦授予权限,后续对媒体设备的请求工作正常。从 iFrame DOM 调用它会导致它发出每个请求的提示。

关于javascript - 跨域 iframe 麦克风权限在 Safari 12.1 中发生了变化?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55519024/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com