İvme ölçer, jiroskop ve manyetometre gibi cihaz üzerindeki sensörlere erişmek için Genel Sensör API'sini kullanın.
Günümüzde sensör verileri; sürükleyici oyun oynama, fitness takibi ve artırılmış veya sanal gerçeklik gibi kullanım alanlarına olanak tanımak için platforma özgü birçok uygulamada kullanılmaktadır. Platforma özgü uygulamalarla web uygulamaları arasındaki boşluğu doldurmak harika olmaz mıydı? Web için Genel Sensor API'sini girin.
Genel Sensör API'si nedir?
Genel Sensör API'si, sensör cihazlarını web platformuna maruz bırakan bir dizi arayüzdür. API, temel Sensor arayüzünden ve temel olarak derlenen bir dizi beton sensör sınıfından oluşur. Temel arayüze sahip olmak, beton sensör sınıfları için uygulama ve spesifikasyon sürecini basitleştirir. Örneğin, Gyroscope sınıfına göz atın. Süper küçük! Temel işlev, temel arayüz tarafından belirtilir ve Gyroscope, yalnızca açısal hızı temsil eden üç özellikle bu işlevi genişletir.
Bazı sensör sınıfları, ivme ölçer veya jiroskop sınıfları gibi gerçek donanım sensörleriyle arayüz oluşturur. Bunlara düşük seviyeli sensörler denir. Füzyon sensörleri olarak adlandırılan diğer sensörler, bir komut dosyasının aksi halde hesaplaması gereken bilgileri açığa çıkarmak için düşük seviyeli sensörlerden gelen verileri birleştirir. Örneğin AbsoluteOrientation sensörü ivme ölçer, jiroskop ve manyetometreden elde edilen verilere dayanarak kullanıma hazır dörde dört dönme matrisi sunar.
Web platformunun zaten sensör verisi sağladığını düşünebilirsiniz. Örneğin, DeviceMotion ve DeviceOrientation etkinlikleri hareket sensörü verilerini açığa çıkarır. Neden yeni bir API'ya ihtiyacımız var?
Genel Sensör API'si, mevcut arayüzlerle karşılaştırıldığında birçok avantaj sunar:
- General Sensor API, yeni sensör sınıflarıyla kolayca genişletilebilen bir sensör çerçevesidir ve bu sınıfların her biri genel arayüzü korur. Bir sensör türü için yazılan istemci kodu çok az değişiklik yaparak başka bir sensör için yeniden kullanılabilir.
- Sensörü yapılandırabilirsiniz. Örneğin, örnekleme sıklığını uygulamanızın ihtiyaçlarına uygun şekilde ayarlayabilirsiniz.
- Platformda sensör olup olmadığını tespit edebilirsiniz.
- Sensör okumaları, yüksek hassasiyetli zaman damgalarına sahiptir ve uygulamanızdaki diğer etkinliklerle daha iyi senkronizasyon sağlar.
- Sensör veri modelleri ve koordinat sistemleri açıkça tanımlanmıştır ve tarayıcı tedarikçilerinin birlikte çalışabilen çözümler uygulamasına olanak tanır.
- Genel Sensör tabanlı arayüzler DOM'ye bağlı değildir (yani bunlar
navigatorne dewindownesne değildir) ve bu durum, API'yi hizmet çalışanları arasında kullanmak veya yerleşik cihazlar gibi gözetimsiz JavaScript çalışma zamanlarında uygulamak için gelecekte yeni fırsatlar yaratır. - Güvenlik ve gizlilik özellikleri, Genel Sensor API'sinin en önemli önceliğidir ve eski sensör API'lerine kıyasla çok daha iyi güvenlik sağlar. Permissions API ile entegrasyon yapabilirsiniz.
Accelerometer,Gyroscope,LinearAccelerationSensor,AbsoluteOrientationSensor,RelativeOrientationSensorveMagnetometeriçin ekran koordinatlarıyla otomatik senkronizasyon yapılabilir.
Kullanılabilir genel sensör API'leri
Yazma sırasında, deneyebileceğiniz çeşitli sensörler vardır.
Hareket sensörleri:
AccelerometerGyroscopeLinearAccelerationSensorAbsoluteOrientationSensorRelativeOrientationSensorGravitySensor
Çevre sensörleri:
AmbientLightSensor(Chromium'da#enable-generic-sensor-extra-classesbayrağının arkasında.)Magnetometer(Chromium'da#enable-generic-sensor-extra-classesbayrağının arkasında.)
Özellik algılama
Hem tarayıcının söz konusu arayüzü destekleyip desteklemediğini hem de cihazda karşılık gelen sensöre sahip olup olmadığını tespit etmeniz gerektiğinden donanım API'lerinin özellik algılaması zordur. Tarayıcının bir arayüzü destekleyip desteklemediğini kolayca kontrol edebilirsiniz. (Accelerometer öğesini yukarıda belirtilen diğer arayüzlerin herhangi biriyle değiştirin.)
if ('Accelerometer' in window) {
// The `Accelerometer` interface is supported by the browser.
// Does the device have an accelerometer, though?
}
Gerçekte anlamlı bir özellik algılama sonucu için sensöre de bağlanmayı denemeniz gerekir. Bu örnek, bunu nasıl yapacağınızı gösterir.
let accelerometer = null;
try {
accelerometer = new Accelerometer({ frequency: 10 });
accelerometer.onerror = (event) => {
// Handle runtime errors.
if (event.error.name === 'NotAllowedError') {
console.log('Permission to access sensor was denied.');
} else if (event.error.name === 'NotReadableError') {
console.log('Cannot connect to the sensor.');
}
};
accelerometer.onreading = (e) => {
console.log(e);
};
accelerometer.start();
} catch (error) {
// Handle construction errors.
if (error.name === 'SecurityError') {
console.log('Sensor construction was blocked by the Permissions Policy.');
} else if (error.name === 'ReferenceError') {
console.log('Sensor is not supported by the User Agent.');
} else {
throw error;
}
}
Polyester Lifi
Genel Sensör API'sini desteklemeyen tarayıcılar için bir polyfill kullanılabilir. Polyfill yalnızca ilgili sensörlerin uygulamalarını yüklemenize olanak tanır.
// Import the objects you need.
import { Gyroscope, AbsoluteOrientationSensor } from './src/motion-sensors.js';
// And they're ready for use!
const gyroscope = new Gyroscope({ frequency: 15 });
const orientation = new AbsoluteOrientationSensor({ frequency: 60 });
Tüm bu sensörler nedir? Bunları nasıl kullanabilirim?
Sensörler, kısa giriş gerektiren bir alandır. Sensörler hakkında bilginiz varsa doğrudan uygulamalı kodlama bölümüne geçebilirsiniz. Aksi halde, desteklenen her bir sensörü ayrıntılı olarak inceleyelim.
İvme ölçer ve doğrusal ivme sensörü
Accelerometer sensörü, sensörü üç eksende (X, Y ve Z) barındıran cihazın hızlanmasını ölçer. Bu sensör, bir eylemsizlik sensördür.Diğer bir deyişle, cihaz doğrusal serbest düşüş modunda olduğunda ölçülen toplam ivme 0 m/sn2 olur ve bir cihaz masa üzerinde düz bir şekilde dururken yukarı doğru ivme (Z ekseni) Dünya'nın yer çekimine (Z ekseni) eşit olur. Yani tablonun yukarı doğru ittiğinde 8 m/sn.civarı g 2 gücü ölçer. Cihazı sağa iterseniz X eksenindeki ivme pozitif veya cihaz sağdan sola doğru hızlandırılırsa negatif olur.
İvme ölçerler adım sayma, hareket algılama veya basit cihaz yönü gibi işlemler için kullanılabilir. İvme ölçer ölçümleri çoğunlukla diğer kaynaklardan alınan verilerle birleştirilerek yön sensörleri gibi füzyon sensörleri oluşturulur.
LinearAccelerationSensor, yer çekiminin katkısı hariç, sensörü barındıran cihaza uygulanan ivmeyi ölçer. Bir cihaz aktif değilken (örneğin masaya düz bir şekilde uzanırken) sensör, üç eksende ≈ 0 m/sn2 ivme ölçer.
Yer çekimi sensörü
Kullanıcıların Accelerometer ve LinearAccelerometer ölçümlerini manuel olarak inceleyerek yerçekimi sensörünün ölçümlerine yakın değerleri manuel olarak elde etmeleri zaten mümkündür. Ancak bu, kullanışsız olabilir ve bu sensörlerin sağladığı değerlerin doğruluğuna bağlıdır. Android gibi platformlar, işletim sisteminin bir parçası olarak yerçekimi okumaları sağlayabilir. Bu ölçümler, hesaplama açısından daha ucuz olmalı, kullanıcının donanımına bağlı olarak daha doğru değerler sağlamalıdır ve API ergonomisi açısından daha kolay kullanılabilir. GravitySensor yer çekimi nedeniyle cihazın X, Y ve Z eksenlerindeki ivme etkisini döndürür.
Jiroskop
Gyroscope sensörü, açısal hızı cihazın X, Y ve Z ekseni etrafında saniye başına radyan cinsinden ölçer. Çoğu tüketici cihazında mekanik (MEMS) jiroskoplar bulunur. Bu sensörler, dönüş hızını hareketsiz Koriolis kuvvetine dayalı olarak ölçen hareketsiz sensörlerdir. MEMS jiroskopları, sensörün iç mekanik sistemini deforme eden yer çekimi hassasiyeti nedeniyle kaymaya açıktır. Jiroskoplar göreceli yüksek frekanslarda salınır, ör. bu nedenle diğer sensörlere kıyasla
daha fazla güç tüketebilir.
Yön sensörleri
AbsoluteOrientationSensor, bir cihazın dönüşünü Dünyanın koordinat sistemine göre ölçen bir füzyon sensörüdür. RelativeOrientationSensor ise sabit bir referans koordinat sistemine göre hareket sensörlerini barındıran cihazın dönüşünü temsil eden veriler sunar.
Tüm modern 3D JavaScript çerçeveleri, döndürmeyi temsil etmek için dördüncüleri ve döndürme matrislerini destekler. Ancak, doğrudan WebGL kullanıyorsanız OrientationSensor hem bir quaternion özelliğine hem de bir populateMatrix() yöntemine sahip olur.
Aşağıda birkaç snippet verilmiştir:
let torusGeometry = new THREE.TorusGeometry(7, 1.6, 4, 3, 6.3);
let material = new THREE.MeshBasicMaterial({ color: 0x0071c5 });
let torus = new THREE.Mesh(torusGeometry, material);
scene.add(torus);
// Update mesh rotation using quaternion.
const sensorAbs = new AbsoluteOrientationSensor();
sensorAbs.onreading = () => torus.quaternion.fromArray(sensorAbs.quaternion);
sensorAbs.start();
// Update mesh rotation using rotation matrix.
const sensorRel = new RelativeOrientationSensor();
let rotationMatrix = new Float32Array(16);
sensor_rel.onreading = () => {
sensorRel.populateMatrix(rotationMatrix);
torus.matrix.fromArray(rotationMatrix);
};
sensorRel.start();
const mesh = new BABYLON.Mesh.CreateCylinder('mesh', 0.9, 0.3, 0.6, 9, 1, scene);
const sensorRel = new RelativeOrientationSensor({ frequency: 30 });
sensorRel.onreading = () => mesh.rotationQuaternion.FromArray(sensorRel.quaternion);
sensorRel.start();
// Initialize sensor and update model matrix when new reading is available.
let modMatrix = new Float32Array([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]);
const sensorAbs = new AbsoluteOrientationSensor({ frequency: 60 });
sensorAbs.onreading = () => sensorAbs.populateMatrix(modMatrix);
sensorAbs.start();
// Somewhere in rendering code, update vertex shader attribute for the model
gl.uniformMatrix4fv(modMatrixAttr, false, modMatrix);
Yön sensörleri sürükleyici oyun, artırılmış ve sanal gerçeklik gibi çeşitli kullanım alanlarına olanak tanır.
Hareket sensörleri, gelişmiş kullanım alanları ve gereksinimler hakkında daha fazla bilgi için hareket sensörleri açıklayıcı dokümanına göz atın.
Ekran koordinatlarıyla senkronizasyon
Varsayılan olarak, uzamsal sensörlerin okumaları cihaza bağlı olan ve ekran yönünü dikkate almayan yerel bir koordinat sisteminde çözümlenir.
Ancak, oyunlar ya da artırılmış ve sanal gerçeklik gibi birçok kullanım alanında, sensör okumalarının ekran yönüne bağlı olan bir koordinat sisteminde çözülmesi gerekir.
Daha önce, sensör okumalarının ekran koordinatlarıyla yeniden eşlenmesi JavaScript'te uygulanmaktaydı. Bu yaklaşım verimsizdir ve web uygulama kodunun karmaşıklığını da önemli ölçüde artırır. Web uygulamasının, ekran yönü değişikliklerini izlemesi ve sensör okumaları için koordinat dönüşümlerini gerçekleştirmesi gerekir. Bu, Euler açıları veya dörtlüler için yapılacak sıradan bir şey değildir.
Genel Sensör API'si çok daha basit ve güvenilir bir çözüm sağlar! Yerel koordinat sistemi, tanımlanan tüm uzamsal sensör sınıfları için yapılandırılabilir: Accelerometer, Gyroscope, LinearAccelerationSensor, AbsoluteOrientationSensor, RelativeOrientationSensor ve Magnetometer. Kullanıcı, referenceFrame seçeneğini sensör nesnesi oluşturucuya ileterek döndürülen okumaların cihaz mı yoksa ekran koordinatlarında mı çözümleneceğini tanımlar.
// Sensor readings are resolved in the Device coordinate system by default.
// Alternatively, could be RelativeOrientationSensor({referenceFrame: "device"}).
const sensorRelDevice = new RelativeOrientationSensor();
// Sensor readings are resolved in the Screen coordinate system. No manual remapping is required!
const sensorRelScreen = new RelativeOrientationSensor({ referenceFrame: 'screen' });
Şimdi kod yazalım!
Genel Sensör API'sinin kullanımı çok basit ve kullanımı kolaydır! Sensör arayüzünde, sensör durumunu kontrol etmek için start() ve stop() yöntemleri ile sensör etkinleştirme, hatalar ve yeni mevcut okumalar hakkında bildirim almak için çeşitli etkinlik işleyiciler bulunur. Beton sensörü sınıfları genellikle spesifik okuma özelliklerini temel sınıfa ekler.
Geliştirme ortamı
Geliştirme sırasında localhost üzerinden sensörleri kullanabileceksiniz. Mobil cihazlar için geliştirme yapıyorsanız yerel sunucunuz için bağlantı noktası yönlendirmeyi ayarlayın. Böylece bayılacaksınız!
Kodunuz hazır olduğunda HTTPS'yi destekleyen bir sunucuya dağıtın. GitHub Sayfaları, HTTPS üzerinden sunulduğu için demolarınızı paylaşmak için ideal bir yerdir.
3D model döndürme
Bu basit örnekte, 3D bir modelin dönüş dörtte birliğini değiştirmek için mutlak yön sensöründen alınan verileri kullanıyoruz. model, quaternion özelliğine sahip üç.js Object3D sınıfı bir örnektir. Yön telefonu demosunda yer alan aşağıdaki kod snippet'i, bir 3D modeli döndürmek için mutlak yön sensörünün nasıl kullanılabileceğini gösterir.
function initSensor() {
sensor = new AbsoluteOrientationSensor({ frequency: 60 });
sensor.onreading = () => model.quaternion.fromArray(sensor.quaternion);
sensor.onerror = (event) => {
if (event.error.name == 'NotReadableError') {
console.log('Sensor is not available.');
}
};
sensor.start();
}
Cihazın yönü, WebGL sahnesinde 3D model dönüşüyle yansıtılır.
Punchmetre
Aşağıdaki kod snippet'i punchmetre demosundan alınmıştır. Bu örnekte, başlangıçta sabit durduğu varsayılarak bir cihazın maksimum hızını hesaplamak için doğrusal ivme sensörünün nasıl kullanılabileceği gösterilmektedir.
this.maxSpeed = 0;
this.vx = 0;
this.ax = 0;
this.t = 0;
/* … */
this.accel.onreading = () => {
let dt = (this.accel.timestamp - this.t) * 0.001; // In seconds.
this.vx += ((this.accel.x + this.ax) / 2) * dt;
let speed = Math.abs(this.vx);
if (this.maxSpeed < speed) {
this.maxSpeed = speed;
}
this.t = this.accel.timestamp;
this.ax = this.accel.x;
};
Akım hızı, ivme fonksiyonunun integralinin yaklaşık bir sonucu olarak hesaplanır.
Chrome Geliştirici Araçları ile hata ayıklama ve sensör geçersiz kılma
Bazı durumlarda, Genel Sensör API'siyle oyun oynamak için fiziksel bir cihaza ihtiyacınız yoktur. Chrome Geliştirici Araçları, cihaz yönünü simüle etme konusunda mükemmel bir destek sunar.
Gizlilik ve güvenlik
Sensör okumaları, kötü amaçlı web sayfalarından çeşitli saldırılara maruz kalabilen hassas verilerdir. Genel Sensör API'lerinin uygulanması, olası güvenlik ve gizlilik risklerini azaltmak için birkaç sınırlama uygular. Bu sınırlamalar, API'yi kullanmak isteyen geliştiriciler tarafından dikkate alınmalıdır. Bu nedenle bunları kısaca listeleyelim.
Yalnızca HTTPS
Genel Sensör API'si güçlü bir özellik olduğundan, tarayıcı buna yalnızca güvenli bağlamlarda izin verir. Pratikte, Genel Sensör API'sini kullanmak için sayfanıza HTTPS üzerinden erişmeniz gerekir. Geliştirme sırasında bunu http://localhost üzerinden yapabilirsiniz ancak üretim için sunucunuzda HTTPS olması gerekir. En iyi uygulamalar ve yönergeler için Güvenli ve güvenli koleksiyon konusuna bakın.
İzin Politikası entegrasyonu
Genel Sensör API'sindeki İzin Politikası entegrasyonu, bir çerçeveye ait sensör verilerine erişimi kontrol eder.
Varsayılan olarak Sensor nesneleri yalnızca ana çerçeve veya aynı kaynak alt çerçeveleri içinde oluşturulabilir. Böylece çapraz kaynak iframe'lerin sensör verileri olmadan okunması engellenir. Bu varsayılan davranış, ilgili politika kontrollü özelliklerin açık bir şekilde etkinleştirilmesi veya devre dışı bırakılmasıyla değiştirilebilir.
Aşağıdaki snippet'te, kaynaklar arası iframe'e ivme ölçer verilerine erişim izni verilmesi gösterilmektedir. Diğer bir deyişle, artık Accelerometer veya LinearAccelerationSensor nesneleri burada oluşturulabilir.
<iframe src="https://third-party.com" allow="accelerometer" />
Sensör okumalarının teslimi askıya alınabilir
Sensör ölçümlerine yalnızca görünür bir web sayfası tarafından, yani kullanıcı gerçekten etkileşimde bulunduğunda erişilebilir. Bununla birlikte, kullanıcı odağı çapraz kaynak alt çerçeveye dönüşürse üst çerçeveye sensör verisi sağlanmaz. Bu, üst çerçevenin kullanıcı girişini çıkarmasını önler.
Sonraki adım
Yakın gelecekte Ortam Işığı Sensörü veya Yakınlık Sensörü gibi önceden belirlenmiş bir dizi sensör sınıfı vardır. Ancak Genel Sensör çerçevesinin geniş genişletilebilirliği sayesinde, çeşitli sensör türlerini temsil eden daha da fazla yeni sınıfın görünümünü tahmin edebiliyoruz.
Gelecekte yapılacak çalışmalarda bir diğer önemli alan da Genel Sensör API'sinin kendisini iyileştirmektir. Genel Sensör spesifikasyonu şu anda Aday Önerisi olarak adlandırılmaktadır. Bu da düzeltmeler yapmak ve geliştiricilerin ihtiyaç duyduğu yeni işlevleri sunmak için hâlâ zaman olduğu anlamına gelir.
Yardımcı olabilirsiniz!
Sensör teknik özellikleri, Aday Önerisi olgunluk seviyesine ulaştı. Bu nedenle, web ve tarayıcı geliştiricilerinden gelen geri bildirimlere çok değer veriyoruz. Eklemek istediğiniz veya mevcut API'de değiştirmek istediğiniz bir şey varsa bize bildirebilirsiniz.
Spesifikasyon sorunlarını ve Chrome uygulamasıyla ilgili bugs bildirmekten lütfen çekinmeyin.
Kaynaklar
- Demo projeler: https://intel.github.io/generic-sensor-demos/
- Genel Sensör API spesifikasyonu: https://w3c.github.io/sensors/
- Spesifikasyon sorunları: https://github.com/w3c/sensors/issues
- W3C çalışma grubu posta listesi: public-device-apis@w3.org
- Chrome Özelliğinin Durumu: https://www.chromestatus.com/feature/5698781827825664
- Uygulama hataları: http://crbug.com?q=component:Blink>Sensor
Teşekkür
Bu makale Joe Medley ve Kayce Basques tarafından incelenmiştir. Wikimedia Commons aracılığıyla Misko tarafından hazırlanan lokomotif resim.
