Web için sensörler

İvme ölçer, jiroskop ve manyetometre gibi cihaz üzerindeki sensörlere erişmek için Genel Sensör API'sini kullanın.

Alex Shalamov
Alex Shalamov
Mikhail Pozdnyakov
Mikhail Pozdnyakov
Thomas Steiner

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? Şunu girin: Web için Genel Sensor API'si

Genel 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üze sahip olmak, uygulamayı ve teknik özellikleri basitleştirir özel olarak işleyeceğim. Örneğin, RACI matrisine Gyroscope sınıfı. Ç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ı, gerçek donanım sensörleriyle (ör. ivme ölçer veya jiroskop dersleri. Bunlara düşük seviye 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 bu konuda 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?

Genel Sensör API'si, mevcut arayüzlerle karşılaştırıldığında çok sayıda 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. Mesela örnekleme sıklığını belirlediğiniz bir toplantıdır.
  • Platformda mevcut bir sensörün olup olmadığını tespit edebilirsiniz.
  • Sensör okumaları, yüksek hassasiyetli zaman damgalarına sahiptir ve diğer etkinliklerdir.
  • Sensör veri modelleri ve koordinat sistemleri açık bir şekilde tanımlanarak tarayıcı satıcılarının çözümleri uygulayın.
  • Genel Sensör tabanlı arayüzler DOM'ye bağlı değildir (yani navigator değildirler) veya window nesne) birlikte çalışır. Bu durum, API'yi hizmet içinde kullanmak için gelecekte fırsatlar ortaya çıkarır. veya gözetimsiz JavaScript çalışma zamanlarında (ör. yerleşik cihazlar.
  • Genel Sensör için güvenlik ve gizlilik en önemli önceliktir eski sensör API'lerine kıyasla çok daha iyi güvenlik sağlar. Google Analytics 4 ile Permissions API.
  • Ekran koordinatlarıyla otomatik senkronizasyon Accelerometer, Gyroscope, LinearAccelerationSensor, için mevcut AbsoluteOrientationSensor, RelativeOrientationSensor ve Magnetometer.

Kullanılabilen genel sensör API'leri

Yazma sırasında deney yapabileceğiniz birkaç sensör vardır.

Hareket sensörleri:

  • Accelerometer
  • Gyroscope
  • LinearAccelerationSensor
  • AbsoluteOrientationSensor
  • RelativeOrientationSensor
  • GravitySensor

Çevresel sensörler:

  • AmbientLightSensor (Chromium'da #enable-generic-sensor-extra-classes işaretinin arkasında.)
  • Magnetometer (Chromium'da #enable-generic-sensor-extra-classes iş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 için sensöre bağlanmayı da 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 uygulamalı kodlama bölümüne geçebilirsiniz. Aksi halde şimdi desteklenen her bir ayrıntılı olarak inceleyeceğiz.

İvme ölçer ve doğrusal ivme sensörü

İvme ölçer sensörü ölçümleri

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ü. Çoğu zaman, ivme ölçer ölçümleri diğer kaynaklardan gelen verilerle birleştirilir ve yön sensörleri gibi füzyon sensörleri oluşturabilir.

İ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. Sensör, bir cihaz kullanımda değilken (ör. masa üzerinde düz bir şekilde dururken) Üç eksende ≈ 0 m/sn2 ivme.

Yer çekimi sensörü

Kullanıcılar halihazırda yerçekimi sensörününkine yakın ölçümler aracılığıyla manuel olarak Accelerometer ve LinearAccelerometer ölçümleri manuel olarak denetleniyor, ancak bu işlem biraz zaman alabilir. 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ğlar. Bu da, yardımcı olabilir, kullanıcının donanımına bağlı olarak daha doğru değerler sağlar ve genel hatlarıyla inceledik. İ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

Jiroskop sensörü ölçümleri

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. En çok tüketici cihazlar mekanik (MEMS) Bunlara bağlı olarak döndürme hızını ölçen atalet sensörleri olan jiroskoplar Atölyeli Coriolis kuvveti. 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 sn. kHz ve bu nedenle diğer sensörlere kıyasla daha fazla güç tüketebilir.

Yön sensörleri

Mutlak yön sensörü ölçümleri

İ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:

three.js

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();

BABYLON

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();

WebGL

// 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 gereksinimler hakkında daha fazla bilgi için hareket sensörleri açıklayıcı dokümanı.

Ekran koordinatlarıyla senkronizasyon

Varsayılan olarak uzamsal sensörlerin ölçümleri çözümlenir cihaza bağlı olan ve ekran yönünün alınmasına dikkat etmeyen bir yerel koordinat sisteminde hesap.

Cihaz koordinat sistemi
Cihaz koordinat sistemi

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.

Ekran koordinat sistemi
Koordinat sistemini ekranı

Daha önce, sensör okumalarının ekran koordinatlarıyla yeniden eşlenmesinin JavaScript'te uygulanması gerekiyordu. Bu yaklaşım verimsizdir ve aynı zamanda web'deki karmaşıklığı önemli ölçüde artırır. uygulama kodu; Web uygulaması, ekran yönü değişikliklerini izlemeli ve koordinatlar uygulamalıdır sensör okumaları için dönüştürme işlemleri. Bu, Euler açıları veya Euler açıları için kuaterniyonlar.

Genel Sensör API'si çok daha basit ve güvenilir bir çözüm sunar. Yerel koordinat sistemi tanımlı 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 device veya ekran koordinatlarını görürsünüz.

// 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, dönüş yönünü değiştirmek için mutlak yön sensöründen gelen verileri kullanıyoruz. 4D modelin dördünü de oluşturur. model bir üç.js Şuna sahip Object3D sınıfı örneği: quaternion mülkü. İ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 sahnesi içinde 3D model dönüşüyle yansıtılır.

Sensör, 3D modelin yönünü günceller
Sensör, 3D modelin yönünü günceller

Delme ölçer

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;
};

Geçerli hız, ivme fonksiyonunun integraline yaklaşım olarak hesaplanır.

Delik hızı ölçümü için demo web uygulaması
Delme hızının ölçümü

Chrome Geliştirici Araçları ile hata ayıklama ve sensör geçersiz kılma

Bazı durumlarda Genel Sensor API ile oynamak için fiziksel bir cihaza gerek kalmaz. Chrome Geliştirici Araçları destekleyici materyalleri cihaz yönünü simüle etme.

Sanal telefonun özel yön verilerini geçersiz kılmak için kullanılan Chrome Geliştirici Araçları
Chrome Geliştirici Araçları ile cihaz yönünü simüle etme

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üvenliği azaltmak için birkaç sınırlama uygular ve gizlilik risklerini göz önünde bulundurun. Bu sınırlamalar, Şimdi 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. İçinde Genel Sensör API'sini kullanmak için sayfanıza HTTPS üzerinden erişmeniz gerektiği anlamına gelir. Geliştirme sırasında bu işlemi http://localhost aracılığıyla yapabilirsiniz, ancak üretim için sunucunuzda HTTPS 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 ana çerçeve veya aynı kaynaklı alt çerçevelerde oluşturulabilir. Böylece, kaynaklar arası iframe'lerin sensör verilerinin denetimsiz bir şekilde okunmasını önler. 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 özelliklerden yararlanın.

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 ölçümlerine yalnızca görünür bir web sayfası tarafından erişilebilir. Yani kullanıcı aslında anlamak önemlidir. 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 odaklanmalıdır. Bu, üst çerçevenin kullanıcı girişini belirlemesini önler.

Sırada ne var?

Yakın gelecekte uygulanmaya başlanmış olan bir dizi sensör sınıfı vardır: Ortam Işığı Sensörü veya Yakınlık Sensörü; ancak, metinlerin ve metin reklamların Genel Sensör çerçevesine göre çeşitli görevleri temsil eden daha fazla yeni sınıfın görebilirsiniz.

Gelecekte yapılacak çalışmalarda bir diğer önemli alan da jenerik Sensör API'si olan Genel Sensör spesifikasyonu şu anda bir Aday Önerisi olduğu için hâlâ zaman var gerekli düzeltmeleri yapmak ve geliştiricilerin ihtiyaç duyduğu yeni işlevleri sunmak için Google Analytics'ten bahsetmek istiyorum.

Yardımcı olabilirsiniz!

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

Teşekkür

Bu makale Joe Medley ve Kayce Bask. Hero görseli Misko: Wikimedia Commons.