เซ็นเซอร์สำหรับเว็บ

ใช้ General Sensor API เพื่อเข้าถึงเซ็นเซอร์ในอุปกรณ์ เช่น ตัวตรวจวัดความเร่ง เครื่องวัดการหมุน และเครื่องวัดค่าความเข้มข้นของสนามแม่เหล็ก

Alex Shalamov
Alex Shalamov
Mikhail Pozdnyakov
Mikhail Pozdnyakov
Thomas Steiner

ปัจจุบันมีการใช้ข้อมูลเซ็นเซอร์ในแอปพลิเคชันเฉพาะแพลตฟอร์มเพื่อเปิดใช้กรณีการใช้งานต่างๆ เช่น การเล่นเกมที่สมจริง การติดตามการออกกำลังกาย และ Augmented หรือ Virtual Reality คงจะดีไม่น้อยถ้าเราจะช่วย อุดช่องว่างระหว่างแต่ละแพลตฟอร์มกับเว็บแอปพลิเคชัน ป้อน General Sensor API สําหรับเว็บ

General Sensor API คืออะไร

General Sensor API คือชุดอินเทอร์เฟซที่แสดงอุปกรณ์เซ็นเซอร์ต่อแพลตฟอร์มเว็บ API ประกอบด้วยอินเทอร์เฟซ Sensor พื้นฐานและชุดคลาสเซ็นเซอร์คอนกรีตที่สร้างขึ้นด้านบน การมีอินเทอร์เฟซพื้นฐานจะลดความซับซ้อนของกระบวนการนำไปใช้และข้อมูลจำเพาะสำหรับคลาสเซ็นเซอร์ที่เป็นรูปธรรม เช่น ดูชั้นเรียน Gyroscope ภาพนี้มีขนาดเล็กมาก! อินเทอร์เฟซพื้นฐานเป็นตัวกำหนดฟังก์ชันหลัก และ Gyroscope ขยายการทำงานด้วยแอตทริบิวต์ 3 ตัวที่แสดงความเร็วเชิงมุม

คลาสเซ็นเซอร์บางส่วนเชื่อมต่อกับเซ็นเซอร์ฮาร์ดแวร์จริง เช่น คลาสตัวตรวจวัดความเร่งหรือเครื่องวัดการหมุน เซ็นเซอร์เหล่านี้เรียกว่าเซ็นเซอร์ระดับต่ำ เซ็นเซอร์อื่นๆ จะเรียกว่าเซ็นเซอร์ฟิวชัน จะผสานข้อมูลจากเซ็นเซอร์ระดับต่ำหลายตัวเพื่อแสดงข้อมูลที่สคริปต์จะต้องคำนวณ เช่น เซ็นเซอร์ AbsoluteOrientation จะให้เมทริกซ์การหมุนแบบ 4 x 4 ที่พร้อมใช้งานโดยอิงตามข้อมูลที่ได้จากตัวตรวจวัดความเร่ง เครื่องวัดการหมุน และเครื่องวัดค่าความเข้มข้นของสนามแม่เหล็ก

คุณอาจคิดว่าแพลตฟอร์มเว็บนี้ให้ข้อมูลเซ็นเซอร์อยู่แล้ว และคุณพูดถูกแล้ว สำหรับอินสแตนซ์ เหตุการณ์ DeviceMotion และ DeviceOrientation จะแสดงข้อมูลเซ็นเซอร์ตรวจจับการเคลื่อนไหว แล้วทำไมเราถึงต้องมี API ใหม่

