ওয়েবের জন্য সেন্সর, ওয়েবের জন্য সেন্সর

অ্যাক্সিলোমিটার, জাইরোস্কোপ এবং ম্যাগনেটোমিটারের মতো ডিভাইসে থাকা সেন্সরগুলিতে অ্যাক্সেস পেতে জেনেরিক সেন্সর API ব্যবহার করুন।

অ্যালেক্স শালামভ
Alex Shalamov
মিখাইল পোজডনিয়াকভ
Mikhail Pozdnyakov
টমাস স্টেইনার

আজকাল, অনেক প্ল্যাটফর্ম-নির্দিষ্ট অ্যাপ্লিকেশনে সেন্সর ডেটা ব্যবহার করা হয় যাতে ইমারসিভ গেমিং, ফিটনেস ট্র্যাকিং এবং অগমেন্টেড বা ভার্চুয়াল রিয়েলিটির মতো ব্যবহারের ক্ষেত্রে সক্ষম করা যায়। প্ল্যাটফর্ম-নির্দিষ্ট এবং ওয়েব অ্যাপ্লিকেশনের মধ্যে ব্যবধান পূরণ করা কি দুর্দান্ত হবে না? ওয়েবের জন্য জেনেরিক সেন্সর API লিখুন!

জেনেরিক সেন্সর API কী?

জেনেরিক সেন্সর API হল ইন্টারফেসের একটি সেট যা সেন্সর ডিভাইসগুলিকে ওয়েব প্ল্যাটফর্মে প্রকাশ করে। API-তে বেস Sensor ইন্টারফেস এবং উপরে নির্মিত কংক্রিট সেন্সর ক্লাসের একটি সেট থাকে। একটি বেস ইন্টারফেস থাকা কংক্রিট সেন্সর ক্লাসের জন্য বাস্তবায়ন এবং স্পেসিফিকেশন প্রক্রিয়াটিকে সহজ করে তোলে। উদাহরণস্বরূপ, Gyroscope ক্লাসটি একবার দেখুন। এটি অত্যন্ত ক্ষুদ্র! মূল কার্যকারিতা বেস ইন্টারফেস দ্বারা নির্দিষ্ট করা হয় এবং Gyroscope কেবল কৌণিক বেগের প্রতিনিধিত্বকারী তিনটি বৈশিষ্ট্য দিয়ে এটিকে প্রসারিত করে।

কিছু সেন্সর ক্লাস প্রকৃত হার্ডওয়্যার সেন্সরের সাথে ইন্টারফেস করে, যেমন, উদাহরণস্বরূপ, অ্যাক্সিলোমিটার বা জাইরোস্কোপ ক্লাস। এগুলিকে নিম্ন-স্তরের সেন্সর বলা হয়। অন্যান্য সেন্সর, যাকে ফিউশন সেন্সর বলা হয়, বিভিন্ন নিম্ন স্তরের সেন্সর থেকে ডেটা একত্রিত করে এমন তথ্য প্রকাশ করে যা অন্যথায় একটি স্ক্রিপ্টের গণনার প্রয়োজন হবে। উদাহরণস্বরূপ, AbsoluteOrientation সেন্সর অ্যাক্সিলোমিটার, জাইরোস্কোপ এবং ম্যাগনেটোমিটার থেকে প্রাপ্ত ডেটার উপর ভিত্তি করে একটি ব্যবহারের জন্য প্রস্তুত চার-বাই-চার ঘূর্ণন ম্যাট্রিক্স সরবরাহ করে।

তুমি হয়তো ভাবছো যে ওয়েব প্ল্যাটফর্মটি ইতিমধ্যেই সেন্সর ডেটা সরবরাহ করে এবং তুমি একেবারে ঠিক বলেছো! উদাহরণস্বরূপ, DeviceMotion এবং DeviceOrientation ইভেন্টগুলি মোশন সেন্সর ডেটা প্রকাশ করে। তাহলে আমাদের কেন একটি নতুন API প্রয়োজন?

