前端访问设备navigator

时间：2024-04-04 22:45:37
1. 定位当前地理位置
navigator.geolocation.getCurrentPosition(success, error, options)
如：饿了么，美团等等生活服务类需要知道地理位置
html5 的Geolocation API构建基于地理位置的应用
IE 9+；Edge 12+；Firefox 3.5+；Chrome 5+；Safari 5+

出于安全考虑部分最新浏览器只允许通过https协议使用

判断是否支持该API：
if (navigator.geolocation) {
//获取地理位置
}else{
alert('浏览器不支持geolocation');
}
获取当前用户地理位置：
navigator.geolocation.getCurrentPosition(
function success (position) { },
function error (positionError) { },
options
)
实例：
参数
success：
成功得到位置信息时的回调函数，使用Position 对象作为唯一的参数。 
error ：可选
获取位置信息失败时的回调函数，使用 PositionError 对象作为唯一的参数，这是一个可选项。 
options： 可选
一个可选的PositionOptions 对象。
var options = {
enableHighAccuracy: true,
timeout: 5000,
maximumAge: 0
};

function success(position) {
var crd = position.coords;

console.log('Your current position is:');
console.log('Latitude : ' + crd.latitude);
console.log('Longitude: ' + crd.longitude);
console.log('More or less ' + crd.accuracy + ' meters.');
};

function error(err) {
console.warn('ERROR(' + err.code + '): ' + err.message);
};

navigator.geolocation.getCurrentPosition(success, error, options);

if (navigator.geolocation) {
//获取地理位置
navigator.geolocation.getCurrentPosition(success, error, options);
}else{
alert('浏览器不支持geolocation');
}
成功获取位置后,会调用回调函数success。返回的参数position对象包含获取位置时的时间戳timestamp和坐标信息coords.。coords对象包含了很多有用的位置数据信息,列举几个常用的属性,如下：
  • latitude:坐标纬度。
  • longitude:坐标经度。
  • accuracy:坐标精度,单位为米。
当获取位置失败时,会调用回调函数error。返回的参数positionError的message属性包含了相关的错误信息描述, positionError.code标识错误的原因, positionError.code的值有以下几种。
  • UNKNOWN ERROR(O):其他错误。
  • PERMISSION_DENIED(1):用户拒绝分享位置信息。
  • POSITION_UNAVAILABLE(2):获取用户位置信息失败。
  • TIMEOUT(3):获取用户位置信息超时。
getCurrentPosition方法的参数options可以用来设置以下内容。
  • enableHighAccuracy:布尔值,是否获取高精度的位置信息,如果开启,可能会增加响应时间,默认值为false.
  • timeout：定位超时时间（ms）。默认为0，表示无限大
  • maximumAge：用户位置信息缓存的最大时间（ms），默认为0

watchPosition监听位置信息，三个参数及用法与获取地理位置信息一样
id = navigator.geolocation.watchPosition(success[, error[, options]])
clearWatch取消监听
navigator.geolocation.clearWatch(id);

2. 实战：调用摄像头拍个照
html5中getUserMedia API 提供访问用户媒体设备的能力，无需借助浏览器插件。

MediaDevices.getUserMedia（）方法提示用户允许使用一个视频和/或一个音频输入设备，例如相机或屏幕共享和/或麦克风。如果用户给予许可，就返回一个Promise对象，MediaStream对象作为此Promise对象的Resolved［成功］状态的回调函数参数，相应的，如果用户拒绝了许可，或者没有媒体可用的情况下PermissionDeniedError或者NotFoundError作为此Promise的Rejected［失败］状态的回调函数参数。注意，由于用户不会被要求必须作出允许或者拒绝的选择，所以返回的Promise对象可能既不会触发resolve也不会触发 reject。
前端访问设备navigator
实例：
<video id="video" autoplay="" style="width:480px;height:320px" src=""></video>
<div><button id="capture">拍照</button></div>
<canvas id="canvas" width="480" height="320"></canvas>

// 访问用户媒体设备的兼容方法
function getUserMedia(constraints, success, error) {
if (navigator.mediaDevices.getUserMedia) {
// 最新的标准API
navigator.mediaDevices.getUserMedia(constraints)
.then(success).catch(error);
} else if (navigator.webkitGetUserMedia) {
// Webkit核心浏览器
navigator.webkitGetUserMedia(constraints, success, error);
} else
if (navigator.mozGetUserMedia) {
// Firefox浏览器
navigator.mozGetUserMedia(constraints, success, error);
} else if (navigator.getUserMedia) {
// 旧版API
navigator.getUserMedia(constraints, success, error);
}
}
var video = document.getElementById("video");// video元素
var canvas = document.getElementById("canvas");// canvas元素
var context = canvas.getContext("2d");