เมื่อเปรียบเทียบกับอินเทอร์เฟซที่มีอยู่ General Sensor API มีข้อดีหลายอย่าง ดังนี้

  • ทั่วไป Sensor API คือเฟรมเวิร์กเซ็นเซอร์ที่ขยายได้โดยง่ายด้วยคลาสเซ็นเซอร์ใหม่ และแต่ละคลาสเหล่านี้จะยังคงมีอินเทอร์เฟซทั่วไป รหัสไคลเอ็นต์ที่เขียนไว้สำหรับเซ็นเซอร์ประเภทหนึ่งจะนำมาใช้ซ้ำกับเซ็นเซอร์อีกประเภทหนึ่งได้โดยมีการปรับเปลี่ยนเพียงเล็กน้อย
  • คุณกำหนดค่าเซ็นเซอร์ได้ ตัวอย่างเช่น คุณตั้งค่าความถี่ในการสุ่มตัวอย่างที่เหมาะกับความต้องการของแอปพลิเคชันได้
  • คุณตรวจสอบได้ว่ามีเซ็นเซอร์พร้อมใช้งานบนแพลตฟอร์มหรือไม่
  • ค่าจากเซ็นเซอร์มีการประทับเวลาที่มีความแม่นยำสูง ทำให้ซิงค์กับกิจกรรมอื่นๆ ในแอปพลิเคชันได้ดียิ่งขึ้น
  • โมเดลข้อมูลเซ็นเซอร์และระบบพิกัดได้รับการระบุไว้อย่างชัดเจน ช่วยให้ผู้ให้บริการเบราว์เซอร์สามารถใช้โซลูชันที่ทำงานร่วมกันได้
  • อินเทอร์เฟซที่ใช้เซ็นเซอร์ทั่วไปไม่ได้ผูกกับ DOM (หมายความว่าไม่ใช่ออบเจ็กต์ navigator หรือ window) และเป็นโอกาสในอนาคตในการใช้ API ภายในผู้ให้บริการหรือติดตั้งใช้งานในรันไทม์ JavaScript แบบไม่มีส่วนหัว เช่น อุปกรณ์แบบฝัง
  • ความปลอดภัยและความเป็นส่วนตัวคือสิ่งสำคัญสูงสุดของ API เซ็นเซอร์ทั่วไปและมีความปลอดภัยมากกว่าเมื่อเทียบกับ API เซ็นเซอร์รุ่นเก่า มีการผสานรวมกับ Permissions API
  • การซิงค์อัตโนมัติกับพิกัดหน้าจอสามารถใช้ได้สำหรับ Accelerometer, Gyroscope, LinearAccelerationSensor, AbsoluteOrientationSensor, RelativeOrientationSensor และ Magnetometer

API เซ็นเซอร์ทั่วไปที่พร้อมใช้งาน

ณ เวลาที่เขียนบทความ มีเซ็นเซอร์หลายตัวที่คุณสามารถทดลองใช้ได้

เซ็นเซอร์ตรวจจับการเคลื่อนไหว:

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

