如何让DeviceOrientationEvent和DeviceMotionEvent在Safari上工作？

Question

为了获得3D效果，我尝试在我的网站上实现DeviceOrientationEvent和DeviceMotionEvent。然而，控制台不记录任何信息，显然iOS 13需要用户设置权限才能开始这样做。我似乎想不出如何正确地设置它。

我做了一些研究，这就是我发现的：https://github.com/w3c/deviceorientation/issues/57#issuecomment-498417027

所有其他在线提供的方法都不再有效，可悲的是。

window.addEventListener('deviceorientation', function(event) {
    console.log(event.alpha + ' : ' + event.beta + ' : ' + event.gamma);
});

我收到以下错误消息：

警告，在请求并授予许可之前，将不会触发设备移动或定向事件。

Answer 1

if ( location.protocol != "https:" ) {
location.href = "https:" + window.location.href.substring( window.location.protocol.length );
}
function permission () {
    if ( typeof( DeviceMotionEvent ) !== "undefined" && typeof( DeviceMotionEvent.requestPermission ) === "function" ) {
        // (optional) Do something before API request prompt.
        DeviceMotionEvent.requestPermission()
            .then( response => {
            // (optional) Do something after API prompt dismissed.
            if ( response == "granted" ) {
                window.addEventListener( "devicemotion", (e) => {
                    // do something for 'e' here.
                })
            }
        })
            .catch( console.error )
    } else {
        alert( "DeviceMotionEvent is not defined" );
    }
}
const btn = document.getElementById( "request" );
btn.addEventListener( "click", permission );

使用页面上的一个元素作为事件触发器，并给它一个“请求”id。

这将检查https，并在请求API授权之前根据需要对其进行更改。昨天发现了这个，但不记得URL。

Answer 2

从iOS 13 beta 2开始，您需要调用DeviceOrientationEvent.requestPermission()来访问陀螺仪或加速度计。这将显示一个权限对话框，提示用户允许该站点的运动和方向访问。

请注意，如果尝试在页面加载时自动调用它，这将无法工作。用户需要采取一些操作(比如点击按钮)才能显示对话框。

此外，当前的实现似乎要求站点启用https。

有关更多信息，请参阅此页

Answer 3

您需要单击或用户手势来调用requestPermission()。就像这样：

<script type="text/javascript">
    function requestOrientationPermission(){
        DeviceOrientationEvent.requestPermission()
        .then(response => {
            if (response == 'granted') {
                window.addEventListener('deviceorientation', (e) => {
                    // do something with e
                })
            }
        })
        .catch(console.error)
    }
</script>

<button onclick='requestOrientationPermission();'>Request orientation permission</button>

注意:如果您在权限提示符上单击cancel并希望再次测试它，您将需要退出Safari并启动它以使提示返回。