İ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, platformlara özel birçok farklı alanda kullanım alanları sunmak için etkileyici oyunlar, fitness takibi ve artırılmış veya sanal gerçeklik. Birbirinden köprü kurmak ne kadar önemli? Web için Genel Sensör API'sini girin.
Generic Sensor API nedir?
Genel Sensör API'si, Search Ads 360'taki
web platformuna taşıyor. API, Google Cloud Platform'un
Sensor arayüzü ve bir dizi somut öğe
sensör sınıflarını inceleyin. Temel bir arayüz kullanmak, belirli sensör sınıflarının uygulama ve spesifikasyon sürecini basitleştirir. Örneğin, Gyroscope sınıfına göz atın. Çok küçük! İlgili içeriği oluşturmak için kullanılan
temel işlev, temel arayüzle belirtilir ve Gyroscope, bunu yalnızca üç
özellikleri ile birlikte açısal hızı temsil eden özellikler.
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. Adı verilen diğer sensörler
füzyon sensörleri, çeşitli alt düzeylerden verileri birleştirin
sensörlerin, komut dosyasının aksi halde hesaplaması gereken bilgileri açığa çıkarmasını sağlar. Örneğin,
AbsoluteOrientation sensör
ivme ölçer, jiroskop ve manyetometre.
Web platformunun zaten sensör verisi sağladığını düşünebilirsiniz ve kesinlikle haklısınız. Örneğin,
örnek, DeviceMotion ve
DeviceOrientation
etkinlikleri, hareket sensörü verilerini açığa çıkarır. Peki, neden yeni bir API'ye ihtiyacımız var?
Mevcut arayüzlere kıyasla Generic Sensor API birçok avantaj sunar:
- Genel Sensör API'si, yeni sensör sınıfları ve yeni özelliklerle kolayca genişletilebilen bir sensör genel arayüzü koruyacak. Bir sensör türü için yazılan istemci kodu bir ürün için çok az sayıda değişiklik yapılarak yeniden kullanılabilir.
- Sensörü yapılandırabilirsiniz. Örneğin, örnekleme sıklığını uygulama ihtiyaçlarınıza uygun şekilde ayarlayabilirsiniz.
- Platformda bir sensörün kullanılıp kullanılamadığını algılayabilirsiniz.
- Sensör okumaları, yüksek hassasiyetli zaman damgaları içerir. Bu sayede uygulamanızdaki diğer etkinliklerle daha iyi senkronizasyon sağlanır.
- Sensör veri modelleri ve koordinat sistemleri net bir şekilde tanımlanır. Bu sayede tarayıcı tedarikçileri, birlikte çalışabilir çözümler uygulayabilir.
- Genel sensör tabanlı arayüzler DOM'a bağlı değildir (yani
navigatorveyawindownesnesi değildir). Bu, API'yi hizmet işçileri içinde kullanma veya yerleşik cihazlar gibi başlıksız JavaScript çalışma zamanlarında uygulama fırsatları sunar. - Güvenlik ve gizlilik, Genel Sensör API'si için en büyük önceliktir ve eski sensör API'lerine kıyasla çok daha iyi güvenlik sağlar. Google Analytics 4 ile Permissions API.
Accelerometer,Gyroscope,LinearAccelerationSensor,AbsoluteOrientationSensor,RelativeOrientationSensorveMagnetometermodellerinde ekran koordinatlarıyla otomatik senkronizasyon kullanılabilir.
Kullanılabilir genel sensör API'leri
Bu makalenin yazıldığı sırada deneyebilirsiniz.
Hareket sensörleri:
AccelerometerGyroscopeLinearAccelerationSensorAbsoluteOrientationSensorRelativeOrientationSensorGravitySensor
Çevresel sensörler:
AmbientLightSensor(Chromium'daki#enable-generic-sensor-extra-classesişaretinin arkasında.)Magnetometer(Chromium'da#enable-generic-sensor-extra-classesişaretinin arkasında.)
Özellik algılama
Donanım API'lerinin özellik algılaması karmaşıktır, çünkü tarayıcının her iki
söz konusu arayüzü destekleyip desteklemediği ve cihazda ilgili sensörün olup olmadığı. Vadesiz hesap
Tarayıcının arayüzü destekleyip desteklemediği basittir. (Accelerometer değerini şunlardan herhangi biriyle değiştirin:
yukarıda belirtilen diğer arayüzler.)
if ('Accelerometer' in window) {
// The `Accelerometer` interface is supported by the browser.
// Does the device have an accelerometer, though?
}
Gerçekten anlamlı bir özellik algılama sonucu elde etmek için sensöre de bağlanmayı denemeniz gerekir. Bu örnekte, bunun nasıl yapılacağı gösterilmektedir.
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;
}
}
Çoklu dolgu
Genel Sensör API'sini desteklemeyen tarayıcılarda polyfill kullanılabilir. Çoklu dolgu sayesinde yalnızca ilgili sensörleri veya hakkında bilgi edindiniz.
// 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, hakkında kısaca bilgi verilmesi gereken bir alandır. Sensörler hakkında bilginiz varsa doğrudan pratik kodlama bölümüne atlayabilirsiniz. Aksi takdirde, desteklenen her sensörü ayrıntılı olarak inceleyelim.
İvme ölçer ve doğrusal hızlanma sensörü
Accelerometer sensörü
sensörü üç eksende (X, Y ve Z) barındıran bir cihazın ivmesini ölçer. Bu sensör bir
hareketsiz sensör. Başka bir deyişle, cihaz doğrusal serbest düşüşteyken ölçülen toplam
ivme 0 m/s2 olur ve bir cihaz masanın üzerinde düz bir şekilde durursa ivme
yukarı doğru (Z ekseni), Dünya'nın yer çekimi gücüne eşittir, yani g ≈ +9,8 m/sn2
masanın cihazı yukarı iten kuvveti ölçer. Cihazı
sağa, X eksenindeki ivme pozitif ya da cihaz hızlandırılmışsa negatif olacaktır.
soldan sola doğru.
İvme ölçerler adım sayma, hareket algılama veya basit cihazlar gibi amaçlarla kullanılabilir Yön. İvmeölçer ölçümleri, oryantasyon sensörleri gibi birleştirme sensörleri oluşturmak için genellikle diğer kaynaklardan alınan verilerle birleştirilir.
İlgili içeriği oluşturmak için kullanılan
LinearAccelerationSensor
Sensörü barındıran cihaza uygulanan ivmeyi ölçerek toplam ivme değerini
yer çekimidir. Bir cihaz hareketsizken (ör. masanın üzerinde düz bir şekilde yatarken) sensör, üç eksende ≈ 0 m/s2 ivme ölçer.
Yerçekimi sensörü
Kullanıcıların Accelerometer ve LinearAccelerometer ölçümlerini manuel olarak inceleyerek yerçekimi sensörüne yakın ölçümler elde etmesi zaten mümkün olsa da bu işlem zahmetli olabilir ve bu sensörler tarafından sağlanan değerlerin doğruluğuna bağlıdır. Android gibi platformlar, işletim sisteminin bir parçası olarak yerçekimi ölçümleri sağlayabilir. Bu ölçümler, hesaplama açısından daha ucuz, kullanıcının donanımına bağlı olarak daha doğru değerler sunan ve API ergonomisi açısından daha kolay kullanılan ölçümlerdir. İlgili içeriği oluşturmak için kullanılan
GravitySensor efekti döndürür
cihazın X, Y ve Z eksenlerindeki ivme artışı.
Jiroskop
Gyroscope sensörü ölçüm yapar
cihazın yerel X, Y ve Z eksenleri etrafında saniye başına radyan cinsinden açısal hız. Tüketici cihazlarının çoğunda, inertial Coriolis kuvvetine göre dönme hızını ölçen eylemsiz sensörler olan mekanik (MEMS) jiroskoplar bulunur. MEMS jiroskopları eğilimli
sensörün yer çekimi hassasiyetinden kaynaklanan kayma
iç mekanik sistem. Jiroskoplar göreli yüksek frekanslarda salınır, ör. 10 kHz'e kadar çalışabilir ve bu nedenle diğer sensörlere kıyasla daha fazla güç tüketebilir.
Yön sensörleri
İlgili içeriği oluşturmak için kullanılan
AbsoluteOrientationSensor
bir cihazın dönüşünü Dünya'nın koordinat sistemine göre ölçen bir füzyon sensörüdür.
diğer
RelativeOrientationSensor
Hareket sensörlerini barındıran bir cihazın sabit bir noktaya kıyasla dönüşünü gösteren veriler sağlar
referans koordinat sistemidir.
Tüm modern 3D JavaScript çerçeveleri quaternions'ı destekler
ve döndürme matrisleri rotasyonu temsil eder.
Ancak, doğrudan WebGL'yi kullanırsanız OrientationSensor, hem bir
quaternion mülk
ve
populateMatrix() yöntemini kullanın.
Birkaç snippet:
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 makine gibi çeşitli kullanım alanlarını mümkün kılar somut olarak ortaya koyar.
Hareket sensörleri, gelişmiş kullanım alanları ve koşullar hakkında daha fazla bilgi edinmek için Hareket Sensörleri Açıklayıcı belgesine 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ülür.
Bununla birlikte, oyunlar veya artırılmış ve sanal gerçeklik gibi birçok kullanım alanında, sensör verilerinin kullanılabilmesi için koordinat sisteminde çözümlenir.
Daha önce, sensör okumalarının ekran koordinatlarıyla yeniden eşlenmesi JavaScript'te uygulanmak zorundaydı. Bu yaklaşım verimsizdir ve web uygulaması kodunun karmaşıklığını önemli ölçüde artırır. Web uygulaması, ekran yönelimindeki değişiklikleri izlemeli ve sensör okumaları için koordinat dönüşümleri yapmalıdır. Bu, Öklid açıları veya dört boyutlu vektörler için yapılması kolay bir işlem değildir.
Genel Sensör API'si çok daha basit ve güvenilir bir çözüm sunar. Yerel koordinat sistemi, tanımlanmış 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 ölçümlerin cihaz koordinatlarında mı yoksa ekran koordinatlarında mı çözüleceğ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' });
Kod yazalım!
Genel Sensör API'si çok basit ve kullanımı kolaydır. Sensör arayüzünde
start() ve
Sensör durumunu kontrol etmek için stop() yöntemleri ve birkaç tane
Sensör etkinleştirme, hatalar ve yeni kullanıma sunulan hakkında bildirim almak için etkinlik işleyiciler
okumayı öğreteceğim. Beton sensör sınıfları genellikle belirli okuma özelliklerini tabana ekler
sınıfını kullanır.
Geliştirme ortamı
Geliştirme sırasında sensörleri localhost aracılığıyla kullanabilirsiniz. Örneğin,
mobil cihazlar, kurulum
bağlantı noktası yönlendirme
ve müziğiniz hazır!
Hazır olduğunda kodunuzu HTTPS'yi destekleyen bir sunucuya dağıtın. GitHub Sayfaları HTTPS üzerinden sunulduğundan paylaşımda bulunmak için harika bir yerdir en iyi uygulamaları paylaşacağız.
3D model döndürme
Bu basit örnekte, bir 3D modelin dönme dörtlüsünü değiştirmek için mutlak yön sensöründen gelen verileri kullanıyoruz. model, quaternion özelliğine sahip bir three.js Object3D sınıf örneğidir. İlgili içeriği oluşturmak için kullanılan
yönlendirme telefonu
demosu, 3D bir 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 sahnesindeki 3D model rotasyonuna yansıtılır.
Punchmeter
Aşağıdaki kod snippet'i punchmeter demosu, bir cismin maksimum hızını hesaplamak için doğrusal ivme sensörünün nasıl kullanılabileceğini gösteren başka bir yerde sabit durduğu varsayılır.
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;
};
Mevcut hız, ivme fonksiyonunun integraline yakın bir değer olarak hesaplanır.
Chrome Geliştirici Araçları ile hata ayıklama ve sensör geçersiz kılma
Bazı durumlarda, Generic Sensor API ile çalışmak için fiziksel bir cihaza ihtiyacınız yoktur. Chrome Geliştirici Araçları, cihaz yönünü taklit etme için mükemmel destek sunar.
Gizlilik ve güvenlik
Sensör okumaları, kötü amaçlı web sayfalarından çeşitli saldırılara maruz kalabilecek hassas verilerdir. Genel sensör API'lerinin uygulamaları, olası güvenlik ve gizlilik risklerini azaltmak için birkaç sınırlama uygular. Bu sınırlamalar, API'yi kullanmayı düşünen geliştiriciler tarafından dikkate alınmalıdır. Bu nedenle, bunları kısaca listeleyelim.
Yalnızca HTTPS
Genel Sensör API güçlü bir özellik olduğundan tarayıcı buna yalnızca güvenli bağlamlarda izin verir. Pratikte bu, Genel Sensör API'yi kullanmak için sayfanıza HTTPS üzerinden erişmeniz gerektiği anlamına gelir. Geliştirme sırasında bunu http://localhost üzerinden yapabilirsiniz ancak üretim için sunucunuzda HTTPS'nin etkin olması gerekir. En iyi uygulamalar için Güvenli ve güvenilir içerik koleksiyonuna göz atın. göz önünde bulundurun.
İzin Politikası entegrasyonu
Genel Bakış'taki İzin Politikası entegrasyonu Sensor API, bir çerçevenin sensör verilerine erişimi kontrol eder.
Varsayılan olarak Sensor nesneleri yalnızca bir ana çerçeve veya aynı kaynak alt çerçeve içinde oluşturulabilir. Bu sayede, kaynakta farklı olan iframe'lerin sensör verilerini yetkisiz olarak okuması engellenir. Bu varsayılan davranış
ilgili sözleşmenin açıkça etkinleştirilmesi veya devre dışı bırakılmasıyla değiştirilebilir.
politika tarafından kontrol edilen özellikler.
Aşağıdaki snippet'te, çapraz kaynak iframe'e ivme ölçer verilerine erişim izni verilmesi gösterilmektedir. Bu da
artık orada Accelerometer veya LinearAccelerationSensor nesneleri oluşturulabiliyor.
<iframe src="https://third-party.com" allow="accelerometer" />
Sensör okumalarının teslimi askıya alınabilir
Sensör okumalarına yalnızca görünür bir web sayfası (ör. kullanıcı web sayfasıyla etkileşimde bulunduğunda) erişilebilir. Ayrıca, kullanıcı büyük bir etkiye sahipse sensör verileri üst çerçeveye kökler arası alt çerçevede yapılan değişikliklere odaklanmaktır. Bu, üst çerçevenin kullanıcı girişini belirlemesini önler.
Sırada ne var?
Yakın gelecekte uygulanacak ortam ışığı sensörü veya yakınlık sensörü gibi önceden tanımlanmış 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 ortaya çıkmasını bekleyebiliriz.
Gelecekteki çalışmalar için önemli bir alan da Genel Sensör API'nin kendisidir. Genel Sensör spesifikasyonu şu anda aday öneri olarak kabul edilmektedir. Bu, düzeltmeler yapmak ve geliştiricilerin ihtiyaç duyduğu yeni işlevleri sunmak için hâlâ zaman olduğu anlamına gelir.
Siz de yardım edebilirsiniz.
Ulaşılan sensör özellikleri Aday Önerisi bu nedenle web ve tarayıcı geliştiricilerinin geri bildirimleri çok değerlidir. Bize bırakın ve değiştirmek istediğiniz bir şey olup olmadığını öğrenmek için geçerli API'ye gidin.
Lütfen spesifikasyon sorunlarını da bildirin hata olarak adlandırılır.
Kaynaklar
- Demo projeler: https://intel.github.io/generic-sensor-demos/
- Genel Sensor 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 Özellik 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 Bask. Wikimedia Commons'tan Misko tarafından oluşturulan hero resim.