เซ็นเซอร์ตรวจจับสภาพแวดล้อม:

  • AmbientLightSensor (ด้านหลังธง #enable-generic-sensor-extra-classes ใน Chromium)
  • Magnetometer (ด้านหลังธง #enable-generic-sensor-extra-classes ใน Chromium)

การตรวจหาฟีเจอร์

การตรวจหาฟีเจอร์ของ API ฮาร์ดแวร์นั้นเป็นเรื่องยาก เนื่องจากคุณต้องตรวจสอบทั้ง 2 อย่างว่าเบราว์เซอร์รองรับอินเทอร์เฟซที่เป็นปัญหาหรือไม่ และอุปกรณ์มีเซ็นเซอร์ที่สอดคล้องกันหรือไม่ การตรวจสอบว่าเบราว์เซอร์รองรับอินเทอร์เฟซนั้นตรงไปตรงมาหรือไม่ (แทนที่ 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;
  }
}

ใยโพลีเอสเตอร์

สำหรับเบราว์เซอร์ที่ไม่รองรับ General 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 จะวัดความเร่งของอุปกรณ์ที่โฮสต์เซ็นเซอร์ 3 แกน (X, Y และ Z) เซ็นเซอร์นี้เป็นเซ็นเซอร์ตรวจจับซ้ำ ซึ่งหมายความว่าเมื่ออุปกรณ์อยู่ในแนวราบ ความเร่งรวมที่วัดได้จะเป็น 0 เมตร/วินาที2 และเมื่ออุปกรณ์วางราบอยู่บนโต๊ะ ความเร่งในทิศทางขึ้น (แกน Z) จะเท่ากับแรงโน้มถ่วงของโลก เช่น แรงดันที่วัดขึ้น2 ตามตาราง หากคุณดันอุปกรณ์ไปทางขวา การเร่งบนแกน X จะเป็นบวก หรือเป็นลบหากมีการเร่งอุปกรณ์จากด้านขวาไปด้านซ้าย

ตัวตรวจวัดความเร่งสามารถใช้กับสิ่งต่างๆ เช่น การนับก้าว การตรวจจับการเคลื่อนไหว หรือการจัดวางอุปกรณ์แบบง่าย บ่อยครั้งที่การวัดตัวตรวจวัดความเร่งจะรวมกับข้อมูลจากแหล่งที่มาอื่นๆ เพื่อสร้างเซ็นเซอร์ฟิวชัน เช่น เซ็นเซอร์การวางแนว

LinearAccelerationSensor จะวัดความเร่งที่ใช้กับอุปกรณ์ที่โฮสต์เซ็นเซอร์ โดยไม่รวมแรงโน้มถ่วง เมื่ออุปกรณ์ไม่มีการใช้งาน เช่น วางราบบนโต๊ะ เซ็นเซอร์จะวัดความเร่ง 0 เมตร/วินาที2 บน 3 แกน

เซ็นเซอร์แรงโน้มถ่วง

ผู้ใช้สามารถอ่านค่าได้ใกล้เคียงกับเซ็นเซอร์แรงโน้มถ่วงด้วยตนเองโดยการตรวจสอบค่า Accelerometer และ LinearAccelerometer ด้วยตนเอง แต่การดำเนินการนี้อาจยุ่งยากและขึ้นอยู่กับความถูกต้องของค่าที่เซ็นเซอร์เหล่านั้นให้ไว้ แพลตฟอร์มอย่าง Android สามารถให้ค่าแรงโน้มถ่วงที่เป็นส่วนหนึ่งของระบบปฏิบัติการได้ ซึ่งควรถูกกว่าในแง่ของการคำนวณ ให้ค่าที่แม่นยํามากกว่าโดยขึ้นอยู่กับฮาร์ดแวร์ของผู้ใช้ และใช้ได้ง่ายขึ้นในแง่ของหลักการยศาสตร์ของ API GravitySensor จะแสดงผลการเร่งความเร็วตามแกน X, Y และ Z ของอุปกรณ์เนื่องจากแรงโน้มถ่วง

เครื่องวัดการหมุน

การวัดเซ็นเซอร์เครื่องวัดการหมุน

เซ็นเซอร์ Gyroscope วัดความเร็วเชิงมุมเป็นเรเดียนต่อวินาทีรอบแกน X, Y และ Z ภายในของอุปกรณ์ อุปกรณ์ของผู้บริโภคส่วนใหญ่มีเครื่องวัดการหมุน (MEMS) ซึ่งเป็นเซ็นเซอร์วัดความเฉื่อยที่วัดอัตราการหมุนตามแรงคอริออลิสแบบเฉียบพลัน เครื่องวัดการหมุน MEMS มีแนวโน้มที่จะลอยอันเนื่องมาจากความไวต่อแรงโน้มถ่วงของเซ็นเซอร์ ซึ่งทำให้ระบบกลไกภายในของเซ็นเซอร์ผิดรูป เครื่องวัดการหมุนจะหมุนที่ความถี่สูงสัมพัทธ์ เช่น 10s kHz ดังนั้น จึงอาจใช้พลังงานมากกว่าเมื่อเทียบกับเซ็นเซอร์อื่นๆ

เซ็นเซอร์การวางแนว

การวัดเซ็นเซอร์การวางแนวแบบสัมบูรณ์

AbsoluteOrientationSensor เป็นเซ็นเซอร์ฟิวชันที่วัดการหมุนของอุปกรณ์โดยสัมพันธ์กับระบบพิกัดของโลก ส่วนRelativeOrientationSensorจะแสดงข้อมูลการหมุนของอุปกรณ์ที่โฮสต์เซ็นเซอร์ตรวจจับการเคลื่อนไหวซึ่งสัมพันธ์กับระบบพิกัดการอ้างอิงแบบอยู่กับที่

เฟรมเวิร์ก JavaScript 3 มิติสมัยใหม่ทั้งหมดรองรับควอเทิร์นและเมทริกซ์การหมุนเพื่อแสดงการหมุน อย่างไรก็ตาม หากคุณใช้ 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);

เซ็นเซอร์การวางแนวช่วยให้สามารถใช้งานได้หลากหลาย เช่น การเล่นเกมที่สมจริง Augmented และ Virtual Reality

ดูข้อมูลเพิ่มเติมเกี่ยวกับเซ็นเซอร์ตรวจจับการเคลื่อนไหว กรณีการใช้งานขั้นสูง และข้อกำหนดได้ที่เอกสารคำอธิบายเกี่ยวกับเซ็นเซอร์ตรวจจับการเคลื่อนไหว

การซิงค์กับพิกัดหน้าจอ

โดยค่าเริ่มต้น ค่าจากเซ็นเซอร์เชิงพื้นที่จะอ่านค่าในระบบพิกัดเฉพาะที่ผูกกับอุปกรณ์และไม่นำการวางแนวหน้าจอมาพิจารณา

ระบบพิกัดของอุปกรณ์
ระบบพิกัดของอุปกรณ์

อย่างไรก็ตาม กรณีการใช้งานจำนวนมาก เช่น เกม ตลอดจน Augmented และ Virtual Reality กำหนดให้ค่าจากเซ็นเซอร์ที่อ่านได้ในระบบพิกัดที่สัมพันธ์กับการวางแนวหน้าจอแทน

