camera api (含图片预览)

参考地址

  • 主要为利用input type=file, accept="image/*" 进行处理
  • 图片预览方式(两种)
const file = e.target.files[0]
// 方式1
const url1 = window.URL.createObjectURL(file);
let url2 // 方式2
const reader = new FileReader();
reader.onload = (e) => {
url2 = e.target.result;
};
reader.readAsDataURL(file);

touch events (触屏事件)

参考地址

  • touchstart
  • touchend
  • touchcancel 电话的接入或者弹出信息等比较高级的事件触发,一般做保存操作
  • touchmove

geolocation

参考地址

  • 注意谷歌浏览器要https才能提供定位服务
    if (navigator.geolocation){
navigator.geolocation.getCurrentPosition((position) => {
this.geolocation = `latitude:${position.coords.latitude},longitude:${position.coords.longitude}`
}, (err) => {
console.log(err);
}, {
enableHighAccuracy: true,
maximumAge : 30000, // buffer memory timre
timeout : 27000 // waiting time
})
} else {
alert('geolocation not supported!')
}

device orientation and motion

参考地址

    window.addEventListener('deviceorientation',(doe) => {
this.absolute = doe.absolute //false 表示方向数据由设备本身坐标系提供
this.alpha = doe.alpha // 绕Z轴0-360 进入时手机水平正对的方向为0或360
this.beta = doe.beta // 绕X轴-180~180 描述由前向后旋转
this.gamma = doe.gamma // 绕Y轴-90~90 描述由左向右旋转
}, true) // chrome v65 只支持accelerationIncludingGravity和interval(应该因为一些限制没有找到),其它浏览器最新版基本都支持
window.addEventListener('devicemotion', (dme) => {
this.acceleration = dme.acceleration
this.accelerationIncludingGravity = dme.accelerationIncludingGravity
this.rotationRate = dme.rotationRate
this.interval = dme.interval
}, false)

Pointer Lock(鼠标锁定)

参考地址

    <button onclick="lockPointer();">锁住它!</button>
<div id="pointer-lock-element" style="width:500px;height:500px;background-color: red"></div>

// 简单示例,将鼠标锁定在 pointer-lock-element 元素内
let = document.getElementById("pointer-lock-element"); document.addEventListener("mousemove", function(e) {
var movementX = e.movementX
movementY = e.movementY // 打印鼠标移动的增量值。
console.log("X=" + movementX, "Y=" + movementY);
}, false); function lockPointer() {
elem = document.getElementById("pointer-lock-element");
elem.requestPointerLock = elem.requestPointerLock ||
elem.mozRequestPointerLock ||
elem.webkitRequestPointerLock;
elem.requestPointerLock();
}

