ใช้ General Sensor API เพื่อเข้าถึงเซ็นเซอร์ในอุปกรณ์ เช่น ตัวตรวจวัดความเร่ง เครื่องวัดการหมุน และเครื่องวัดค่าความเข้มข้นของสนามแม่เหล็ก
ปัจจุบันนี้ มีการใช้ข้อมูลเซ็นเซอร์ในแอปพลิเคชันเฉพาะแพลตฟอร์มจำนวนมากเพื่อให้สามารถใช้งานกรณีการใช้งานต่างๆ อย่างเช่น การเล่นเกมที่สมจริง การติดตามการออกกำลังกาย และเทคโนโลยีความจริงเสริมหรือ Virtual Reality สะพานไม้จะดีเหรอ ช่องว่างระหว่างแอปพลิเคชันเฉพาะแพลตฟอร์มกับเว็บแอปพลิเคชัน ป้อน General Sensor API สำหรับเว็บ
API เซ็นเซอร์ทั่วไปคืออะไร
General Sensor API คือชุดอินเทอร์เฟซที่แสดง
อุปกรณ์เซ็นเซอร์กับแพลตฟอร์มเว็บได้ API ประกอบด้วยฐาน
อินเทอร์เฟซ Sensor
และชุดของรูปธรรม
คลาสเซ็นเซอร์ที่ด้านบน การมีอินเทอร์เฟซพื้นฐานจะช่วยให้การติดตั้งใช้งานและข้อกำหนดง่ายขึ้น
สำหรับคลาสเซ็นเซอร์ที่เป็นรูปธรรม ตัวอย่างเช่น โปรดดู
Gyroscope
ตัวเล็กมาก!
ฟังก์ชันหลักจะระบุโดยอินเทอร์เฟซพื้นฐาน และ Gyroscope
ขยายเพียงแค่ 3 ฟังก์ชัน
ที่แทนอัตราความเร็วเชิงมุม
คลาสเซ็นเซอร์บางคลาสจะเชื่อมต่อกับเซ็นเซอร์ของฮาร์ดแวร์จริง เช่น ตัวตรวจวัดความเร่ง หรือ
คลาสเครื่องวัดการหมุน เซ็นเซอร์เหล่านี้เรียกว่าเซ็นเซอร์ระดับต่ำ เซ็นเซอร์อื่นๆ ซึ่งเรียกว่า
เซ็นเซอร์ฟิวชัน ผสานข้อมูลจากระดับต่ำหลายๆ ระดับ
เซ็นเซอร์สำหรับแสดงข้อมูลที่สคริปต์จะต้องคำนวณด้วยวิธีอื่น ตัวอย่างเช่น พารามิเตอร์
เซ็นเซอร์ AbsoluteOrientation
ให้เมทริกซ์การหมุนแบบ 4 คูณ 4 ที่พร้อมใช้งานจากข้อมูลที่ได้จาก
ตัวตรวจวัดความเร่ง เครื่องวัดการหมุน และเครื่องวัดค่าความเข้มข้นของสนามแม่เหล็ก
คุณอาจคิดว่าแพลตฟอร์มเว็บให้ข้อมูลเซ็นเซอร์อยู่แล้วและคุณตอบถูกก็จริง สำหรับ
เช่น DeviceMotion
และ
DeviceOrientation
เหตุการณ์ต่างๆ เปิดเผยข้อมูลเซ็นเซอร์ตรวจจับการเคลื่อนไหว ทำไมเราถึงต้องมี API ใหม่
เมื่อเปรียบเทียบกับอินเทอร์เฟซที่มีอยู่ General Sensor API จะมีข้อดีหลายประการดังนี้
- General Sensor API คือเฟรมเวิร์กเซ็นเซอร์ที่ขยายได้ง่ายๆ ด้วยคลาสเซ็นเซอร์ใหม่และ แต่ละคลาสจะใช้อินเทอร์เฟซทั่วไป รหัสไคลเอ็นต์ที่เขียนสำหรับเซ็นเซอร์ 1 ประเภท สามารถนำกลับมาใช้กับบทความอื่นได้โดยแทบไม่ต้องแก้ไขอะไรเลย
- คุณกำหนดค่าเซ็นเซอร์ได้ เช่น คุณสามารถตั้งค่าความถี่ในการสุ่มตัวอย่างที่เหมาะสำหรับ ของแอปพลิเคชัน
- คุณสามารถตรวจหาได้ว่าเซ็นเซอร์พร้อมใช้งานบนแพลตฟอร์มหรือไม่
- ค่าที่อ่านได้จากเซ็นเซอร์มีการประทับเวลาที่มีความแม่นยำสูง ทำให้ซิงค์กับอุปกรณ์อื่นได้ดียิ่งขึ้น กิจกรรมในแอปพลิเคชันของคุณ
- มีการกำหนดโมเดลข้อมูลเซ็นเซอร์และระบบพิกัดไว้อย่างชัดเจน ซึ่งช่วยให้ผู้ให้บริการเบราว์เซอร์สามารถ การนำโซลูชันที่ทำงานร่วมกันได้มาใช้
- อินเทอร์เฟซที่ใช้เซ็นเซอร์ทั่วไปไม่ได้ผูกกับ DOM (หมายความว่าไม่ใช่ทั้ง
navigator
หรือwindow
ออบเจ็กต์) ซึ่งจะช่วยเปิดโอกาสในการใช้ API ภายในบริการในอนาคต หรือใช้ในรันไทม์ของ JavaScript แบบไม่มีส่วนหัว เช่น แบบฝัง อุปกรณ์ - ด้านความปลอดภัยและความเป็นส่วนตัวเป็นสิ่งที่สำคัญที่สุดสำหรับเซ็นเซอร์ทั่วไป API และให้การรักษาความปลอดภัยที่ดีกว่ามากเมื่อเทียบกับ API เซ็นเซอร์รุ่นเก่า มีการผสานรวมกับ 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) จะเท่ากับแรงโน้มถ่วงของโลก เช่น 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 มิติสมัยใหม่ทั้งหมดรองรับ quaternions
และเมทริกซ์การหมุนเพื่อแสดงการหมุน
แต่ถ้าคุณใช้ 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);
เซ็นเซอร์การวางแนวช่วยให้ใช้งานที่หลากหลายได้ เช่น การเล่นเกมที่สมจริง ฟีเจอร์เสริม และโหมดเสมือนจริง ของจริง
ดูข้อมูลเพิ่มเติมเกี่ยวกับเซ็นเซอร์ตรวจจับการเคลื่อนไหว กรณีการใช้งานขั้นสูง และข้อกำหนดได้ที่ คำอธิบายเซ็นเซอร์ตรวจจับการเคลื่อนไหว
การซิงโครไนซ์กับพิกัดหน้าจอ
โดยค่าเริ่มต้น ระบบจะแก้ไขค่าที่อ่านได้ของเซ็นเซอร์เชิงพื้นที่ ในระบบพิกัดท้องถิ่นที่เชื่อมโยงกับอุปกรณ์และไม่นำการวางแนวหน้าจอเข้ามา ของคุณได้
อย่างไรก็ตาม กรณีการใช้งานจำนวนมาก เช่น เกมหรือ Augmented และ Virtual Reality จำเป็นต้องมีการอ่านค่าจากเซ็นเซอร์ แก้ไขในระบบพิกัดที่ยึดติดกับการวางแนวหน้าจอแทน
ก่อนหน้านี้คุณต้องทำการแมปค่าที่อ่านจากเซ็นเซอร์ให้เป็นพิกัดหน้าจอใหม่ใน JavaScript แนวทางนี้ขาดประสิทธิภาพ และเพิ่มความซับซ้อนของเว็บไปอย่างมาก โค้ดของแอปพลิเคชัน เว็บแอปพลิเคชันต้องดูการเปลี่ยนการวางแนวหน้าจอและดำเนินการพิกัด การเปลี่ยนรูปแบบของค่าที่อ่านได้ของเซ็นเซอร์ ซึ่งนี่ไม่ใช่เรื่องเล็กๆ น้อยๆ ที่ต้องทำสำหรับมุมออยเลอร์หรือ ควอเตอร์เนียน
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' });
มาเขียนโค้ดกัน
General 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
เครื่องวัดความดัน
ข้อมูลโค้ดต่อไปนี้ดึงมาจาก การสาธิตเครื่องวัดระยะ ซึ่งแสดงวิธีใช้เซ็นเซอร์ความเร่งเชิงเส้นในการคำนวณความเร็วสูงสุดของ ให้อยู่นิ่งๆ ในตอนแรก
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 ให้การสนับสนุนอย่างดีเยี่ยมสำหรับ การจำลองการวางแนวอุปกรณ์
ความเป็นส่วนตัวและความปลอดภัย
ค่าที่อ่านได้จากเซ็นเซอร์เป็นข้อมูลที่ละเอียดอ่อนซึ่งอาจถูกโจมตีจากหน้าเว็บที่เป็นอันตรายได้หลายรูปแบบ การใช้งาน API เซ็นเซอร์ทั่วไปจะบังคับใช้ข้อจำกัดบางอย่างเพื่อลดการรักษาความปลอดภัยที่เป็นไปได้ และความเสี่ยงด้านความเป็นส่วนตัว นักพัฒนาแอปที่ตั้งใจจะใช้ API ดังนั้นเรามาระบุรายการให้คร่าวๆ
HTTPS เท่านั้น
เนื่องจาก General Sensor API เป็นฟีเจอร์ที่มีประสิทธิภาพ เบราว์เซอร์จึงอนุญาตให้ใช้เฉพาะในบริบทที่ปลอดภัย ใน นั่นหมายความว่าในการใช้ General Sensor API คุณจะต้องเข้าถึงหน้าเว็บผ่าน HTTPS ระหว่างการพัฒนา คุณสามารถดำเนินการได้ผ่าน http://localhost แต่สำหรับเวอร์ชันที่ใช้งานจริงคุณจะต้อง จำเป็นต้องมี HTTPS บนเซิร์ฟเวอร์ ดูแนวทางปฏิบัติแนะนำในคอลเล็กชันที่ปลอดภัยและมั่นใจได้ และหลักเกณฑ์
การผสานรวมนโยบายสิทธิ์
การผสานรวมนโยบายสิทธิ์ในส่วนทั่วไป Sensor API ควบคุมการเข้าถึงข้อมูลเซ็นเซอร์ของเฟรม
โดยค่าเริ่มต้น ออบเจ็กต์ Sensor
จะสร้างได้ภายในเฟรมหลักหรือเฟรมย่อยที่มีต้นทางเดียวกันเท่านั้น
ซึ่งเป็นการป้องกันไม่ให้ iframe แบบข้ามต้นทางอ่านข้อมูลเซ็นเซอร์ที่ถูกคว่ำบาตร ลักษณะการทำงานเริ่มต้นนี้
สามารถแก้ไขได้ด้วยการเปิดหรือปิดใช้
ฟีเจอร์ที่ควบคุมตามนโยบาย
ข้อมูลโค้ดด้านล่างแสดงการให้สิทธิ์เข้าถึงข้อมูลของตัวตรวจวัดความเร่งกับ iframe แบบข้ามต้นทาง ซึ่งหมายความว่า
ว่าตอนนี้สามารถสร้างออบเจ็กต์ Accelerometer
หรือ LinearAccelerationSensor
ที่นั่นได้
<iframe src="https://third-party.com" allow="accelerometer" />
ระงับการนำส่งค่าจากเซ็นเซอร์ได้
ค่าที่อ่านได้จากเซ็นเซอร์จะเข้าถึงได้โดยหน้าเว็บที่มองเห็นได้เท่านั้น เช่น เมื่อผู้ใช้กำลัง โต้ตอบกับแอป นอกจากนี้ จะไม่มีการส่งข้อมูลเซ็นเซอร์ไปยังเฟรมหลักหากผู้ใช้ การเปลี่ยนโฟกัสเป็นเฟรมย่อยแบบข้ามต้นทาง ซึ่งเป็นการป้องกันไม่ให้เฟรมหลักให้ข้อมูลจากผู้ใช้
ขั้นตอนถัดไปคือ
มีชุดคลาสเซ็นเซอร์ที่ระบุไว้แล้วที่จะนำมาใช้ในอนาคตอันใกล้ เช่น เซ็นเซอร์แสงแวดล้อม หรือ พร็อกซิมิตีเซ็นเซอร์ แต่เพราะความสามารถในการขยายการทำงาน เฟรมเวิร์กเซ็นเซอร์ทั่วไปที่เราคาดว่าจะมีคลาสใหม่ๆ เพิ่มขึ้นมาแทน ประเภทเซ็นเซอร์
ปัจจัยสำคัญอีกประการหนึ่งสำหรับการทำงานในอนาคตคือการปรับปรุง generic Sensor API นั่นก็คือ ทั่วไป ตอนนี้ข้อมูลจำเพาะของเซ็นเซอร์เป็นคำแนะนำสำหรับผู้สมัคร ซึ่งหมายความว่ายังมีเวลาอยู่ เพื่อแก้ไขและใช้ฟังก์ชันใหม่ๆ ที่นักพัฒนาซอฟต์แวร์ต้องการ
คุณช่วยได้
เป็นไปตามข้อกำหนดเฉพาะของเซ็นเซอร์ คำแนะนำเกี่ยวกับผู้สมัคร ระดับวุฒิภาวะของผู้ใช้ ดังนั้นความคิดเห็นจากนักพัฒนาเว็บเบราว์เซอร์และเบราว์เซอร์จึงมีความสำคัญอย่างยิ่ง ให้เรา รู้ว่าควรเพิ่มคุณลักษณะใด หรือหากมีบางสิ่งที่คุณต้องการแก้ไขใน API ปัจจุบัน
โปรดส่งปัญหาเกี่ยวกับข้อมูลจำเพาะด้วย เป็นข้อบกพร่องสำหรับการติดตั้ง Chrome
แหล่งข้อมูล
- โปรเจ็กต์สาธิต: https://intel.github.io/generic-sensor-demos/
- ข้อกำหนดทั่วไปสำหรับ 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
กิตติกรรมประกาศ
บทความนี้ได้รับการตรวจสอบโดย Joe Medley และ Kayce Basques รูปภาพหลักโดย Misko ผ่าน Wikimedia Commons