ระบบพิกัดของหน้าจอ
ระบบพิกัดของหน้าจอ

ก่อนหน้านี้คุณต้องใช้การแมปค่าจากเซ็นเซอร์ที่อ่านได้ใหม่กับพิกัดบนหน้าจอใน JavaScript วิธีนี้ไม่มีประสิทธิภาพมากนัก และยังเพิ่มความซับซ้อนของโค้ดเว็บแอปพลิเคชันขึ้นอย่างมาก เว็บแอปพลิเคชันต้องดูการเปลี่ยนแปลงการวางแนวหน้าจอและทำการแปลงค่าพิกัดสำหรับการอ่านเซ็นเซอร์ ซึ่งไม่ใช่เรื่องง่ายๆ สำหรับมุมออยเลอร์หรือควอเทิร์น

General 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 ไม่ซับซ้อนและใช้งานง่ายมาก อินเทอร์เฟซเซ็นเซอร์มีวิธี start() และ stop() สำหรับควบคุมสถานะเซ็นเซอร์และเครื่องจัดการเหตุการณ์หลายรายการสำหรับรับการแจ้งเตือนเกี่ยวกับการเปิดใช้งานเซ็นเซอร์ ข้อผิดพลาด และการอ่านที่เพิ่งพร้อมใช้งาน คลาสเซ็นเซอร์ที่เป็นรูปธรรมมักจะเพิ่มแอตทริบิวต์การอ่านที่เจาะจงลงในคลาสฐาน

สภาพแวดล้อมในการพัฒนาซอฟต์แวร์

ในระหว่างการพัฒนา คุณจะใช้เซ็นเซอร์ผ่าน localhost ได้ หากคุณกำลังพัฒนาสำหรับอุปกรณ์เคลื่อนที่ ให้ตั้งค่าการส่งต่อพอร์ตสำหรับเซิร์ฟเวอร์ภายใน เพียงเท่านี้คุณก็พร้อมแล้ว

เมื่อโค้ดพร้อมแล้ว ให้ติดตั้งใช้งานบนเซิร์ฟเวอร์ที่รองรับ HTTPS หน้า GitHub แสดงผ่าน HTTPS จึงเหมาะอย่างยิ่งในการแชร์การสาธิตของคุณ

การหมุนโมเดล 3 มิติ

ในตัวอย่างง่ายๆ นี้ เราใช้ข้อมูลจากเซ็นเซอร์การวางแนวแบบสัมบูรณ์เพื่อแก้ไขควอเทอร์เนียนการหมุนของโมเดล 3 มิติ model เป็นอินสแตนซ์คลาส third.js Object3D ที่มีพร็อพเพอร์ตี้ quaternion ข้อมูลโค้ดต่อไปนี้จากการสาธิตโทรศัพท์การวางแนวจะแสดงวิธีใช้เซ็นเซอร์การวางแนวแบบสัมบูรณ์เพื่อหมุนโมเดล 3 มิติ

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 แบบ 3 มิติภายในฉาก WebGL

เซ็นเซอร์อัปเดตการวางแนวของโมเดล 3 มิติ
การอัปเดตการวางแนวของโมเดล 3 มิติ

เครื่องวัดแรงดันสัญญาณ

ข้อมูลโค้ดต่อไปนี้ดึงมาจากการสาธิต 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 รองรับ การจำลองการวางแนวอุปกรณ์ที่ดีเยี่ยม

เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ที่ใช้ลบล้างข้อมูลการวางแนวที่กำหนดเองของโทรศัพท์เสมือน
การจำลองการวางแนวอุปกรณ์ด้วยเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

ความเป็นส่วนตัวและความปลอดภัย

การอ่านเซ็นเซอร์เป็นข้อมูลที่ละเอียดอ่อนซึ่งอาจถูกโจมตีต่างๆ จากหน้าเว็บที่เป็นอันตราย การใช้ General Sensor API จะบังคับใช้ข้อจำกัดบางอย่างเพื่อลดความเสี่ยงด้านความปลอดภัยและความเป็นส่วนตัวที่อาจเกิดขึ้น นักพัฒนาแอปที่ตั้งใจจะใช้ API จะต้องพิจารณาถึงข้อจำกัดเหล่านี้ ดังนั้นเรามาระบุข้อจำกัดเหล่านี้คร่าวๆ กัน

HTTPS เท่านั้น