HTML5 Device Access (设备访问)的更多相关文章

  1. [转] HTML5+规范:device(管理设备信息)

    http://blog.csdn.net/qq_27626333/article/details/51815310 Device模块管理设备信息,用于获取手机设备的相关信息,如IMEI.IMSI.型号 ...

  2. 与众不同 windows phone (18) - Device(设备)之加速度传感器, 数字罗盘传感器

    原文:与众不同 windows phone (18) - Device(设备)之加速度传感器, 数字罗盘传感器 [索引页][源码下载] 与众不同 windows phone (18) - Device ...

  3. 与众不同 windows phone (20) - Device(设备)之位置服务(GPS 定位), FM 收音机, 麦克风, 震动器

    原文:与众不同 windows phone (20) - Device(设备)之位置服务(GPS 定位), FM 收音机, 麦克风, 震动器 [索引页][源码下载] 与众不同 windows phon ...

  4. 与众不同 windows phone (19) - Device(设备)之陀螺仪传感器, Motion API

    原文:与众不同 windows phone (19) - Device(设备)之陀螺仪传感器, Motion API [索引页][源码下载] 与众不同 windows phone (19) - Dev ...

  5. Blazor组件自做十一 : File System Access 文件系统访问 组件

    Blazor File System Access 文件系统访问 组件 Web 应用程序与用户本地设备上的文件进行交互 File System Access API(以前称为 Native File ...

  6. 用DBMS_ADVISOR.SQLACCESS_ADVISOR创建SQL Access Advisor访问优化建议

    使用OEM方式来创建SQL Access Advisor访问优化建议,已经是四五年的事了,下面就来写写怎样使用DBMS_ADVISOR.SQLACCESS_ADVISOR来创建SQL Access A ...

  7. 与众不同 windows phone (23) - Device(设备)之硬件状态, 系统状态, 网络状态

    原文:与众不同 windows phone (23) - Device(设备)之硬件状态, 系统状态, 网络状态 [索引页][源码下载] 与众不同 windows phone (23) - Devic ...

  8. 与众不同 windows phone (22) - Device(设备)之摄像头(硬件快门, 自动对焦, 实时修改捕获视频)

    原文:与众不同 windows phone (22) - Device(设备)之摄像头(硬件快门, 自动对焦, 实时修改捕获视频) [索引页][源码下载] 与众不同 windows phone (22 ...

  9. 与众不同 windows phone (21) - Device(设备)之摄像头(拍摄照片, 录制视频)

    原文:与众不同 windows phone (21) - Device(设备)之摄像头(拍摄照片, 录制视频) [索引页][源码下载] 与众不同 windows phone (21) - Device ...

随机推荐

  1. Codeforces Gym100962J:Jimi Hendrix(树型DP)

    http://codeforces.com/gym/100962/attachments 题意:有一个n个节点的字母树,给出n-1条边的信息,代表边上有一个字母,然后给出长度为m的字符串,问是否能在这 ...

  2. SQL系统优化

    1 系统优化介绍 在我们的项目中,由于客户的使用时间较长或客户的数据量大,造成系统运行速度慢,系统性能下降就容易造成数据库阻塞.这是个非常痛苦的事情,用户的查询.新增.修改等需要花很多时间,甚至造成系 ...

  3. 微信小程序 CSS border-radius元素 overflow:hidden失效问题 iPhone ios 苹果兼容问题 伪类元素

    同事找我解决一个问题 说安卓圆角没问题 苹果上失效了 我一看 其实就是没做兼容上图给你们看看 有没有看出来 其实就是父级设置圆角属性失效 父元素使用border-radius和overflow:hid ...

  4. ffmpeg+nginx将rtsp转为rtmp

    一.安装ffmpeg 1.http://ffmpeg.org/download.html下载地址,选择合适的操作系统版本下载,因为我的操作系统是centos7,所以下面的安装都是命令都是针对cento ...

  5. django基础知识之上传图片:

    上传图片 当Django在处理文件上传的时候,文件数据被保存在request.FILES FILES中的每个键为<input type="file" name="& ...

  6. 干货分享:ASP.NET CORE(C#)与Spring Boot MVC(JAVA)异曲同工的编程方式总结

    目录 C# VS JAVA 基础语法类比篇: 一.匿名类 二.类型初始化 三.委托(方法引用) 四.Lambda表达式 五.泛型 六.自动释放 七.重写(override) ASP.NET CORE ...

  7. Java编程思想:内部类基础部分

    public class Test { public static void main(String[] args) { // Parcel1.test(); // Parcel2.test(); / ...

  8. 网页判断浏览器是否安装flash

    <script> //检验flash版本 以及falsh是否安装 function detectFlash() { try { if(navigator.mimeTypes.length& ...

  9. 个人永久性免费-Excel催化剂功能第99波-手机号码归属地批量查询

    高潮过往趋于平静,送上简单的手机号码归属地查询,因接口有数量限制,仅能满足少量数据需求,如有大规模数据却又想免费获得,这就成为无解了,数据有价,且用且珍惜. 业务使用场景 除了日常自带的手机各种管家为 ...

  10. Python学习3——Python的简单推导

    列表推导是一种从其他列表创建列表的方式,类似于数学中的集合推导,列表推导的工作原理非常简单,类似于for循环.(以下代码均在IDLE实现) 最简单的列表推导: >>>[x*x for ...