作者|TapasAdhikary
译者| 平川规划| 小智
在这篇文章中，我将介绍 10 个不太流行的 WebAPI。 仅仅因为它们不那么受欢迎并不意味着它们是无害的。 您可以在项目的各种用例中使用它们。
本文最初发表于GreenRoots博客，经原作者授权由InfoQ英文站翻译分享。
1.全屏API
您需要以全屏模式显示任何 DOM 元素吗？ 游戏应用、在线视频平台（例如 YouTube）等都是强烈需要全屏的用例。
FullscreenAPI 提供了以全屏模式显示特定元素（及其子元素）的技术。 有一种方法可以在我们不需要时退出全屏模式。 除此之外，该 API 还可以帮助在 DOM 元素转换到或退出全屏模式时执行任何操作。
在下面的示例中，我最喜欢的新年奶奶可以轻松进入和退出全屏模式。
在下面的代码中，manageFullScreen() 函数对 ID 为 fs_id 的元素使用 requestFullscreen() API。
const manageFullscreen = () => {
document.getElementById('fs_id').requestFullscreen();
}Id为fs_id的元素是一个包含子元素（即新年奶奶图）的DIV。
<div className="column">
<div id="fs_id">
<Img fixed={imageData.image.childImageSharp.fixed} alt="santa" />
</div>
<StyledButton
onClick={manageFullscreen}>
Enter Fullscreen with Santa
</StyledButton>
</div>您可以检查浏览器是否支持FullscreenAPI。
if (document.fullscreenEnabled) {
setSupported(true);
} else {
setSupported(false);
}还要留意这两个有用的处理程序：
演示链接：
2.ClipboardAsyncAPI
什么是剪贴板？
剪贴板是某些操作系统提供的缓冲区，用于应用程序内部和应用程序之间的短期存储和数据传输。
使用剪贴板可以执行三种主要操作，即复制、剪切和粘贴。 ClipboardAPI提供了响应这三种操作的能力。
有趣的是，将内容复制到剪贴板是开放的，不需要用户许可。 此外，将剪贴板中的内容粘贴到用户应用程序中需要授权。 这是使用另一个称为 PermissionAPI 的 WebAPI 来实现的。
下面是一个简单的复制粘贴操作的示例：
下面的代码检测浏览器是否支持该API：
if (navigator.clipboard
&& navigator.clipboard.read
&& navigator.clipboard.write) {
setSupported(true);
} else {
setSupported(false);
}下面是将内容写入剪贴板的 AsyncAPI 函数：
async function performCopy(event) {
event.preventDefault();
try {
await navigator.clipboard.writeText(copyText);
console.log(`${copyText} copied to clipboard`);
} catch (err) {
console.error('Failed to copy: ', err);
}
}AsyncAPI 函数从剪贴板读取内容并对其执行某些操作：
async function performPaste(event) {
event.preventDefault();
try {
const text = await navigator.clipboard.readText();
setPastetext(text);
console.log('Pasted content: ', text);
} catch (err) {
console.error('Failed to read clipboard contents: ', err);
}
}注意：通过包含 ClipboardAsyncAPI，您可以消除对 document.execCommad() 函数的需要，因为它现已弃用。
演示链接：
3.ResizeObserverAPI
您想要对 DOM 元素的内容或边框进行更改吗？ 您是否考虑过自己编写一个处理程序？ 如果我告诉您已经有一个提供这种功能的 WebAPI 实现怎么办？
在下面的示例中，我们可以使用范围滑块来调整按键的大小。 我们还希望在调整按键大小时控制文本颜色，而按键不知道这一点。
首先，创建一个密钥并分配一个 id。 我们稍后可以使用此 id 来访问密钥：
<StyledButton id="dumbBtnId">
I am a Dumb Button
</StyledButton>现在，使用 HTML5 输入类型范围创建一个滑块。 当滑块的值发生变化时，会触发 resize() 函数。
<input
onChange={(event) => resize(event)}
type="range"
min={minRange}
max={maxRange}
defaultValue={rangeValue} />
resize()函数根据滑块的范围值设置按钮的长度，然后动态调整其大小：
const resize = event => {
const value = event.target.valueAsNumber;
setRangeValue(value);
let dumbBtn = document.getElementById('dumbBtnId');
dumbBtn.style.width = `${value}px`;
}到目前为止，没有问题吗？ 现在，对于范围值的每次更改，密钥大小都会进行调整。 我们使用ResizeObserver来观察这种变化并改变按钮文本的颜色。
useEffect(() => {
try {
let dumbBtn = document.getElementById('dumbBtnId');
var resizeObserver = new ResizeObserver(entries => {
for(const entry of entries) {
// Get the button element and color it
// based on the range values like this,
entry.target.style.color = 'green`;
}
});
resizeObserver.observe(dumbBtn);
} catch(e) {
setSupported(false);
console.log(e);
}
}, [rangeValue]);演示链接：
4.图像采集API
有一些围绕用户媒体（例如音频和视频）的很酷且有用的 API。 我喜欢 ImageCaptureAPI，它可以帮助我们从视频设备（例如网络摄像头）捕获图像或抓取帧。 除此之外elementui视频链接标签，您还可以在拍摄图像或抓取帧时执行操作。
首先，访问用户的媒体。 在这些情况下，我们可以访问网络摄像头。
navigator.mediaDevices.getUserMedia({video: true})
.then(mediaStream => {
document.querySelector('video').srcObject = mediaStream;
const track = mediaStream.getVideoTracks()[0];
setTrack(track);
}).catch(error => {
console.error(` ${error} is not yet supported`);
setError(error);
});与剪贴板粘贴操作一样，相机媒体访问权限必须由用户授予。
现在抓取一个框架并进行一些操作。 在这个反例中，我只是在画布上绘制框架。
const imageCapture = new ImageCapture(track);
imageCapture.grabFrame()
.then(imageBitmap => {
const canvas = document.querySelector('#grabFrameCanvas');
drawCanvas(canvas, imageBitmap);
}).catch(error => {
console.log(error);
setError(error);
});我也可以拍张照片并做类似的事情。
const imageCapture = new ImageCapture(track);
imageCapture.takePhoto().then(blob => createImageBitmap(blob))
.then(imageBitmap => {
const canvas = document.querySelector('#takePhotoCanvas');
drawCanvas(canvas, imageBitmap);
}).catch(error => {
console.log(error);
setError(error);
});要停止接收摄像机的视频流，只需在正在运行的视频跟踪上运行 stop() 方法即可。
const videoOff = () => {
track.stop();
}还要注意以下方法：
演示链接：
5.广播频道API
BroadcastChannelAPI 允许浏览上下文（窗口、选项卡、iframe）和原始工作人员之间进行通信。 考虑一个用例，当您从浏览器选项卡中运行的应用程序注销时，您希望将其广播到在同一浏览器的其他选项卡中打开的应用程序实例。
在下面的示例中，发送者向接收者发送一条消息，并将相同的消息广播到浏览上下文（在本例中为选项卡）。
第一步是创建一个具有唯一名称的广播频道，并定义要广播的内容（消息）。
const CHANNEL_NAME = "greenroots_channel";
const bc = new BroadcastChannel(CHANNEL_NAME);
const message = 'I am wonderful!';要广播消息，请在通道上调用 postMessage() 方法并传入消息。
const sendMessage = () => {
bc.postMessage(message);
}在接收端elementui视频链接标签，广播窃听者收到消息通知。
const CHANNEL_NAME = "greenroots_channel";
const bc = new BroadcastChannel(CHANNEL_NAME);
bc.addEventListener('message', function(event) {
console.log(`Received message, "${event.data}", on the channel, "${CHANNEL_NAME}"`);
const output = document.getElementById('msg');
output.innerText = event.data;
});演示链接：
6.⏱️性能接口API
Performance socket主要提供以下三个API：
以下是输出显存使用情况的示例：
console.log(performance.memory);这是获取导航性能统计信息的另一个示例：
const [entry] = performance.getEntriesByType("navigation");
console.table(entry)演示链接：
7.电池状态API
您想了解有关笔记本电脑、PC 或设备电池的所有信息吗？ 是的，有这样一个WebAPI，叫做BatteryStatusAPI。 这个API可以帮助我们了解所有信息，例如电池是否正在充电、还剩多少电量，并提供与充电相关的状态变化的处理程序。
下面的示例显示了当我插入和拔出笔记本电脑充电器时的状态变化：
下面的代码解释了如何处理和使用电池相关信息。
navigator.getBattery().then(function (battery) {
// handle the charging change event
battery.addEventListener("chargingchange", function () {
console.log("Battery charging? " + (battery.charging ? "Yes" : "No"));
});
// handle charge level change
battery.addEventListener("levelchange", function () {
console.log("Battery level: " + battery.level * 100 + "%");
});
// handle charging time change
battery.addEventListener("chargingtimechange", function () {
console.log( "Battery charging time: " + battery.chargingTime + " seconds");
});
// handle discharging time change
battery.addEventListener("dischargingtimechange", function () {
console.log("Battery discharging time: " + battery.dischargingTime + " seconds");
});
});我喜欢这个 API，用起来很有趣。 不好的是这个API将来可能会过时。
演示链接：
8.网络信息API
NetworkInformationAPI 提供有关网络类型（例如“WiFi”、“蜂窝”等）、数据存储模式、带宽等信息。
console.log(navigator.connection);演示链接：
9.振动API
这是连接到系统硬件并执行操作的另一个示例。 VibrationAPI 提供了启动设备振动（立即或连续）和停止振动的方法。
useEffect(() => {
if (start) {
// vibrate for 2 seconds
navigator.vibrate(2000);
} else {
// stop vibration
navigator.vibrate(0);
}
}, [start]);演示链接：
10.蓝牙API
WebAPI 允许您连接到蓝牙设备。
navigator.bluetooth.requestDevice({
acceptAllDevices: true
}).then(device => {
setDeviceName(device.name);
setDeviceId(device.id)
setDeviceConnected(device.connected);
}).catch(err => {
console.log(err);
setError(true);
})演示链接：
