web-dev-qa-db-ja.com

DeviceOrientationEventとDeviceMotionEventをSafariで動作させるにはどうすればよいですか？

3D効果のために、私のWebサイトに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);
});

次のエラーメッセージが表示されます。

[警告]許可が要求されて付与されるまで、デバイスのモーションまたは向きイベントは発生しません。

javascriptsafarimobile-safaridevice-orientationdevicemotion
7
Siemen Gijbels

Xamarin iOS（Xamarin.Forms）では、準備ができたときにWkWebViewのEvaluateJavaScriptメソッドを使用してアクセス許可要求スクリプトを挿入できます。

webView.EvaluateJavaScript("DeviceMotionEvent.requestPermission().then(response => { if (response == 'granted') {window.addEventListener('devicemotion', (e) => {})}}).catch(console.error)");

カスタムWkWebViewレンダラーを使用している場合（このバグがまだある場合はIWKUIDelegateを実装する必要があります https://bugs.webkit.org/show_bug.cgi?id=203287 ）webViewの設定時にスクリプトを挿入できますOnElementChangedの制御

例：

// do this when setting up the webview control in OnElementChanged
                //enable device motion sensors permission script:
                //https://medium.com/flawless-app-stories/how-to-request-device-motion-and-orientation-permission-in-ios-13-74fc9d6cd140
                var source =
                "function requestSensorPermission() {" +
                "   if (typeof(DeviceMotionEvent) !== 'undefined' && typeof(DeviceMotionEvent.requestPermission) === 'function') {" +
                "       DeviceMotionEvent.requestPermission() .then(response => {" +
                "           if (response == 'granted') { " +
                "               window.addEventListener('devicemotion', (e) => { })" +
                "           }" +
                "       }).catch(console.error)" +
                "   }" +
                "}";
                var script = new WKUserScript(new NSString(source), WKUserScriptInjectionTime.AtDocumentEnd, true);
                wkWebView.Configuration.UserContentController.AddUserScript(script);

次に、yourCustomWebView。EvaluateJavaScript（ "requestSensorPermission（）"）をコードビハインドでyourCustomWebView準備が整いました。

EvaluateJavaScript：https://docs.Microsoft.com/en-us/dotnet/api/webkit.wkwebview.evaluatejavascript?view= xamarin-ios-sdk-12

カスタムWkWebViewレンダラー：https://docs.Microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/ custom-renderer/hybridwebview＃create-the-custom-renderer-on-ios

0
TouchBoarder