أدوات الاستشعار على الويب

استخدِم Generic Sensor API للوصول إلى أدوات الاستشعار على الجهاز، مثل مقاييس التسارع والجيروسكوب ومقاييس المغناطيسية.

Alex Shalamov

Mikhail Pozdnyakov

Thomas Steiner

في الوقت الحالي، تُستخدم بيانات أجهزة الاستشعار في العديد من التطبيقات الخاصة بالمنصات لتفعيل حالات استخدام مثل الألعاب الغامرة وتتبُّع مستوى اللياقة البدنية والواقع المعزّز أو الافتراضي. ألن يكون من الرائع سد الفجوة بين التطبيقات الخاصة بنظام أساسي معيّن وتطبيقات الويب؟ إليك Generic Sensor API للويب.

ما هي Generic Sensor API؟

Generic Sensor API هي مجموعة من الواجهات التي تعرض أجهزة الاستشعار على منصة الويب. تتألف واجهة برمجة التطبيقات من واجهة Sensor الأساسية ومجموعة من فئات أجهزة الاستشعار المحددة التي تم إنشاؤها فوقها. يؤدي توفّر واجهة أساسية إلى تبسيط عملية التنفيذ والتحديد لفئات المستشعرات المحددة. على سبيل المثال، ألقِ نظرة على الفئة Gyroscope. إنّها صغيرة جدًا. يتم تحديد الوظائف الأساسية من خلال الواجهة الأساسية، وتعمل Gyroscope على توسيعها ببساطة من خلال ثلاث سمات تمثّل السرعة الزاوية.

تتفاعل بعض فئات أدوات الاستشعار مع أدوات استشعار الأجهزة الفعلية، مثل فئات مقياس التسارع أو الجيروسكوب. ويُشار إليها باسم أجهزة الاستشعار المنخفضة المستوى. تدمج أدوات الاستشعار الأخرى، التي يُشار إليها باسم أدوات الاستشعار المدمجة، البيانات من عدة أدوات استشعار منخفضة المستوى لعرض المعلومات التي يحتاج النص البرمجي إلى احتسابها. على سبيل المثال، يوفّر مستشعر AbsoluteOrientation مصفوفة دوران جاهزة للاستخدام بأربعة في أربعة استنادًا إلى البيانات التي يتم الحصول عليها من مقياس التسارع والجيروسكوب ومقياس المغناطيسية.

قد تعتقد أنّ منصة الويب توفّر بيانات أجهزة الاستشعار، وهذا صحيح تمامًا. على سبيل المثال، تعرض الأحداث DeviceMotion وDeviceOrientation بيانات جهاز استشعار الحركة. إذًا، لماذا نحتاج إلى واجهة برمجة تطبيقات جديدة؟

بالمقارنة مع الواجهات الحالية، توفّر Generic Sensor API عددًا كبيرًا من المزايا:

• ‫Generic Sensor API هو إطار عمل للمستشعرات يمكن توسيعه بسهولة باستخدام فئات مستشعرات جديدة، وستحتفظ كل فئة من هذه الفئات بالواجهة العامة. يمكن إعادة استخدام رمز العميل المكتوب لنوع مستشعر واحد مع إجراء تعديلات قليلة جدًا على نوع آخر.
• يمكنك ضبط المستشعر. على سبيل المثال، يمكنك ضبط معدّل أخذ العيّنات بما يناسب احتياجات تطبيقك.
• يمكنك معرفة ما إذا كان هناك مستشعر متاح على النظام الأساسي.
• تتضمّن قراءات المستشعر طوابع زمنية عالية الدقة، ما يتيح مزامنة أفضل مع الأنشطة الأخرى في تطبيقك.
• يتم تحديد نماذج بيانات أجهزة الاستشعار وأنظمة الإحداثيات بوضوح، ما يتيح لمورّدي المتصفحات تنفيذ حلول قابلة للتشغيل التفاعلي.
• لا ترتبط الواجهات المستندة إلى Generic Sensor بنموذج المستند (DOM) (ما يعني أنّها ليست كائن navigator ولا كائن window)، ويتيح ذلك فرصًا مستقبلية لاستخدام واجهة برمجة التطبيقات ضمن عاملي الخدمة أو تنفيذها في أوقات تشغيل JavaScript غير المرئية، مثل الأجهزة المضمّنة.
• تُعدّ جوانب الأمان والخصوصية من أهم الأولويات في واجهة برمجة التطبيقات Generic Sensor، كما أنّها توفّر مستوى أمان أفضل بكثير مقارنةً بواجهات برمجة التطبيقات القديمة الخاصة بأجهزة الاستشعار. تتوفّر إمكانية الدمج مع واجهة Permissions API.
• تتوفّر ميزة المزامنة التلقائية مع إحداثيات الشاشة في Accelerometer وGyroscope وLinearAccelerationSensor وAbsoluteOrientationSensor وRelativeOrientationSensor وMagnetometer.

