前端访问设备navigator

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 。

实例：

<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。

• 方向事件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('您的设备不支持位置感应');

}