1、调用 邮件 : 参考 https://blog.csdn.net/github_38516987/article/details/77637546 (亲测有效)

  1. <a href="mailto:johndoe@sample.com">发送邮件</a>

2、调用 拨打手机

  1. <a href="tel:400-888-9999">400-888-9999</a>

3、调用 短信

  1. <a href="sms:10086">发送</a>

3、调用 照相机 : 参考 https://blog.csdn.net/qq_19872525/article/details/81176002(亲测有效,在手机端)

  1. <label>照相机</label>
  2. <input type="file" id='image' accept="image/*" capture='camera'>

4、调用 摄像

  1. <label>摄像机</label>
  2. <input type="file" id='video' accept="video/*" capture='camcorder'>

5、调用 文件 :相册文件、录音文件、视频文件 等都是属于文件,所以选择文件的方法是一样的

  1. <label>上传文件</label>
  2. <input type="file" name="">

6、调用 录音 :参考 https://blog.csdn.net/u014575771/article/details/53187143

  1. <label>录音</label>
  2. <input type="file" accept="audio/*" capture="microphone">

7、调用 定位,获取坐标 :参考 https://blog.csdn.net/qq_34690340/article/details/79388775 (亲测有效)

  1. var getlocationpoint = function () {
  2. if (navigator.geolocation){
  3. navigator.geolocation.getCurrentPosition(
  4. function (position) {
  5. latitude = position.coords.latitude;//获取纬度
  6. longitude = position.coords.longitude;//获取经度
  7. alert(latitude)
  8. alert(longitude)
  9. });
  10. }else{
  11. alert("不支持定位功能");
  12. }
  13. }
  14. getlocationpoint();

8、调用 震动 :参考 https://blog.csdn.net/qq_24147051/article/details/52980515

  1. <div class="shock">按我手机会震动</div>
  1. //Vibration接口用于在浏览器中发出命令,使得设备振动。
  2. function vibration() {
  3. navigator.vibrate = navigator.vibrate
  4. || navigator.webkitVibrate
  5. || navigator.mozVibrate
  6. || navigator.msVibrate;
  7.  
  8. if (navigator.vibrate) {
  9. // 支持
  10. console.log("支持设备震动!");
  11. }
  12.  
  13. $(".shock").click(function () {
  14. alert("1111");
  15. navigator.vibrate([500, 300, 400, 300]);
  16. });
  17. }
  18. vibration();

9、调用 加速器(摇一摇):参考 https://www.2cto.com/kf/201711/698864.html

  1. const SHAKE_SPEED = 300;
  2. let lastTime = 0;//上次变化的时间
  3. let x = y = z = lastX = lastY = lastZ = 0;//位置变量初始化
  4.  
  5. function motionHandler(event) {
  6. let acceleration = event.accelerationIncludingGravity;
  7. let curTime = Date.now();//取得当前时间
  8. if ((curTime - lastTime) > 120) {
  9. let diffTime = curTime - lastTime;
  10. lastTime = curTime;
  11. x = acceleration.x;
  12. y = acceleration.y;
  13. z = acceleration.z;
  14. //计算摇动速度
  15. let speed = Math.abs(x + y + z - lastX - lastY - lastZ) / diffTime * 1000;
  16. if (speed > SHAKE_SPEED) {
  17. alert("你摇动了手机");
  18. }
  19. lastX = x;
  20. lastY = y;
  21. lastZ = z;
  22. }
  23. }
  24. if (window.DeviceMotionEvent) {
  25. // 这里的motionHandler函数,在手机端上会一直执行。不知道是不是因为手机对移动太敏感,放到桌子上不动都会触发。
  26. window.addEventListener('devicemotion', motionHandler, false);
  27. } else {
  28. alert("你的设备不支持位置感应");
  29. }

10、H5调用浏览器全屏的接口:https://www.jb51.net/article/76695.htm
  谷歌浏览器中:

  1. document.documentElement.webkitRequestFullscreen() // 开启 整个网页全屏
  2.  
  3. document.webkitExitFullscreen() // 关闭全屏

