默认情况下可在网络中使用的本机传感器
默认情况下可在网络中使用的本机传感器
如今,每个智能设备都内置了很少的集成传感器,我们可以通过编写特定的本机代码来使用它们。
当您想为不同的设备编写不同的本机代码时,这不是很难吗,因为 Apple 传感器集成可能与 Android 不同,Android 可能与笔记本电脑不同。这里使用了用于 Web 的通用传感器 API,它抽象了内部工作,并为我们提供了一个 API 来处理设备中存在的传感器。
使用此功能,您可以使用具有浏览器支持的所有设备的传感器(检查 caniuse站点,了解哪些浏览器支持此 API。)。
当您想使用特定传感器并且不想通过编写不同的代码来使实现复杂化时,它是最有用的不同平台的本机代码。
在本节中,我将讨论通用传感器 API支持的一些传感器 及其实现。
在直接了解如何使用某些传感器之前,我将先介绍一下使用传感器的高级概述或工作流程。
工作流程:
传感器:
术语“设备传感器”是指设备的底层物理传感器实例。每个传感器读数由设备传感器在时间 tn 测量的物理量值组成,称为读数时间戳。
这是传感器的接口(这些表示处理传感器及其数据的可用方法。)。
[ ]
interface Sensor : EventTarget {
readonly attribute boolean activated;
readonly attribute boolean hasReading;
readonly attribute DOMHighResTimeStamp? timestamp;
void start();
void stop();
attribute EventHandler onreading;
attribute EventHandler onactivate;
attribute EventHandler onerror;
};
dictionary SensorOptions {
double frequency;
};
因此,在初始化传感器之前,用户需要设置一个频率选项。很少有其他方法(如 onreading、onacivate、onerror)用于访问数据和处理错误。 如果您想了解更多信息,请浏览 传感器接口。
一些可用的通用传感器包括:
-
环境光
-
加速度计
-
线性加速度
-
重力
-
陀螺仪
-
磁力计
-
未校准磁力计
-
绝对方向
-
相对取向
-
地理定位
-
接近
用法
让我们考虑使用加速度计传感器进行此演示(任何传感器都可以用来代替加速度计)。
检查您的浏览器是否支持通用 API:
if('Accelerometer' in window){
//code to be written if Accelerometer interface is supported by the browser.
}else{
//Your browser doesn't support sensors.
}
在这里我们不用担心浏览器不支持“加速计”接口。不过在这种情况下我们可以使用 pollyfill。使用 pollyfill,您可以仅导入相关传感器并使用它。要了解有关使用 polyfill 的更多信息,请阅读 sensor-polyfill。
权限
navigator.permissions.query({ name: "accelerometer" }).then(result => {
if (result.state != 'granted') {
setGameText("Sorry, we're not allowed to access sensors on your device. ");
return;
}
}).catch(err => {
console.log("Integration with Permissions API is not enabled");
});
目前没有任何 API 可以请求加速度计等通用传感器的许可。如果您想请求其他传感器(例如 geoloaction),可以通过以下方法请求许可:
const permissionsToRequest = {
permissions: ["geolocation", "storage"]
}
browser.permissions.request(permissionsToRequest)
.then(onResponse)
.then((currentPermissions) => {
console.log(`Current permissions:`, currentPermissions);
});
可与权限 api 一起使用的所有关键字的列表位于 API 权限中。
读取数据
let acl = new Accelerometer({frequency: 30});
acl.addEventListener('activate', () => console.log('Ready to measure.'));
acl.addEventListener('error', error => console.log(`Error: ${error.name}`));
acl.addEventListener('reading', () => {
console.log("Sensor values are : ");
console.log("X: "+acl.x+" Y: "+acl.y+" Z: "+acl.z);
});
acl.start();
您可以根据需要更改频率,但不能保证频率相同,因为所有设备传感器不支持给定频率。
到这里就结束了,现在您可以从网络上的通用传感器读取数据了。下面是结合了上述三种方法的完整代码,您可以参考通用传感器来了解更多信息。
if ("Accelerometer" in window) {
navigator.permissions
.query({ name: "accelerometer" })
.then((result) => {
if (result.state != "granted") {
console.log(
"Sorry, we're not allowed to access sensors on your device. "
);
return;
}
let acl = new Accelerometer({ frequency: 60 });
acl.addEventListener("activate", () => console.log("Ready to measure."));
acl.addEventListener("error", (error) =>
console.log(`Error: ${error.name}`)
);
acl.addEventListener("reading", () => {
console.log("Sensor values are : ");
console.log("X: " + acl.x + " Y: " + acl.y + " Z: " + acl.z);
});
acl.start();
})
.catch((err) => {
console.log("Integration with Permissions API is not enabled");
});
} else {
console.log("Your browser doesn't support sensors.");
}
对于实时实施,您可以访问此网站:https://accelerometer-demo.netlify.app
此实现的代码位于:https://github.com/veerreshr/accelerometer-demo/
如果您喜欢这篇文章,请考虑回复该文章并提供您的反馈。如果对你很有帮助,请扫码关注以上微信公众号:计算机程序吧❤