বিদ্যমান ইন্টারফেসের সাথে তুলনা করলে, জেনেরিক সেন্সর API অনেক সুবিধা প্রদান করে:

  • জেনেরিক সেন্সর API হল একটি সেন্সর ফ্রেমওয়ার্ক যা সহজেই নতুন সেন্সর ক্লাসের সাথে বাড়ানো যেতে পারে এবং এই প্রতিটি ক্লাস জেনেরিক ইন্টারফেস বজায় রাখবে। এক ধরণের সেন্সরের জন্য লেখা ক্লায়েন্ট কোড খুব কম পরিবর্তনের মাধ্যমে অন্য ধরণের জন্য পুনরায় ব্যবহার করা যেতে পারে!
  • আপনি সেন্সরটি কনফিগার করতে পারেন। উদাহরণস্বরূপ, আপনি আপনার অ্যাপ্লিকেশনের প্রয়োজনের জন্য উপযুক্ত নমুনা ফ্রিকোয়েন্সি সেট করতে পারেন।
  • প্ল্যাটফর্মে সেন্সর আছে কিনা তা আপনি সনাক্ত করতে পারবেন।
  • সেন্সর রিডিংগুলিতে উচ্চ নির্ভুলতা টাইমস্ট্যাম্প থাকে, যা আপনার অ্যাপ্লিকেশনের অন্যান্য ক্রিয়াকলাপের সাথে আরও ভাল সিঙ্ক্রোনাইজেশন সক্ষম করে।
  • সেন্সর ডেটা মডেল এবং স্থানাঙ্ক সিস্টেমগুলি স্পষ্টভাবে সংজ্ঞায়িত করা হয়েছে, যা ব্রাউজার বিক্রেতাদের আন্তঃকার্যযোগ্য সমাধানগুলি বাস্তবায়নের অনুমতি দেয়।
  • জেনেরিক সেন্সর ভিত্তিক ইন্টারফেসগুলি DOM-এর সাথে আবদ্ধ নয় (অর্থাৎ তারা navigator বা window অবজেক্ট নয়), এবং এটি পরিষেবা কর্মীদের মধ্যে API ব্যবহার করার জন্য বা হেডলেস জাভাস্ক্রিপ্ট রানটাইম, যেমন এমবেডেড ডিভাইসগুলিতে এটি বাস্তবায়নের জন্য ভবিষ্যতের সুযোগগুলি উন্মুক্ত করে।
  • জেনেরিক সেন্সর API-এর জন্য নিরাপত্তা এবং গোপনীয়তার দিকগুলি সর্বোচ্চ অগ্রাধিকার এবং পুরানো সেন্সর API-এর তুলনায় এটি অনেক ভালো নিরাপত্তা প্রদান করে। পারমিশন API-এর সাথে ইন্টিগ্রেশন রয়েছে।
  • Accelerometer , Gyroscope , LinearAccelerationSensor , AbsoluteOrientationSensor , RelativeOrientationSensor এবং Magnetometer জন্য স্ক্রিন স্থানাঙ্কের সাথে স্বয়ংক্রিয় সিঙ্ক্রোনাইজেশন উপলব্ধ।

উপলব্ধ জেনেরিক সেন্সর API গুলি

লেখার সময়, বেশ কয়েকটি সেন্সর রয়েছে যা আপনি পরীক্ষা-নিরীক্ষা করতে পারেন।

মোশন সেন্সর:

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

