浏览器API

会持续更新

使用需要判断浏览器的兼容性，在部分浏览器上可能不支持，且调用浏览器的部分api需要进行浏览器授权。

调用浏览器摄像头

<button type="button" id="start-camera">打开摄像头</button>
<button type="button" id="snapshot-btn">拍照</button>
<video id="preview-box" width="640" height="480" autoplay></video>
<canvas width="640" height="480"></canvas>

const startCameraBtn = document.querySelector('#start-camera');  // 打开摄像头按钮
const snapshotBtn = document.querySelector('#snapshot-btn');  // 拍照按钮
const exportBtn = document.querySelector('#export-btn');  // 导出照片按钮
const previewBox = document.querySelector('#preview-box');  // 预览区
const canvas = document.querySelector('canvas');  // canvas用来显示拍摄的照片
let imgData = null;  // 存储图片数据

startCameraBtn.addEventListener('click', () => { // 打开摄像头按钮点击
  // 申请摄像头权限
  navigator.mediaDevices.getUserMedia({video: true, audio: false}).then(stream => {
    // 把媒体流直接传给 video 的 srcObject
    previewBox.srcObject = stream;
  }).catch(info => {
    alert('无法获取摄像头权限：' + info);
  });
});
snapshotBtn.addEventListener('click', () => {// 拍照按钮点击
  // 绘制 2D 图像
  canvas.getContext('2d').drawImage(previewBox, 0, 0, previewBox.width, previewBox.height);
  // 把 canvas 的图像转换为 dataURL 数据
  imgData = canvas.toDataURL('image/jpeg');
});

调用浏览器文字转音频能力

const text='文本'
let msg = new SpeechSynthesisUtterance(text);
window.speechSynthesis.speak(msg);

查看设备电量

navigator.getBattery().then(function (battery) {
       // 后续代码
       // 获取设备电量剩余百分比
       var level = battery.level //最大值为1,对应电量100%
       console.log('Level: ' + level * 100 + '%')

       // 获取设备充电状态
       var charging = battery.charging
       console.log('充电状态: ' + charging)

       // 获取设备完全充电需要的时间
       var chargingTime = battery.chargingTime
       console.log('完全充电需要的时间: ' + chargingTime)

       // 获取设备完全放电需要的时间
       var dischargingTime = battery.dischargingTime
       console.log('完全放电需要的时间: ' + dischargingTime)
})

查看联网状态

navigator.onLine
  // true 在线 false 下线
  // 监听
window.addEventListener("offline", function(e) {alert("offline");})
window.addEventListener("online", function(e) {alert("online");})

查看定位信息

 const successCallback = (position) => {
      console.log(position);
    };

const errorCallback = (error) => {
      console.log(error);
   };

 navigator.geolocation.getCurrentPosition(successCallback, errorCallback);

获取浏览器版本和操作系统

navigator.userAgent

复制

const text = '文本';
if (navigator.clipboard) {
    // clipboard api 复制
    // 有兼容性问题
    navigator.clipboard.writeText(text);
} else {
    // 有大段文本复制问题
    const textarea = document.createElement('textarea');
    document.body.appendChild(textarea);
    // 隐藏此输入框
    textarea.style.position = 'fixed';
    textarea.style.clip = 'rect(0 0 0 0)';
    textarea.style.top = '10px';
    // 赋值
    textarea.value = text;
    // 选中
    textarea.select();
    // 复制
    document.execCommand('copy', true);
    // 移除输入框
    document.body.removeChild(textarea);
}