现阶段web与外围硬件交互的接口概述

JaylenL
2,386 阅读6分钟

这是我参与8月更文挑战的第4天，活动详情查看：8月更文挑战

往期文章

💾文件系统

File API

标准文档：File API (w3.org)

File API 是HTML5 标准新增的接口，它的出现就是为了弥补网页与本地文件系统交互上的不足。

在早期的浏览器技术中，处理小量字符串是javascript最擅长的处理之一。但文件处理，尤其是二进制文件处理，一直是个空白，一些情况下，我们不得不通过Flash、ActiveX、NP插件或服务器来处理较为复杂或底层的数据。File API的出现使得上述功能成为可能。

目前，其功能已经被主流浏览器全部实现，包括桌面端和移动端，甚至IE10也支持部分功能，可以说是考虑兼容性的首选。

8-4-1.png

File System Access API

WICG 下的一个孵化标准，随着互联网的发展，现有的File API已经不能满足一些应用场景的需求，File System Access API的推出是为了增强网页与本地文件交互的能力。

File API是在浏览器沙箱中对文件进行访问，依据最小权限原则，其只被赋予了读权限，拿到的文件地址也只是虚拟地址，使用时浏览器会自动进行转换。由于没有写入权限，要想保存修改后的文件只能通过下载的方式，例如使用一个<a>标签。

File System Access API 不受沙箱影响，可以直接拿到文件的系统句柄（指向文件的指针），拥有读写权限，因此可以实现在线修改保存、访问目录等功能。当然，出于安全考虑，使用前需要用户授权，并且依旧无法访问系统目录和组策略不允许访问的目录。使用详情可以参考我的另一篇文章：更强大的文件接口，File System Access API｜8月更文挑战 (juejin.cn)

8-4-2.png

由于尚处于孵化中，支持率不高，作为该接口的提出者，Chrome首当其冲。

🎮按键设备

Keyboard

键盘交互大家都很熟悉了，这里就不多介绍了，相关接口请看MDN。

Pointer

一般指的是鼠标，但是还包括移动端的触摸等其他定点输入。

Gamepad API

该接口用于定义一系列游戏手柄相关的方法，让你可以像处理键盘鼠标一样处理手柄输入，使用场景当然是网络游戏啦，其他的暂时没想到。说到游戏，那就不得不提chrome断网时的恐龙跑酷和Edge的冲浪，如果你手上有一个手柄，那么你可以用它来玩啦，👉👉👉Chrome dino

8-4-3.png 没有手柄也没关系，点击空格即可开始游戏。你也可以参考下它的源代码来学习使用Gamepad API

tomayac/chrome-dino-gamepad: Play chrome://dino 🦖 with your gamepad 🎮 (github.com)

8-4-4.png

桌面端移动端的支持程度都挺高，可以放心食用。

🎬音视频设备

MediaDevices.getUserMedia()

使用它可以获取媒体流，包括音频和视频，例如麦克风、摄像头等音视频采集设备，也包括使用OBS之类创建的虚拟视频源，

👇👇👇基于此接口的WebGL 相机效果

image.png

Web Audio API

Web Audio API 提供了在Web上控制音频的一个非常有效通用的系统，允许开发者来自选音频源，对音频添加特效，使音频可视化，添加空间效果 （如平移），等等。

用于处理和合成音频的高级JavaScript API。相关库以及使用例子在MDN上都能查阅到。

8-4-5.png

除了IE以及少数冷门浏览器，其他都支持。

🖨打印设备

window.print

打开一个浏览器对话框，用户可以选择打印设备或输出为PDF。

🔌传感器

Sensor APIs

Sensor API 是Generic Sensor API规范下的一个接口，在web平台中为各类传感器提供了一致的访问方式。

这个接口主要在移动端使用，目前可用的传感器类型如下：

接口传感器
Accelerometer加速度计
Gyroscope陀螺仪
LinearAccelerationSensor线性加速传感器
AbsoluteOrientationSensor绝对方向传感器
RelativeOrientationSensor相对方向传感器
AmbientLightSensor环境光传感器
Magnetometer磁力计

相关demo请参考：Demos for Generic Sensor API | Generic Sensor API playground (intel.github.io)

8-4-6.png

💻 其他外围设备

Web Serial

使网页能够与串行设备通信，详情请参考什么，网页也能直接与硬件通信？Web Serial API！｜8月更文挑战 (juejin.cn)

Web USB

使网页能够与USB(通用串行总线)设备通信。

我们将USB设备与电脑连接时，第一步就是安装相应的驱动，这是因为不同的厂商根据这个协议有自己的接口实现，这也是Web USB API要解决的问题：提供一种将USB设备服务公开到Web的方法。有了它，硬件制造商将能够为他们的设备构建跨平台的JavaScript sdk。对用户而言，不再受设备的限制。

使用详情请参考官方文档，这里附上一份USB厂商vendorid查询表usb.ids，在创建设备实例时需要用到。

    device = await navigator.usb.requestDevice({ filters: [{
        vendorId: 0xABCD, // 厂商id，苹果是0x05ac,华为0x12d1
        classCode: 0xFF, // 设备类型
        protocolCode: 0x01
    }]});

通过chrome://device-log/调试USB设备

image.png

你也可以通过chrome://usb-internals/来创建虚拟usb设备来进行调试

image.png

image.png

Web Bluetooth

使网页通过蓝牙协议与其他蓝牙设备进行通信。

测试demo：Web Bluetooth Samples

image.png

Web NFC

仅限于移动端，允许网站通过设备的NFC读取器与NFC标签进行通信。

image.png

如果你使用的是安卓手机，并且带有NFC功能，可以下载最新的Chrome浏览器，使用下面网站体验这个功能。当然，你也可以使用它提供的示例代码写个demo。

Web NFC Sample (googlechrome.github.io)

image.png

🔋电量

Battery Status API

提供了有关系统充电级别的信息并提供了通过电池等级或者充电状态的改变提醒用户的事件。

它可以让开发者在设备电量低的时候调整应用的资源使用状态，或者在电池用尽前保存应用中的修改以防数据丢失。

8-4-7.png

🛰地理位置

Geolocation API

标准文档：Geolocation API (w3.org)

用于获取用户设备的地理位置，使用前需要用户授权，且只在HTTPS的网站上可用。

8-4-8.png

总结

上述列举一系列网页与硬件设备交互的接口，这些接口基本覆盖了生活的各个使用场景，有的已经成为标准，有的还处于草案孵化阶段。物联网是现在很火的一个概念，可以把它理解为 “互联网+智能终端”，前端作为互联网和终端重要的一环，自然也是物联网重要的构成部分，未来也会有更多更强大的接口标准被提出，将web与物理世界连接起来。

由于精力有限，上面只列举大部分接口，如有疏忽，欢迎评论区补充。

创作不易，如果对你有帮助，点赞鼓励一下。

avatar
文章
阅读
粉丝