// 成功的回调函数
function success(stream) {
var CompatibleURL = window.URL || window.webkitURL
video.src = CompatibleURL.createObjectURL(stream);//将视频流设置为video元素的源
video.play();// 播放视频
}

// 异常的回调函数
function error(error) {
console.log('访问用户媒体设备失败：', error.name, error.message);
}

if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia ||
navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
// 调用用户媒体设备，访问摄像头
getUserMedia({ video: { width: 480, height: 320 } }, success, error);
} else {
alert('您的浏览器不支持访问用户媒体设备！');
}

// 绑定拍照按钮的点击事件
document.getElementById("capture").addEventListener("click", function () {
context.drawImage(video, 0, 0, 480, 320);// 将video画面在canvas上绘制出来
});
2. 实战：在手机上实现摇一摇
HTML 5提供了访问传感器信息的API,分别是DeviceOrientationEvent和DeviceMotionEvent,本节将介绍API的使用及通过DeviceMotionEvent实现摇一摇功能。

如图所示, X轴表示左右横贯手机的轴,当手机绕 轴旋转时,移动的方向称为Beta;Y轴表示上下纵贯手机的轴,当手机绕 轴旋转时,移动的方向称为Gamma; Z轴表示垂直于手机平面的轴,当手机绕Z轴旋转时,移动的方向称为Alpha。
前端访问设备navigator

  • 方向事件deviceorientation
deviceorientation事件是在设备方向发生变化时触发,使用方法如下:
window.addEventListener ('deviceorientation', orientationHandler, true);
回调函数orientationHandler在注册后,会被定时调用,并会收到一个DeviceOrientationEvent 类型参数,通过该参数获取设备的方向信息,包含的属性见下表
属性名
说明
absolute
如果方向数据跟地球坐标系和设备坐标系有差异,
则为true
,如果方向数据由设备本身的坐标系提供,则为flse.
alpha
设备在Alpha方向上旋转的角度,范围为0-360度,
beta
设备在Beta方向上旋转的角度,范围为-180-180度.
gamma
设备在Gamma方向上旋转的角度,范围为-90-90度
  • 移动事件 devicemotion
devicemotion事件在设备位置发生变化时触发,使用方法如下:
window.addEventListener (‘devicemotion’, motionHandler, false)；
回调函数motionHandler在注册之后,会被定时调用,并会收到一个DeviceMotionEvent类型
参数,通过该参数可以访问设备的方向和位置信息,包含属性信息见表
属性名
说明
acceleration
设备在X, Y, Z三个轴的方向上移动的距离,
已抵消重力加速
accelerationIncludingGravity
设备在X、 Y,Z三个轴的方向上移动的距离,
包含重力加速
rotationRate
设备在Alpha, Beta. Ganma三个方向旋转的角度,
interval
从设备获取数据的频率,单位是毫秒
实例：
var SHAKE_SPEED_THRESHOLD = 300; // 摇动速度阈值
var lastTime = 0;// 上次变化的时间
var x = y = z = lastX = lastY = lastZ = 0; // 位置变量初始化

function motionHandler(evt) {
var acceleration = evt.accelerationIncludingGravity; // 取得包含重力加速的位置信息
var curTime = Date.now(); // 取得当前时间
if ((curTime - lastTime) > 120) { // 判断
var diffTime = curTime - lastTime; // 两次变化时间差
lastTime = curTime; // 保存此次变化的时间
x = acceleration.x;
y = acceleration.y;
z = acceleration.z;
/* 计算速度 */
var speed = Math.abs(x + y + z - lastX - lastY - lastZ) / diffTime * 1000;
if (speed > SHAKE_SPEED_THRESHOLD) { // 速度是否大于预设速度
alert("你摇动了手机");
}
lastX = x; // 保存此次变化的位置x
lastY = y; // 保存此次变化的位置y
lastZ = z; // 保存此次变化的位置z
}
}
if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion', motionHandler, false);
} else {
alert('您的设备不支持位置感应');
}

相关文章