Saya baru-baru ini menemukan beberapa situs web yang tampaknya mengakses akselerometer atau giroskop di laptop saya, mendeteksi perubahan orientasi atau gerakan.
Bagaimana ini dilakukan? Haruskah saya berlangganan beberapa jenis acara pada window
objek?
Di perangkat mana (laptop, ponsel, tablet) ini diketahui berfungsi?
NB : Sebenarnya saya sudah mengetahui (sebagian) jawaban atas pertanyaan ini, dan saya akan segera mempostingnya. Alasan bahwa saya posting pertanyaan di sini, adalah untuk membiarkan orang lain tahu bahwa data accelerometer yang tersedia di Javascript (pada perangkat tertentu) dan untuk menantang masyarakat untuk posting temuan baru pada subjek. Saat ini, sepertinya hampir tidak ada dokumentasi dari fitur tersebut.
javascript
accelerometer
gyroscope
Jørn Schou-Rode
sumber
sumber
Jawaban:
Cara untuk melakukan ini di 2019+ adalah dengan menggunakan
DeviceOrientation
API . Ini berfungsi di sebagian besar browser modern pada desktop dan seluler.sumber
Saat ini ada tiga peristiwa berbeda yang mungkin atau mungkin tidak dipicu saat perangkat klien berpindah. Dua di antaranya berfokus pada orientasi dan yang terakhir tentang gerak :
ondeviceorientation
diketahui berfungsi pada versi desktop Chrome, dan sebagian besar laptop Apple tampaknya memiliki perangkat keras yang diperlukan agar ini berfungsi. Ini juga berfungsi pada Mobile Safari di iPhone 4 dengan iOS 4.2. Dalam fungsi event handler, Anda dapat mengaksesalpha
,beta
,gamma
nilai-nilai pada data acara disediakan sebagai satu-satunya argumen untuk fungsi.onmozorientation
didukung pada Firefox 3.6 dan yang lebih baru. Sekali lagi, ini diketahui berfungsi pada sebagian besar laptop Apple, tetapi mungkin bekerja pada mesin Windows atau Linux dengan akselerometer juga. Dalam fungsi event handler, mencarix
,y
,z
bidang data acara disediakan sebagai argumen pertama.ondevicemotion
diketahui bekerja di iPhone 3GS + 4 dan iPad (keduanya dengan iOS 4.2), dan menyediakan data yang terkait dengan akselerasi perangkat klien saat ini. Data acara diteruskan ke fungsi pengendali memilikiacceleration
danaccelerationIncludingGravity
, yang keduanya memiliki tiga bidang untuk setiap sumbu:x
,y
,z
Situs web contoh "pendeteksi gempa" menggunakan serangkaian
if
pernyataan untuk mencari tahu peristiwa mana yang harus dilampirkan (dalam urutan yang agak diprioritaskan) dan meneruskan data yang diterima ketilt
fungsi umum :if (window.DeviceOrientationEvent) { window.addEventListener("deviceorientation", function () { tilt([event.beta, event.gamma]); }, true); } else if (window.DeviceMotionEvent) { window.addEventListener('devicemotion', function () { tilt([event.acceleration.x * 2, event.acceleration.y * 2]); }, true); } else { window.addEventListener("MozOrientation", function () { tilt([orientation.x * 50, orientation.y * 50]); }, true); }
Faktor konstan 2 dan 50 digunakan untuk "menyelaraskan" bacaan dari dua kejadian terakhir dengan yang dari kejadian pertama, tetapi ini sama sekali bukan representasi yang tepat. Untuk proyek "mainan" sederhana ini, ini berfungsi dengan baik, tetapi jika Anda perlu menggunakan data untuk sesuatu yang sedikit lebih serius, Anda harus membiasakan diri dengan unit nilai yang diberikan dalam berbagai acara dan memperlakukannya dengan hormat :)
sumber
Tidak dapat menambahkan komentar ke penjelasan luar biasa di posting lain tetapi ingin menyebutkan bahwa sumber dokumentasi yang bagus dapat ditemukan di sini .
Ini cukup untuk mendaftarkan fungsi kejadian untuk akselerometer seperti ini:
if(window.DeviceMotionEvent){ window.addEventListener("devicemotion", motion, false); }else{ console.log("DeviceMotionEvent is not supported"); }
dengan pawang:
function motion(event){ console.log("Accelerometer: " + event.accelerationIncludingGravity.x + ", " + event.accelerationIncludingGravity.y + ", " + event.accelerationIncludingGravity.z ); }
Dan untuk magnetometer, penangan kejadian berikut harus didaftarkan:
if(window.DeviceOrientationEvent){ window.addEventListener("deviceorientation", orientation, false); }else{ console.log("DeviceOrientationEvent is not supported"); }
dengan penangan:
function orientation(event){ console.log("Magnetometer: " + event.alpha + ", " + event.beta + ", " + event.gamma ); }
Ada juga bidang yang ditentukan dalam peristiwa gerakan untuk giroskop tetapi tampaknya tidak didukung secara universal (misalnya tidak berfungsi pada Catatan Samsung Galaxy).
Ada kode kerja sederhana di GitHub
sumber
Fallback yang berguna di sini: https://developer.mozilla.org/en-US/docs/Web/Events/MozOrientation
function orientationhandler(evt){ // For FF3.6+ if (!evt.gamma && !evt.beta) { evt.gamma = -(evt.x * (180 / Math.PI)); evt.beta = -(evt.y * (180 / Math.PI)); } // use evt.gamma, evt.beta, and evt.alpha // according to dev.w3.org/geo/api/spec-source-orientation } window.addEventListener('deviceorientation', orientationhandler, false); window.addEventListener('MozOrientation', orientationhandler, false);
sumber