পরিবেশগত সেন্সর:

  • AmbientLightSensor (ক্রোমিয়ামে #enable-generic-sensor-extra-classes ফ্ল্যাগের পিছনে।)
  • Magnetometer (Chromium-এ #enable-generic-sensor-extra-classes পতাকার পিছনে।)

বৈশিষ্ট্য সনাক্তকরণ

হার্ডওয়্যার API গুলির বৈশিষ্ট্য সনাক্তকরণ জটিল, কারণ আপনাকে ব্রাউজারটি প্রশ্নবিদ্ধ ইন্টারফেস সমর্থন করে কিনা এবং ডিভাইসটিতে সংশ্লিষ্ট সেন্সর আছে কিনা উভয়ই সনাক্ত করতে হবে। ব্রাউজারটি কোনও ইন্টারফেস সমর্থন করে কিনা তা পরীক্ষা করা সহজ। ( উপরে উল্লিখিত অন্য কোনও ইন্টারফেস দিয়ে 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;
  }
}

পলিফিল

যেসব ব্রাউজার জেনেরিক সেন্সর API সমর্থন করে না, তাদের জন্য একটি পলিফিল উপলব্ধ। পলিফিল আপনাকে শুধুমাত্র প্রাসঙ্গিক সেন্সরের বাস্তবায়ন লোড করতে দেয়।

// 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 সেন্সরটি তিনটি অক্ষে (X, Y, এবং Z) সেন্সরটি ধারণকারী ডিভাইসের ত্বরণ পরিমাপ করে। এই সেন্সরটি একটি জড় সেন্সর, যার অর্থ হল যখন ডিভাইসটি রৈখিক মুক্ত পতনে থাকে, তখন মোট পরিমাপ করা ত্বরণ হবে 0 m/s 2 , এবং যখন একটি ডিভাইস একটি টেবিলের উপর সমতলভাবে শুয়ে থাকে, তখন উপরের দিকে (Z অক্ষ) ত্বরণ পৃথিবীর মাধ্যাকর্ষণের সমান হবে, অর্থাৎ g ≈ +9.8 m/s 2 কারণ এটি ডিভাইসটিকে উপরের দিকে ঠেলে দেওয়ার টেবিলের বল পরিমাপ করছে। যদি আপনি ডিভাইসটিকে ডানদিকে ঠেলে দেন, তাহলে X অক্ষের ত্বরণ ধনাত্মক হবে, অথবা যদি ডিভাইসটি ডান থেকে বাম দিকে ত্বরান্বিত হয় তবে ঋণাত্মক হবে।

অ্যাক্সিলোমিটারগুলি ধাপ গণনা, গতি সংবেদন, অথবা সহজ ডিভাইস ওরিয়েন্টেশনের জন্য ব্যবহার করা যেতে পারে। প্রায়শই, অ্যাক্সিলোমিটার পরিমাপ অন্যান্য উৎস থেকে প্রাপ্ত তথ্যের সাথে একত্রিত করে ফিউশন সেন্সর তৈরি করা হয়, যেমন, ওরিয়েন্টেশন সেন্সর।

LinearAccelerationSensor সেন্সর হোস্টিং ডিভাইসে প্রয়োগ করা ত্বরণ পরিমাপ করে, মাধ্যাকর্ষণ অবদান বাদ দিয়ে। যখন একটি ডিভাইস স্থির থাকে, উদাহরণস্বরূপ টেবিলের উপর সমতলভাবে শুয়ে থাকে, তখন সেন্সরটি তিনটি অক্ষে ≈ 0 মি/সেকেন্ড 2 ত্বরণ পরিমাপ করবে।

মাধ্যাকর্ষণ সেন্সর

ব্যবহারকারীদের পক্ষে Accelerometer এবং LinearAccelerometer রিডিং ম্যানুয়ালি পরিদর্শন করে মাধ্যাকর্ষণ সেন্সরের কাছাকাছি রিডিং ম্যানুয়ালি বের করা ইতিমধ্যেই সম্ভব, তবে এটি জটিল হতে পারে এবং এই সেন্সরগুলির দ্বারা প্রদত্ত মানের নির্ভুলতার উপর নির্ভর করে। অ্যান্ড্রয়েডের মতো প্ল্যাটফর্মগুলি অপারেটিং সিস্টেমের অংশ হিসাবে মাধ্যাকর্ষণ রিডিং প্রদান করতে পারে, যা গণনার দিক থেকে সস্তা হওয়া উচিত, ব্যবহারকারীর হার্ডওয়্যারের উপর নির্ভর করে আরও সঠিক মান প্রদান করা উচিত এবং API এরগনোমিক্সের ক্ষেত্রে ব্যবহার করা সহজ। GravitySensor ডিভাইসের X, Y এবং Z অক্ষ বরাবর ত্বরণের প্রভাব ফেরত দেয়।

জাইরোস্কোপ

জাইরোস্কোপ সেন্সর পরিমাপ

Gyroscope সেন্সর ডিভাইসের স্থানীয় X, Y এবং Z অক্ষের চারপাশে প্রতি সেকেন্ডে রেডিয়ানে কৌণিক বেগ পরিমাপ করে। বেশিরভাগ গ্রাহক ডিভাইসে যান্ত্রিক ( MEMS ) জাইরোস্কোপ থাকে, যা জড়তা সেন্সর যা জড়তা কোরিওলিস বলের উপর ভিত্তি করে ঘূর্ণন হার পরিমাপ করে। MEMS জাইরোস্কোপগুলি সেন্সরের মহাকর্ষীয় সংবেদনশীলতার কারণে সৃষ্ট ড্রিফট প্রবণতার সম্মুখীন হয় যা সেন্সরের অভ্যন্তরীণ যান্ত্রিক ব্যবস্থাকে বিকৃত করে। জাইরোস্কোপগুলি আপেক্ষিক উচ্চ ফ্রিকোয়েন্সিতে দোদুল্যমান হয়, যেমন, 10s kHz, এবং তাই, অন্যান্য সেন্সরের তুলনায় বেশি শক্তি খরচ করতে পারে।

ওরিয়েন্টেশন সেন্সর

পরম ওরিয়েন্টেশন সেন্সর পরিমাপ

AbsoluteOrientationSensor সেন্সর হল একটি ফিউশন সেন্সর যা পৃথিবীর স্থানাঙ্ক ব্যবস্থার সাথে সম্পর্কিত একটি ডিভাইসের ঘূর্ণন পরিমাপ করে, অন্যদিকে RelativeOrientationSensor একটি স্থির রেফারেন্স স্থানাঙ্ক ব্যবস্থার সাথে সম্পর্কিত গতি সেন্সর হোস্টিং ডিভাইসের ঘূর্ণন প্রতিনিধিত্বকারী ডেটা সরবরাহ করে।

সকল আধুনিক 3D জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক ঘূর্ণন উপস্থাপনের জন্য কোয়াটারনিয়ন এবং রোটেশন ম্যাট্রিক্স সমর্থন করে; তবে, যদি আপনি সরাসরি WebGL ব্যবহার করেন, তাহলে OrientationSensor এ সুবিধাজনকভাবে একটি quaternion প্রোপার্টি এবং একটি populateMatrix() পদ্ধতি উভয়ই রয়েছে। এখানে কয়েকটি স্নিপেট দেওয়া হল:

থ্রি.জেএস

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

ওরিয়েন্টেশন সেন্সরগুলি বিভিন্ন ব্যবহারের ক্ষেত্রে সক্ষম করে, যেমন ইমারসিভ গেমিং, অগমেন্টেড এবং ভার্চুয়াল রিয়েলিটি।

মোশন সেন্সর, উন্নত ব্যবহারের কেস এবং প্রয়োজনীয়তা সম্পর্কে আরও তথ্যের জন্য, মোশন সেন্সর ব্যাখ্যাকারী নথিটি দেখুন।

স্ক্রিন স্থানাঙ্কের সাথে সিঙ্ক্রোনাইজেশন

ডিফল্টরূপে, স্থানিক সেন্সরের রিডিংগুলি একটি স্থানীয় স্থানাঙ্ক সিস্টেমে সমাধান করা হয় যা ডিভাইসের সাথে আবদ্ধ থাকে এবং স্ক্রিন ওরিয়েন্টেশনকে বিবেচনায় নেয় না।

ডিভাইস স্থানাঙ্ক সিস্টেম
ডিভাইস স্থানাঙ্ক সিস্টেম

তবে, গেমস বা অগমেন্টেড এবং ভার্চুয়াল রিয়েলিটির মতো অনেক ব্যবহারের ক্ষেত্রে সেন্সর রিডিংগুলিকে একটি স্থানাঙ্ক সিস্টেমে সমাধান করতে হয় যা পরিবর্তে স্ক্রিন ওরিয়েন্টেশনের সাথে আবদ্ধ থাকে।

স্ক্রিন স্থানাঙ্ক সিস্টেম
স্ক্রিন স্থানাঙ্ক সিস্টেম

পূর্বে, জাভাস্ক্রিপ্টে সেন্সর রিডিংগুলিকে স্ক্রিন স্থানাঙ্কে রিম্যাপ করার পদ্ধতি প্রয়োগ করতে হত। এই পদ্ধতিটি অদক্ষ এবং এটি ওয়েব অ্যাপ্লিকেশন কোডের জটিলতাও উল্লেখযোগ্যভাবে বৃদ্ধি করে; ওয়েব অ্যাপ্লিকেশনকে স্ক্রিন ওরিয়েন্টেশন পরিবর্তনগুলি পর্যবেক্ষণ করতে হবে এবং সেন্সর রিডিংয়ের জন্য স্থানাঙ্ক রূপান্তর সম্পাদন করতে হবে, যা ইউলার কোণ বা কোয়াটারনিয়নের জন্য করা কোনও তুচ্ছ কাজ নয়।

জেনেরিক সেন্সর 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' });

চলো কোড করি!

জেনেরিক সেন্সর API খুবই সহজ এবং ব্যবহার করা সহজ! সেন্সর ইন্টারফেসে সেন্সর অবস্থা নিয়ন্ত্রণ করার জন্য start() এবং stop() পদ্ধতি এবং সেন্সর সক্রিয়করণ, ত্রুটি এবং নতুন উপলব্ধ রিডিং সম্পর্কে বিজ্ঞপ্তি পাওয়ার জন্য বেশ কয়েকটি ইভেন্ট হ্যান্ডলার রয়েছে। কংক্রিট সেন্সর ক্লাসগুলি সাধারণত বেস ক্লাসে তাদের নির্দিষ্ট রিডিং অ্যাট্রিবিউট যোগ করে।

উন্নয়ন পরিবেশ

ডেভেলপমেন্টের সময় আপনি localhost এর মাধ্যমে সেন্সর ব্যবহার করতে পারবেন। যদি আপনি মোবাইল ডিভাইসের জন্য ডেভেলপমেন্ট করেন, তাহলে আপনার স্থানীয় সার্ভারের জন্য পোর্ট ফরওয়ার্ডিং সেট আপ করুন, এবং আপনি দারুন কাজ করতে প্রস্তুত!

আপনার কোড প্রস্তুত হয়ে গেলে, এটি HTTPS সমর্থন করে এমন একটি সার্ভারে স্থাপন করুন। GitHub পৃষ্ঠাগুলি HTTPS এর মাধ্যমে পরিবেশিত হয়, যা এটিকে আপনার ডেমো শেয়ার করার জন্য একটি দুর্দান্ত জায়গা করে তোলে।

3D মডেল ঘূর্ণন

এই সহজ উদাহরণে, আমরা একটি 3D মডেলের ঘূর্ণন কোয়াটারনিয়ন পরিবর্তন করতে একটি পরম ওরিয়েন্টেশন সেন্সর থেকে ডেটা ব্যবহার করি। model একটি three.js Object3D ক্লাস ইনস্ট্যান্স যার একটি quaternion বৈশিষ্ট্য রয়েছে। ওরিয়েন্টেশন ফোন ডেমো থেকে নিম্নলিখিত কোড স্নিপেটটি দেখায় যে কীভাবে পরম ওরিয়েন্টেশন সেন্সর একটি 3D মডেল ঘোরানোর জন্য ব্যবহার করা যেতে পারে।

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

WebGL দৃশ্যের মধ্যে 3D model ঘূর্ণনে ডিভাইসের ওরিয়েন্টেশন প্রতিফলিত হবে।

সেন্সর 3D মডেলের ওরিয়েন্টেশন আপডেট করে
সেন্সর একটি 3D মডেলের ওরিয়েন্টেশন আপডেট করে

পাঞ্চমিটার

নিম্নলিখিত কোড স্নিপেটটি পাঞ্চমিটার ডেমো থেকে নেওয়া হয়েছে, যা দেখায় যে কীভাবে রৈখিক ত্বরণ সেন্সর ব্যবহার করে একটি ডিভাইসের সর্বোচ্চ বেগ গণনা করা যেতে পারে যদি ধরে নেওয়া হয় যে এটি প্রাথমিকভাবে স্থির অবস্থায় রয়েছে।

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 DevTools ব্যবহার করে ডিবাগিং এবং সেন্সর ওভাররাইডিং

কিছু ক্ষেত্রে জেনেরিক সেন্সর API ব্যবহার করার জন্য আপনার কোনও ফিজিক্যাল ডিভাইসের প্রয়োজন হয় না। ডিভাইস ওরিয়েন্টেশন সিমুলেট করার জন্য Chrome DevTools-এর দুর্দান্ত সমর্থন রয়েছে।

ভার্চুয়াল ফোনের কাস্টম ওরিয়েন্টেশন ডেটা ওভাররাইড করতে ব্যবহৃত Chrome DevTools
Chrome DevTools ব্যবহার করে ডিভাইস ওরিয়েন্টেশন সিমুলেট করা

গোপনীয়তা এবং নিরাপত্তা

সেন্সর রিডিং হল সংবেদনশীল ডেটা যা ক্ষতিকারক ওয়েব পৃষ্ঠাগুলি থেকে বিভিন্ন আক্রমণের শিকার হতে পারে। জেনেরিক সেন্সর API বাস্তবায়ন সম্ভাব্য সুরক্ষা এবং গোপনীয়তার ঝুঁকি কমাতে কিছু সীমাবদ্ধতা আরোপ করে। API ব্যবহার করতে ইচ্ছুক ডেভেলপারদের এই সীমাবদ্ধতাগুলি অবশ্যই বিবেচনায় নেওয়া উচিত, তাই আসুন সংক্ষেপে সেগুলি তালিকাভুক্ত করি।

শুধুমাত্র HTTPS

জেনেরিক সেন্সর API একটি শক্তিশালী বৈশিষ্ট্য হওয়ায়, ব্রাউজারটি কেবল সুরক্ষিত প্রসঙ্গে এটির অনুমতি দেয়। বাস্তবে এর অর্থ হল জেনেরিক সেন্সর API ব্যবহার করার জন্য আপনাকে HTTPS এর মাধ্যমে আপনার পৃষ্ঠাটি অ্যাক্সেস করতে হবে। বিকাশের সময় আপনি http://localhost এর মাধ্যমে এটি করতে পারেন তবে উৎপাদনের জন্য আপনার সার্ভারে HTTPS থাকা প্রয়োজন। সর্বোত্তম অনুশীলন এবং নির্দেশিকাগুলির জন্য নিরাপদ এবং সুরক্ষিত সংগ্রহটি দেখুন।

অনুমতি নীতি ইন্টিগ্রেশন

জেনেরিক সেন্সর API-তে অনুমতি নীতি ইন্টিগ্রেশন একটি ফ্রেমের জন্য সেন্সর ডেটাতে অ্যাক্সেস নিয়ন্ত্রণ করে।

ডিফল্টরূপে Sensor অবজেক্টগুলি শুধুমাত্র একটি প্রধান ফ্রেম বা একই-অরিজিন সাবফ্রেমের মধ্যেই তৈরি করা যেতে পারে, ফলে ক্রস-অরিজিন আইফ্রেমগুলিকে সেন্সর ডেটার অ-অনুমোদিত পঠন থেকে বিরত রাখা যায়। এই ডিফল্ট আচরণটি সংশ্লিষ্ট নীতি-নিয়ন্ত্রিত বৈশিষ্ট্যগুলিকে স্পষ্টভাবে সক্ষম বা অক্ষম করে পরিবর্তন করা যেতে পারে।

নীচের স্নিপেটটি একটি ক্রস-অরিজিন আইফ্রেমে অ্যাক্সিলোমিটার ডেটা অ্যাক্সেস প্রদানের চিত্র তুলে ধরে, যার অর্থ এখন সেখানে Accelerometer বা LinearAccelerationSensor অবজেক্ট তৈরি করা যেতে পারে। 

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

সেন্সর রিডিং ডেলিভারি স্থগিত করা যেতে পারে

সেন্সর রিডিং শুধুমাত্র একটি দৃশ্যমান ওয়েব পৃষ্ঠার মাধ্যমে অ্যাক্সেসযোগ্য, অর্থাৎ, যখন ব্যবহারকারী আসলে এটির সাথে ইন্টারঅ্যাক্ট করছেন। তাছাড়া, ব্যবহারকারীর ফোকাস ক্রস-অরিজিন সাবফ্রেমে পরিবর্তিত হলে প্যারেন্ট ফ্রেমে সেন্সর ডেটা সরবরাহ করা হবে না। এটি প্যারেন্ট ফ্রেমকে ব্যবহারকারীর ইনপুট অনুমান করতে বাধা দেয়।

এরপর কী?

অদূর ভবিষ্যতে অ্যাম্বিয়েন্ট লাইট সেন্সর বা প্রক্সিমিটি সেন্সরের মতো ইতিমধ্যেই নির্দিষ্ট সেন্সর ক্লাসগুলির একটি সেট বাস্তবায়িত হবে; তবে, জেনেরিক সেন্সর ফ্রেমওয়ার্কের দুর্দান্ত এক্সটেনসিবিলিটির জন্য ধন্যবাদ, আমরা বিভিন্ন ধরণের সেন্সরের প্রতিনিধিত্বকারী আরও নতুন ক্লাসের আবির্ভাবের প্রত্যাশা করতে পারি।

ভবিষ্যতের কাজের আরেকটি গুরুত্বপূর্ণ ক্ষেত্র হল জেনেরিক সেন্সর API-এর উন্নতি করা। জেনেরিক সেন্সর স্পেসিফিকেশন বর্তমানে একটি প্রার্থী সুপারিশ, যার অর্থ হল এখনও সংশোধন করার এবং ডেভেলপারদের প্রয়োজনীয় নতুন কার্যকারিতা আনার সময় আছে।

তুমি সাহায্য করতে পারো!

সেন্সর স্পেসিফিকেশনগুলি প্রার্থী সুপারিশের পরিপক্কতার স্তরে পৌঁছেছে, তাই, ওয়েব এবং ব্রাউজার ডেভেলপারদের প্রতিক্রিয়া অত্যন্ত প্রশংসিত। বর্তমান API-তে কোন বৈশিষ্ট্যগুলি যুক্ত করা ভাল হবে বা আপনি যদি কিছু পরিবর্তন করতে চান তবে আমাদের জানান।

Chrome বাস্তবায়নের জন্য স্পেসিফিকেশন সমস্যাগুলির পাশাপাশি বাগগুলি দায়ের করতে দ্বিধা করবেন না।

রিসোর্স

স্বীকৃতি

এই প্রবন্ধটি জো মেডলি এবং কেইস বাস্কস দ্বারা পর্যালোচনা করা হয়েছে।