H5 调用 手机设备的功能的更多相关文章

  1. ionic 调用手机的打电话功能

    1.需求描述 在ionic项目用调用手机的打电话功能.开始还想找cordova和ng-cordova的插件那,现在H5实现起来特别方便. 2.准备 在cordova中所有的URL Schemes 都是 ...

  2. H5调用手机的相机/摄像/录音等功能 _input:file的capture属性说明

    H5使用input标签调用系统默许相机,摄像,录音功能.使用input:file标签, 去调用系统默认相机,摄像,录音功能,其实是有个capture属性,直接说明需要调用什么功能: <input ...

  3. H5 调用手机摄像机、相册功能

    <input type="file" accept="image/*" capture="camera"> <input ...

  4. h5调用手机相册摄像头以及文件夹

    在之前一家公司的时候要做一个app里面有上传头像的功能,当时研究了好久,找到了一篇文章关于h5摄像头以及相册的调用的,所以就解决了这个问题了!!我这里记录一下以便后面有人需要,可以参考一下!!!! 下 ...

  5. h5调用手机照相机

    camera.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...

  6. H5调用手机拍照并展示在前端页面

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. h5调用手机前后摄像头,拍照

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="pacam.aspx.cs& ...

  8. h5调用手机摄像头/相册

    <!DOCTYPE HTML><html><head> <title>上传图片</title> <meta charset=" ...

  9. h5调用底层接口的一些知识

    之前接触过这方面的知识,一直想写一些关于代码的文字,但考虑到浪费时间,又不具备大神的实力,也不想去把别人的代码照搬过来,所以一直都是空白着的,今天敲代码的时候,有了一个比较好的想法,第一,定位在学习这 ...

随机推荐

  1. Delphi 如何在程序中执行动态生成的Delphi代码

    如何在程序中执行动态生成的Delphi代码 经常发现有人提这类问题,或者提问内容最后归结成这种问题 前些阵子有位高手写了一个“执行动态生成的代码”,这是真正的高手,我没那种功力,我只会投机取巧. 这里 ...

  2. 简单js表单验证

     简单js表单验证demo <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org ...

  3. JDK1.8中ArrayList的实现原理及源码分析

    一.概述 ArrayList是Java开发中使用比较频繁的一个类,通过对源码的解读,可以了解ArrayList的内部结构以及实现方法,清楚它的优缺点,以便我们在编程时灵活运用. 二.源码分析 2.1 ...

  4. jmeter添加自定义扩展函数之MD5加密

    1,打开eclipse,新建maven工程,在pom中引用jmeter核心jar包,具体请看---https://www.cnblogs.com/guanyf/p/10863033.html---,这 ...

  5. 3天教你掌握Python必备常用英语词汇

    第一天 path [ pɑ:θ ] 路径 unexpected [ˌʌnɪkˈspektɪd] 不期望的 class [klɑ:s] 类 usage [ˈju:sɪdʒ] 使用 public ['p ...

  6. CF1241 D Sequence Sorting(离散化+DP)

    题意: 给定数组a[n],用两种操作: 1.将数组中所有值为x的数移至开头 2.将数组中所有值为x的数移至末尾 问,经过最少多少次操作,能将数组a[n]变为非递减的有序数列? (1<=n< ...

  7. Gentoo 搭遗

    安装 app-portage/gentoolkit 使用如下方式,可查询某个被包安装的文件列表,可以筛选文件类型 equey files [--filter=doc] <包名称> emer ...

  8. pixi与lottie-web的benchmark测试

    生产版本 "dependencies": {     "lottie-web": "^5.5.7",     "pixi-spin ...

  9. 十万级百万级数据量的Excel文件导入并写入数据库

    一.需求分析 最近接到一个需求,导入十万级,甚至可能百万数据量的记录了车辆黑名单的Excel文件,借此机会分析下编码过程; 首先将这个需求拆解,发现有三个比较复杂的问题: 问题一:Excel文件导入后 ...

  10. dlib 基于摄像流检测眨眼次数

    眼睛纵横比(EAR) 在讨论EAR之前,先看看68个人脸特征点:  人脸特征点检测本身的算法是很复杂的,dlib中给出了相关的实现. 每只眼睛由6个(x,y)坐标表示,从眼睛的左角开始,然后围绕该区域 ...