เนื่องจาก General Sensor API เป็นฟีเจอร์ที่มีประสิทธิภาพ เบราว์เซอร์จึงจะอนุญาตในบริบทที่ปลอดภัยเท่านั้น ในทางปฏิบัติแล้ว คุณจะต้องเข้าถึงหน้าเว็บผ่าน HTTPS จึงจะใช้ General Sensor API ได้ ในระหว่างการพัฒนา คุณจะดำเนินการผ่าน http://localhost ได้ แต่สำหรับเวอร์ชันที่ใช้งานจริง คุณจะต้องมี HTTPS บนเซิร์ฟเวอร์ ดูแนวทางปฏิบัติแนะนำและหลักเกณฑ์ได้จากคอลเล็กชันปลอดภัยและมั่นคง

การผสานรวมนโยบายสิทธิ์

การผสานรวมนโยบายสิทธิ์ใน "ทั่วไปเซ็นเซอร์" จะควบคุมการเข้าถึงข้อมูลเซ็นเซอร์ของเฟรม

โดยค่าเริ่มต้น ออบเจ็กต์ Sensor จะสร้างได้ภายในเฟรมหลักหรือเฟรมย่อยต้นทางเดียวกันเท่านั้น เพื่อป้องกันไม่ให้ iframe แบบข้ามต้นทางอ่านข้อมูลเซ็นเซอร์โดยไม่ได้รับอนุญาต คุณแก้ไขลักษณะการทำงานเริ่มต้นนี้ได้ด้วยการเปิดหรือปิดใช้ฟีเจอร์ที่ควบคุมโดยนโยบายที่เกี่ยวข้องอย่างชัดแจ้ง

ตัวอย่างข้อมูลด้านล่างแสดงการให้สิทธิ์การเข้าถึงข้อมูลโดยตัวตรวจวัดความเร่งใน iframe แบบข้ามต้นทาง ซึ่งหมายความว่าตอนนี้สามารถสร้างออบเจ็กต์ Accelerometer หรือ LinearAccelerationSensor ได้แล้ว

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

ระงับการนำส่งค่าเซ็นเซอร์ได้

การอ่านเซ็นเซอร์จะเข้าถึงได้โดยหน้าเว็บที่มองเห็นได้เท่านั้น กล่าวคือ เมื่อผู้ใช้กำลังโต้ตอบกับเซ็นเซอร์จริงๆ นอกจากนี้ จะไม่มีการให้ข้อมูลเซ็นเซอร์กับเฟรมระดับบนสุดหากโฟกัสของผู้ใช้เปลี่ยนเป็นเฟรมย่อยแบบข้ามต้นทาง วิธีนี้ช่วยป้องกันไม่ให้เฟรมระดับบนสุดอนุมานข้อมูลของผู้ใช้

ขั้นตอนถัดไปคือ

เรามีชุดคลาสเซ็นเซอร์ที่ระบุไว้แล้วสำหรับใช้งานในอนาคตอันใกล้ เช่น เซ็นเซอร์แสงแวดล้อมหรือพร็อกซิมิตีเซ็นเซอร์ อย่างไรก็ตาม เฟรมเวิร์กเซ็นเซอร์ทั่วไปมีความยืดหยุ่นอย่างมาก เราจึงคาดการณ์ได้ว่าจะมีคลาสใหม่ๆ เพิ่มมากขึ้นซึ่งแสดงถึงเซ็นเซอร์ประเภทต่างๆ

สิ่งสำคัญอีกอย่างสำหรับการทำงานในอนาคตคือการปรับปรุง General Sensor API ส่วนข้อมูลจำเพาะทั่วไปของเซ็นเซอร์คือ "คำแนะนำตัวเลือก" ซึ่งหมายความว่ายังมีเวลา แก้ไขและนำเสนอฟังก์ชันใหม่ๆ ที่นักพัฒนาซอฟต์แวร์ต้องการ

คุณช่วยได้

ข้อกำหนดเซ็นเซอร์ของเซ็นเซอร์ถึงระดับวุฒิภาวะของคำแนะนำของผู้สมัครแล้ว เราจึงขอขอบคุณเป็นอย่างยิ่งสำหรับความคิดเห็นที่ได้รับจากนักพัฒนาเว็บและเบราว์เซอร์ แจ้งให้เราทราบว่าควรเพิ่มฟีเจอร์ใดบ้าง หรือมีสิ่งที่คุณต้องการแก้ไขใน API ปัจจุบัน

โปรดส่งปัญหาเกี่ยวกับข้อกำหนด รวมถึงbugsสำหรับการติดตั้งใช้งาน Chrome

แหล่งข้อมูล

ข้อความแสดงการยอมรับ

บทความนี้ได้รับการตรวจสอบโดย Joe Medley และ Kayce Basques รูปภาพหลักโดย Misko ผ่าน Wikimedia Commons