一、系统级交互：突破浏览器沙盒限制

1. 屏幕共享API（Screen Capture API）

传统屏幕共享需依赖第三方插件，而WebRTC的getDisplayMedia()方法允许直接捕获用户屏幕内容。该API支持三种模式：

// 捕获整个屏幕或特定窗口
async function startScreenShare() {
  try {
    const stream = await navigator.mediaDevices.getDisplayMedia({
      video: { cursor: "always" }, // 显示鼠标指针
      audio: true // 可选捕获系统音频
    });
    // 将流传输至视频元素或WebRTC连接
    document.getElementById("video").srcObject = stream;
  } catch (err) {
    console.error("Error:", err);
  }
}

应用场景：远程协作工具、在线教育平台、游戏直播。需注意用户必须主动触发操作（如点击按钮），浏览器会显示权限确认对话框。

2. 系统通知API（Notifications API）

相比简单的alert()，Notifications API可创建原生系统通知：

// 检查权限并请求
if (Notification.permission === "default") {
  Notification.requestPermission().then(permission => {
    if (permission === "granted") {
      new Notification("新消息", {
        body: "您有3条未读消息",
        icon: "/icon.png",
        vibrate: [200, 100, 200] // 安卓设备震动模式
      });
    }
  });
}

进阶技巧：结合Service Worker实现后台通知，即使页面关闭也能推送。需在HTTPS环境下使用（localhost除外）。

二、硬件交互：Web与物理世界的桥梁

1. 游戏手柄API（Gamepad API）

支持PS/Xbox等主流手柄，实时获取按键和摇杆状态：

let gamepads = {};
window.addEventListener("gamepadconnected", e => {
  gamepads[e.gamepad.index] = e.gamepad;
  console.log("手柄连接:", e.gamepad.id);
});
function checkGamepad() {
  const gamepads = navigator.getGamepads();
  gamepads.forEach(pad => {
    if (pad) {
      // 检测A键（索引0）是否按下
      if (pad.buttons[0].pressed) {
        console.log("A键按下");
      }
      // 获取左摇杆X轴值（-1到1）
      console.log("左摇杆X:", pad.axes[0]);
    }
  });
  requestAnimationFrame(checkGamepad);
}
checkGamepad();

应用场景：网页游戏、VR控制、工业设备模拟器。建议添加手柄断开重连机制。

2. 振动API（Vibration API）

移动设备专属功能，通过navigator.vibrate()控制震动：

// 震动200ms，暂停100ms，再震动200ms
navigator.vibrate([200, 100, 200]);
// 停止震动
navigator.vibrate(0);

注意事项：仅支持移动设备，iOS限制严格，需用户交互触发（如点击事件）。可结合触摸事件实现点击反馈。

三、数据可视化：超越Canvas的渲染能力

1. 图像处理API（Image Capture API）

直接从摄像头获取高分辨率图像并处理：

async function capturePhoto() {
  const stream = await navigator.mediaDevices.getUserMedia({ video: true });
  const videoTrack = stream.getVideoTracks()[0];
  const imageCapture = new ImageCapture(videoTrack);
  try {
    const photo = await imageCapture.takePhoto();
    const blobUrl = URL.createObjectURL(photo);
    document.getElementById("photo").src = blobUrl;
  } catch (err) {
    console.error("拍照失败:", err);
  }
}

高级功能：调整焦距、白平衡、曝光补偿等参数，适合需要专业级拍照的Web应用。

2. WebGL 2.0与WebGPU

相比WebGL 1.0，WebGL 2.0支持更多着色器特性，而WebGPU作为下一代图形API，提供更接近底层的控制：

// WebGPU示例（简化版）
async function initWebGPU() {
  if (!navigator.gpu) throw new Error("不支持WebGPU");
  const adapter = await navigator.gpu.requestAdapter();
  const device = await adapter.requestDevice();
  // 创建渲染管线等操作...
}

性能优势：WebGPU通过减少驱动层开销，使复杂3D渲染效率提升3-5倍，适合游戏、CAD等场景。

四、网络与存储：突破传统限制

1. 本地HTTP服务器（Web Server API）

Chrome 98+实验性功能，允许Web应用启动本地HTTP服务器：

// 需在Chrome旗舰版或开启实验性标志
async function startLocalServer() {
  const port = await window.chooseFileSystemEntries({
    type: "save-file",
    accepts: [{ description: "HTML文件", extensions: ["html"] }]
  });
  // 实际API仍在草案阶段，此处为概念演示
  const server = new WebServer({
    port: 8080,
    root: "/project"
  });
  server.start();
}

潜在应用：本地开发环境、离线文档系统。当前需通过Chrome扩展或Node.js中间层实现类似功能。

2. 文件系统访问API（File System Access API）

直接操作本地文件系统，支持目录读写：

async function openDirectory() {
  try {
    const dirHandle = await window.showDirectoryPicker();
    for await (const [name, handle] of dirHandle.entries()) {
      if (handle.kind === "file") {
        const file = await handle.getFile();
        console.log("文件:", name, file.size);
      }
    }
  } catch (err) {
    if (err.name !== "AbortError") console.error(err);
  }
}

安全限制：仅限HTTPS或localhost，需用户主动选择目录。适合图片管理、代码编辑器等应用。

五、安全与隐私：平衡功能与保护

1. 剪贴板访问（Clipboard Access API）

异步读写剪贴板，避免传统document.execCommand的同步阻塞：

// 写入剪贴板
async function copyToClipboard(text) {
  try {
    await navigator.clipboard.writeText(text);
    console.log("复制成功");
  } catch (err) {
    console.error("复制失败:", err);
  }
}
// 读取剪贴板（需权限）
async function readClipboard() {
  try {
    const text = await navigator.clipboard.readText();
    console.log("剪贴板内容:", text);
  } catch (err) {
    console.error("读取失败:", err);
  }
}

权限控制：读取操作需用户主动授权，建议提供明确的提示说明。

2. 权限状态API（Permissions API）

动态检查API权限状态，优化用户体验：

async function checkPermission(name) {
  const status = await navigator.permissions.query({ name });
  return status.state; // "granted" | "denied" | "prompt"
}
// 使用示例
if ((await checkPermission("camera")) === "granted") {
  startVideoChat();
} else {
  showPermissionGuide();
}

支持类型：摄像头、麦克风、地理位置、通知等20+种权限。

六、实践建议

1. 渐进增强：使用特性检测（if ("api" in navigator)）提供降级方案
2. 权限管理：在需要时请求权限，避免启动时弹窗轰炸
3. 错误处理：捕获所有可能的异常，提供友好的用户提示
4. 性能监控：对资源密集型操作（如屏幕共享）进行性能分析
5. 兼容性检查：通过Can I Use等工具确认目标用户群体的支持情况

这些隐藏的Web API正在重新定义浏览器的功能边界。从系统通知到硬件控制，从高级图形渲染到本地文件操作，开发者可以构建出媲美原生应用的Web体验。随着浏览器标准的演进，未来还将涌现更多突破性功能，持续关注W3C草案和Chrome/Firefox的实验性特性是保持技术领先的关键。