واجهات برمجة التطبيقات المتاحة لأجهزة الاستشعار العامة

في وقت كتابة هذا المقال، هناك العديد من أجهزة الاستشعار التي يمكنك تجربتها.

أجهزة استشعار الحركة:

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

أدوات الاستشعار البيئية:

• AmbientLightSensor (يجب تفعيل العلامة #enable-generic-sensor-extra-classes في Chromium لاستخدام هذه الميزة.)
• Magnetometer (يجب تفعيل العلامة #enable-generic-sensor-extra-classes في Chromium لاستخدام هذه الميزة.)

رصد الميزات

إنّ رصد الميزات في واجهات برمجة التطبيقات الخاصة بالأجهزة أمر صعب، لأنّه عليك رصد ما إذا كان المتصفّح يتيح استخدام الواجهة المعنية وما إذا كان الجهاز مزوّدًا بجهاز الاستشعار المناسب. يمكنك بسهولة التحقّق مما إذا كان المتصفّح يتيح استخدام واجهة معيّنة. (استبدِل Accelerometer بأي من الواجهات الأخرى المذكورة أعلاه).

if ('Accelerometer' in window) {
  // The `Accelerometer` interface is supported by the browser.
  // Does the device have an accelerometer, though?
}

للحصول على نتيجة ذات مغزى من عملية رصد الميزات، عليك محاولة الاتصال بجهاز الاستشعار أيضًا. يوضّح هذا المثال كيفية إجراء ذلك.

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

Polyfill

بالنسبة إلى المتصفحات التي لا تتيح استخدام Generic Sensor API، يتوفّر polyfill. تتيح لك أداة polyfill تحميل عمليات تنفيذ أجهزة الاستشعار ذات الصلة فقط.

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

ما هي كل أجهزة الاستشعار هذه؟ كيف يمكنني استخدامها؟

أجهزة الاستشعار هي مجال قد يحتاج إلى مقدّمة موجزة. إذا كنت على دراية بأجهزة الاستشعار، يمكنك الانتقال مباشرةً إلى قسم التدريب العملي على البرمجة. في ما يلي شرح مفصّل عن كل مستشعر متوافق.

مقياس التسارع ومقياس التسارع الخطي

يقيس مستشعر Accelerometer تسارع الجهاز الذي يستضيف المستشعر على ثلاثة محاور (س، ص، ع). جهاز الاستشعار هذا هو جهاز استشعار بالقصور الذاتي، ما يعني أنّه عندما يكون الجهاز في حالة سقوط حر خطي، سيكون إجمالي التسارع المقاس 0 م/ث²، وعندما يكون الجهاز مستويًا على طاولة، سيكون التسارع في الاتجاه الصاعد (المحور Z) مساويًا لقوة جاذبية الأرض، أي g ≈ +9.8 م/ث² لأنّه يقيس قوة الطاولة التي تدفع الجهاز إلى الأعلى. إذا دفعت الجهاز إلى اليمين، سيكون التسارع على المحور X موجبًا، أو سالبًا إذا تم تسريع الجهاز من اليمين إلى اليسار.

يمكن استخدام مقاييس التسارع لأغراض مثل: حساب عدد الخطوات أو استشعار الحركة أو تحديد اتجاه الجهاز البسيط. في كثير من الأحيان، يتم دمج قياسات مقياس التسارع مع بيانات من مصادر أخرى لإنشاء أدوات استشعار مدمجة، مثل أدوات استشعار الاتجاه.

يقيس LinearAccelerationSensor التسارع الذي يتم تطبيقه على الجهاز المضيف للمستشعر، باستثناء تأثير الجاذبية. عندما يكون الجهاز في وضع السكون، مثلاً عندما يكون مستويًا على الطاولة، سيقيس المستشعر تسارعًا يبلغ 0 متر في الثانية² تقريبًا على ثلاثة محاور.

مستشعر الجاذبية

يمكن للمستخدمين حاليًا الحصول يدويًا على قراءات قريبة من قراءات مستشعر الجاذبية من خلال فحص قراءات Accelerometer وLinearAccelerometer يدويًا، ولكن قد يكون ذلك صعبًا ويعتمد على دقة القيم التي توفّرها هذه المستشعرات. يمكن لمنصات مثل Android توفير قراءات الجاذبية كجزء من نظام التشغيل، ما يقلّل تكلفة العمليات الحسابية ويوفّر قيمًا أكثر دقة حسب أجهزة المستخدم، كما يسهّل استخدامها من حيث سهولة استخدام واجهة برمجة التطبيقات. تعرض الدالة GravitySensor تأثير التسارع على طول المحاور X وY وZ للجهاز بسبب الجاذبية.

الجيروسكوب

يقيس مستشعر Gyroscope السرعة الزاوية بالراديان في الثانية حول المحاور X وY وZ المحلية للجهاز. تحتوي معظم الأجهزة الاستهلاكية على جيروسكوبات ميكانيكية (MEMS)، وهي عبارة عن أجهزة استشعار بالقصور الذاتي تقيس معدل الدوران استنادًا إلى قوة كوريوليس بالقصور الذاتي. تكون الجيروسكوبات المصنّعة بتقنية MEMS عرضة للانحراف الناتج عن حساسية المستشعر للجاذبية، ما يؤدي إلى تشويه النظام الميكانيكي الداخلي للمستشعر. تتأرجح الجيروسكوبات بترددات عالية نسبيًا، مثل 10 كيلو هرتز، وبالتالي قد تستهلك طاقة أكبر مقارنةً بأجهزة الاستشعار الأخرى.

أدوات استشعار الاتجاه

AbsoluteOrientationSensor هو جهاز استشعار مدمج يقيس دوران الجهاز بالنسبة إلى نظام الإحداثيات الأرضي، بينما يوفّر RelativeOrientationSensor بيانات تمثّل دوران الجهاز الذي يستضيف أجهزة استشعار الحركة بالنسبة إلى نظام إحداثيات مرجعي ثابت.

تتيح جميع أُطر عمل JavaScript الحديثة ثلاثية الأبعاد استخدام الرباعيات ومصفوفات الدوران لتمثيل الدوران، ولكن إذا كنت تستخدم WebGL مباشرةً، يتضمّن OrientationSensor كلاً من السمة quaternion والطريقة populateMatrix(). في ما يلي بعض المقتطفات:

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

تتيح أجهزة استشعار الاتجاه حالات استخدام مختلفة، مثل الألعاب الغامرة والواقع المعزّز والواقع الافتراضي.

لمزيد من المعلومات حول أجهزة استشعار الحركة وحالات الاستخدام المتقدّمة والمتطلبات، يُرجى الاطّلاع على مستند شرح أجهزة استشعار الحركة.

المزامنة مع إحداثيات الشاشة

بشكلٍ تلقائي، يتم تحديد قراءات أجهزة الاستشعار المكانية في نظام إحداثيات محلي مرتبط بالجهاز ولا يأخذ اتجاه الشاشة في الاعتبار.

ومع ذلك، تتطلّب العديد من حالات الاستخدام، مثل الألعاب أو الواقع المعزّز والواقع الافتراضي، حلّ قراءات المستشعر في نظام إحداثيات مرتبط باتجاه الشاشة بدلاً من ذلك.

في السابق، كان يجب تنفيذ إعادة ربط قراءات المستشعر بإحداثيات الشاشة في JavaScript. هذه الطريقة غير فعّالة وتزيد بشكل كبير من تعقيد الرمز البرمجي لتطبيق الويب، إذ يجب أن يراقب تطبيق الويب تغييرات اتجاه الشاشة وينفّذ عمليات تحويل الإحداثيات لقراءات المستشعر، وهو أمر ليس بسيطًا بالنسبة إلى زوايا أويلر أو الرباعيات.

توفّر واجهة برمجة التطبيقات Generic Sensor API حلاً أبسط وأكثر موثوقية. يمكن ضبط نظام الإحداثيات المحلي لجميع فئات أجهزة الاستشعار المكانية المحدّدة: Accelerometer وGyroscope وLinearAccelerationSensor وAbsoluteOrientationSensor وRelativeOrientationSensor وMagnetometer. من خلال تمرير الخيار referenceFrame إلى أداة إنشاء عنصر الاستشعار، يحدّد المستخدم ما إذا كان سيتم تحليل القراءات التي تم إرجاعها في إحداثيات الجهاز أو الشاشة.

// 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' });

لنبدأ الترميز!

‫Generic Sensor API بسيطة جدًا وسهلة الاستخدام. تتضمّن واجهة Sensor طريقتَي start() و stop() للتحكّم في حالة أداة الاستشعار، بالإضافة إلى العديد من معالجات الأحداث لتلقّي الإشعارات بشأن تفعيل أداة الاستشعار والأخطاء والقراءات المتاحة حديثًا. تضيف فئات أجهزة الاستشعار المحدّدة عادةً سمات القراءة الخاصة بها إلى الفئة الأساسية.

بيئة التطوير

أثناء التطوير، ستتمكّن من استخدام أدوات الاستشعار من خلال localhost. إذا كنت بصدد تطوير تطبيقات للأجهزة الجوّالة، عليك إعداد إعادة توجيه المنفذ للخادم المحلي، وستكون جاهزًا للانطلاق.

عندما تصبح الشفرة جاهزة، يمكنك نشرها على خادم يتيح بروتوكول HTTPS. يتم عرض GitHub Pages عبر HTTPS، ما يجعلها مكانًا رائعًا لمشاركة العروض التوضيحية.

تدوير التصميم الثلاثي الأبعاد

في هذا المثال البسيط، نستخدم البيانات من مستشعر الاتجاه المطلق لتعديل رباعي الأبعاد الخاص بدوران تصميم ثلاثي الأبعاد. ‫model هو مثيل لفئة Object3D في three.js يتضمّن السمة quaternion. يوضّح مقتطف الرمز التالي من العرض التوضيحي هاتف تحديد الاتجاه كيفية استخدام مستشعر تحديد الاتجاه المطلق لتدوير تصميم ثلاثي الأبعاد.

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

سيظهر اتجاه الجهاز في دوران model الثلاثي الأبعاد ضمن مشهد WebGL.

Punchmeter

تم استخراج مقتطف الرمز البرمجي التالي من العرض التوضيحي لمقياس قوة اللكم، وهو يوضّح كيفية استخدام أداة استشعار التسارع الخطي لحساب السرعة القصوى لجهاز بافتراض أنّه كان في البداية ثابتًا.

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

يتم احتساب السرعة الحالية كتقريب لتكامل دالة التسارع.

تصحيح الأخطاء وتجاهل بيانات المستشعر باستخدام "أدوات مطوّري البرامج في Chrome"

في بعض الحالات، لا تحتاج إلى جهاز فعلي لتجربة Generic Sensor API. توفّر أدوات مطوّري البرامج في Chrome دعمًا ممتازًا لمحاكاة اتجاه الجهاز.

الخصوصية والأمان

قراءات أجهزة الاستشعار هي بيانات حساسة يمكن أن تتعرّض لهجمات مختلفة من صفحات الويب الضارة. تفرض عمليات تنفيذ واجهات برمجة التطبيقات Generic Sensor API بعض القيود للحدّ من المخاطر المحتملة على الأمان والخصوصية. على المطوّرين الذين ينوون استخدام واجهة برمجة التطبيقات مراعاة هذه القيود، لذا سنعرضها بإيجاز.

‫HTTPS فقط

بما أنّ Generic Sensor API هي ميزة فعّالة، لا يسمح المتصفّح باستخدامها إلا في سياقات آمنة. ويعني ذلك عمليًا أنّه لاستخدام Generic Sensor API، عليك الوصول إلى صفحتك من خلال HTTPS. يمكنك إجراء ذلك أثناء عملية التطوير عبر http://localhost، ولكنك ستحتاج إلى استخدام HTTPS على الخادم في مرحلة الإنتاج. يمكنك الاطّلاع على مجموعة آمن وموثوق للتعرّف على أفضل الممارسات والإرشادات.

دمج سياسة الأذونات

تتحكّم عملية دمج "سياسة الأذونات" في Generic Sensor API في إمكانية الوصول إلى بيانات أدوات الاستشعار لإطار معيّن.

بشكلٍ تلقائي، لا يمكن إنشاء عناصر Sensor إلا ضمن إطار رئيسي أو إطارات فرعية من المصدر نفسه، وبالتالي يتم منع إطارات iframe من مصادر متعددة من قراءة بيانات المستشعر بدون إذن. يمكن تعديل هذا السلوك التلقائي من خلال تفعيل الميزات التي تتحكّم فيها السياسات أو إيقافها بشكل صريح.

يوضّح المقتطف أدناه منح إذن الوصول إلى بيانات مقياس التسارع لإطار iframe من مصادر متعددة، ما يعني أنّه يمكن الآن إنشاء عناصر Accelerometer أو LinearAccelerationSensor فيه.

<iframe src="https://third-party.com" allow="accelerometer" />

يمكن تعليق عملية تسليم قراءات أجهزة الاستشعار

لا يمكن الوصول إلى قراءات المستشعر إلا من خلال صفحة ويب مرئية، أي عندما يتفاعل المستخدم معها. علاوةً على ذلك، لن يتم توفير بيانات المستشعر للإطار الرئيسي إذا انتقل تركيز المستخدم إلى إطار فرعي من مصادر متعددة. يمنع ذلك الإطار الرئيسي من استنتاج إدخال المستخدم.

ما هي الخطوات التالية؟

هناك مجموعة من فئات أجهزة الاستشعار المحدّدة مسبقًا سيتم تنفيذها في المستقبل القريب، مثل أداة استشعار الضوء المحيط أو أداة استشعار التقارب. ومع ذلك، بفضل إمكانية التوسيع الكبيرة التي يتيحها إطار عمل Generic Sensor، يمكننا توقّع ظهور المزيد من الفئات الجديدة التي تمثّل أنواعًا مختلفة من أجهزة الاستشعار.

من المجالات المهمة الأخرى التي يجب العمل عليها في المستقبل تحسين واجهة برمجة التطبيقات Generic Sensor API نفسها، إذ إنّ مواصفات Generic Sensor هي حاليًا "اقتراح مرشّح"، ما يعني أنّه لا يزال هناك وقت لإجراء إصلاحات وإضافة وظائف جديدة يحتاجها المطوّرون.

يمكنك المساعدة في ذلك.

بلغت مواصفات أداة الاستشعار مستوى النضج المقترح للمرشحين، وبالتالي، نقدّر كثيرًا الملاحظات الواردة من مطوّري الويب والمتصفّحات. يُرجى إعلامنا بالميزات التي تريد إضافتها أو التعديلات التي تريد إجراءها على واجهة برمجة التطبيقات الحالية.

يُرجى عدم التردد في إرسال مشاكل في المواصفات بالإضافة إلى الأخطاء في عملية التنفيذ على Chrome.

الموارد

• المشاريع التجريبية: https://w3c.github.io/generic-sensor-demos/
• مواصفات Generic Sensor API: https://w3c.github.io/sensors/
• مشاكل في المواصفات: https://github.com/w3c/sensors/issues
• القائمة البريدية لفريق العمل في W3C: public-device-apis@w3.org
• حالة ميزة Chrome: https://www.chromestatus.com/feature/5698781827825664
• أخطاء التنفيذ: http://crbug.com?q=component:Blink>Sensor

الإقرارات

راجع هذه المقالة جو ميدلي وكايس باسكس.