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

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

Alex Shalamov
Alex Shalamov
Mikhail Pozdnyakov
Mikhail Pozdnyakov
Thomas Steiner

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

Generic Sensor API คืออะไร

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

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

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

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

  • General Sensor API คือเฟรมเวิร์กเซ็นเซอร์ที่ขยายได้ง่ายๆ ด้วยคลาสเซ็นเซอร์ใหม่และ แต่ละคลาสจะใช้อินเทอร์เฟซทั่วไป รหัสไคลเอ็นต์ที่เขียนสำหรับเซ็นเซอร์ 1 ประเภท สามารถนำกลับมาใช้กับบทความอื่นได้โดยแทบไม่ต้องแก้ไขอะไรเลย
  • คุณกำหนดค่าเซ็นเซอร์ได้ เช่น คุณสามารถตั้งค่าความถี่ในการสุ่มตัวอย่างให้เหมาะกับความต้องการด้านแอปพลิเคชันได้
  • คุณตรวจสอบได้ว่าเซ็นเซอร์พร้อมใช้งานบนแพลตฟอร์มหรือไม่
  • ค่าที่อ่านได้จากเซ็นเซอร์มีการประทับเวลาที่มีความแม่นยำสูง ทำให้ซิงค์กับอุปกรณ์อื่นได้ดียิ่งขึ้น ในแอปพลิเคชันของคุณ
  • มีการกำหนดโมเดลข้อมูลเซ็นเซอร์และระบบพิกัดไว้อย่างชัดเจน ซึ่งช่วยให้ผู้ให้บริการเบราว์เซอร์สามารถ การนำโซลูชันที่ทำงานร่วมกันได้มาใช้
  • อินเทอร์เฟซที่ใช้เซ็นเซอร์ทั่วไปไม่ได้ผูกกับ DOM (หมายความว่าไม่ใช่ทั้ง navigator หรือ window ออบเจ็กต์) ซึ่งจะช่วยเปิดโอกาสในการใช้ API ภายในบริการในอนาคต หรือใช้ในรันไทม์ของ JavaScript แบบไม่มีส่วนหัว เช่น แบบฝัง อุปกรณ์
  • ความปลอดภัยและความเป็นส่วนตัวเป็นสิ่งสำคัญที่สุดสำหรับ Generic Sensor 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 นั้นค่อนข้างซับซ้อน เนื่องจากคุณต้องตรวจหาทั้งว่าเบราว์เซอร์รองรับอินเทอร์เฟซที่เป็นปัญหาหรือไม่ และอุปกรณ์มีเซ็นเซอร์ที่เกี่ยวข้องหรือไม่ การตรวจสอบว่าเบราว์เซอร์รองรับอินเทอร์เฟซหรือไม่นั้นทำได้ง่ายๆ (แทนที่ 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 m/s2 และเมื่ออุปกรณ์วางราบบนโต๊ะ ความเร่งในทิศทางขึ้น (แกน Z) จะเท่ากับแรงโน้มถ่วงของโลก ซึ่งก็คือ g ≈ +9.8 m/s2 เนื่องจากเซ็นเซอร์กำลังวัดแรงของโต๊ะที่ดันอุปกรณ์ขึ้น หากคุณดันอุปกรณ์ไปที่ ไปทางขวา ความเร่งบนแกน X จะเป็นบวกหรือติดลบหากอุปกรณ์ถูกเร่งจาก จากด้านขวาไปด้านซ้าย

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

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

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

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

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

การวัดค่าจากเซ็นเซอร์ไจโร

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

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

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

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

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

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

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

General Sensor API เป็นโซลูชันที่ง่ายและเชื่อถือได้มากขึ้น ระบบพิกัดท้องถิ่นคือ กำหนดค่าได้สำหรับคลาสเซ็นเซอร์เชิงพื้นที่ที่กำหนดไว้ทั้งหมด: Accelerometer, Gyroscope LinearAccelerationSensor, AbsoluteOrientationSensor, RelativeOrientationSensor และ Magnetometer เมื่อส่งตัวเลือก referenceFrame ไปยังเครื่องมือสร้างวัตถุเซ็นเซอร์ กำหนดว่าค่าที่อ่านกลับมาจะได้รับการแก้ไขใน device หรือ พิกัดในหน้าจอ

// 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 Pages แสดงผ่าน HTTPS จึงเหมาะอย่างยิ่งที่จะแชร์เดโม

การบิดโมเดล 3 มิติ

ในตัวอย่างนี้ เราจะใช้ข้อมูลจากเซ็นเซอร์การวางแนวแบบสัมบูรณ์เพื่อแก้ไขควอร์เทอร์นियनการหมุนของโมเดล 3 มิติ model คืออินสแตนซ์คลาส Object3D ของ three.js ที่มีพร็อพเพอร์ตี้ 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

ในบางกรณี คุณไม่จำเป็นต้องมีอุปกรณ์จริงเพื่อใช้งาน Generic Sensor API เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome รองรับการจําลองการวางแนวของอุปกรณ์ได้เป็นอย่างดี

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

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

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

HTTPS เท่านั้น

เนื่องจาก General Sensor API เป็นฟีเจอร์ที่มีประสิทธิภาพ เบราว์เซอร์จึงอนุญาตให้ใช้เฉพาะในบริบทที่ปลอดภัย ใน ซึ่งหมายความว่าในการใช้ General 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 อยู่ในสถานะ "คําแนะนําผู้สมัคร" ซึ่งหมายความว่ายังมีเวลาแก้ไขและเพิ่มฟังก์ชันการทำงานใหม่ๆ ที่นักพัฒนาแอปต้องการ

คุณช่วยได้

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

โปรดส่งปัญหาเกี่ยวกับข้อมูลจำเพาะด้วย เป็นข้อบกพร่องในการใช้งาน Chrome

แหล่งข้อมูล

กิตติกรรมประกาศ

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