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

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

Alex Shalamov

Mikhail Pozdnyakov

Thomas Steiner

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

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

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

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

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

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

• Generic Sensor API هي إطار عمل لأجهزة الاستشعار يمكن توسيعه بسهولة باستخدام فئات أجهزة استشعار جديدة، وستحتفظ كل فئة من هذه الفئات بالواجهة العامة. ويمكن إعادة استخدام رمز العميل المكتوب لنوع واحد من أجهزة الاستشعار لنوع آخر مع إجراء تعديلات قليلة جدًا!
• يمكنك ضبط أداة الاستشعار. على سبيل المثال، يمكنك ضبط معدّل أخذ العينات المناسب لاحتياجات تطبيقك.
• يمكنك معرفة ما إذا كان جهاز الاستشعار متوفّرًا على المنصة.
• قراءات أجهزة الاستشعار لها طوابع زمنية عالية الدقة، ما يتيح مزامنة أفضل مع الأنشطة الأخرى في تطبيقك.
• تم تحديد نماذج بيانات أجهزة الاستشعار وأنظمة التنسيق بوضوح، ما يسمح لموفّري المتصفحات ب تنفيذ حلول قابلة للتشغيل التفاعلي.
• لا تكون الواجهات المستندة إلى Generic Sensor مرتبطة بـ DOM (أي أنّها ليست عناصر navigator أو window)، ما يفتح فرصًا مستقبلية لاستخدام واجهة برمجة التطبيقات ضمن معالجي الخدمة أو تنفيذها في أوقات تشغيل JavaScript بدون واجهة مستخدم، مثل الأجهزة المضمّنة.
• تُعدّ جوانب الأمان والخصوصية من أهم أولويات واجهة برمجة التطبيقات Generic Sensor API، كما أنّها توفّر مستوى أمان أفضل بكثير مقارنةً بواجهات برمجة تطبيقات أجهزة الاستشعار القديمة. هناك عملية دمج مع واجهة برمجة التطبيقات 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. يسمح لك ال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 التسارع في جهاز يستضيف أداة الاستشعار على ثلاثة محاور (س وص وz). هذا المستشعر عبارة عن جهاز استشعار قصور قضائي، ما يعني أنّه عندما يكون الجهاز في وضع السقوط الحر الخطي، سيكون إجمالي التسارع الذي تم قياسه 0 م/ث²، وعندما يكون جهاز مستلقيًا على سطح مستوٍ على طاولة، سيكون التسارع في الاتجاه لأعلى (المحور Z) مساويًا لجاذبية الأرض، أي دفع الجهاز نحو أعلى بمسافة ^{9.8 ميكرومتر. فإذا دفعت الجهاز إلى اليمين، سيكون التسارع على المحور "س" موجبًا أو سالبًا في حال تسريع الجهاز من اليمين إلى اليسار.}

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

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

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

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

الجيروسكوب

يقيس مستشعر 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 لإعادة تخصيص قراءات أجهزة الاستشعار مع إحداثيات الشاشة. هذا النهج غير فعّال، كما أنّه يزيد من تعقيد رمز تطبيق الويب بشكل كبير، إذ يجب أن يراقب تطبيق الويب تغييرات اتجاه الشاشة ويُجري عمليات تحويل إحداثيات قراءات أجهزة الاستشعار، وهو أمر ليس بسيطًا بالنسبة إلى زوايا Euler أو الأعداد الرباعية.

توفّر 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 من ثلاثة عناصر تحتوي على السمة quaternion. يوضّح المقتطف البرمجي التالي من عرض orientation phone كيفية استخدام أداة استشعار الاتجاه المطلق لتدوير تصميم ثلاثي الأبعاد.

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"

في بعض الحالات، لا تحتاج إلى جهاز فعلي لتشغيل واجهة برمجة التطبيقات General Sensor API. تتيح لك Chrome DevTools محاكاة اتجاه الجهاز.

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

إنّ قراءات أجهزة الاستشعار هي بيانات حسّاسة يمكن أن تتعرّض لهجمات مختلفة من صفحات الويب الضارّة. تفرض عمليات تنفيذ واجهات برمجة التطبيقات 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 API نفسها، علمًا بأنّ مواصفات Generic Sensor هي حاليًا اقتراح مرشح، ما يعني أنّه لا يزال هناك وقت لإجراء إصلاحات وتقديم وظائف جديدة يحتاجها المطوّرون.

يمكنك تقديم المساعدة.

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

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

الموارد

• المشاريع التجريبية: https://intel.github.io/generic-sensor-demos/
• مواصفات واجهة برمجة التطبيقات العامة لجهاز الاستشعار: 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

الشكر والتقدير

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