H5 调用 手机设备的功能
1、调用 邮件 : 参考 https://blog.csdn.net/github_38516987/article/details/77637546 (亲测有效)
<a href="mailto:johndoe@sample.com">发送邮件</a>
2、调用 拨打手机
<a href="tel:400-888-9999">400-888-9999</a>
3、调用 短信
<a href="sms:10086">发送</a>
3、调用 照相机 : 参考 https://blog.csdn.net/qq_19872525/article/details/81176002(亲测有效,在手机端)
<label>照相机</label>
<input type="file" id='image' accept="image/*" capture='camera'>
4、调用 摄像
<label>摄像机</label>
<input type="file" id='video' accept="video/*" capture='camcorder'>
5、调用 文件 :相册文件、录音文件、视频文件 等都是属于文件,所以选择文件的方法是一样的
<label>上传文件</label>
<input type="file" name="">
6、调用 录音 :参考 https://blog.csdn.net/u014575771/article/details/53187143
<label>录音</label>
<input type="file" accept="audio/*" capture="microphone">
7、调用 定位,获取坐标 :参考 https://blog.csdn.net/qq_34690340/article/details/79388775 (亲测有效)
var getlocationpoint = function () {
if (navigator.geolocation){
navigator.geolocation.getCurrentPosition(
function (position) {
latitude = position.coords.latitude;//获取纬度
longitude = position.coords.longitude;//获取经度
alert(latitude)
alert(longitude)
});
}else{
alert("不支持定位功能");
}
}
getlocationpoint();
8、调用 震动 :参考 https://blog.csdn.net/qq_24147051/article/details/52980515
<div class="shock">按我手机会震动</div>
//Vibration接口用于在浏览器中发出命令,使得设备振动。
function vibration() {
navigator.vibrate = navigator.vibrate
|| navigator.webkitVibrate
|| navigator.mozVibrate
|| navigator.msVibrate; if (navigator.vibrate) {
// 支持
console.log("支持设备震动!");
} $(".shock").click(function () {
alert("1111");
navigator.vibrate([500, 300, 400, 300]);
});
}
vibration();
9、调用 加速器(摇一摇):参考 https://www.2cto.com/kf/201711/698864.html
const SHAKE_SPEED = 300;
let lastTime = 0;//上次变化的时间
let x = y = z = lastX = lastY = lastZ = 0;//位置变量初始化 function motionHandler(event) {
let acceleration = event.accelerationIncludingGravity;
let curTime = Date.now();//取得当前时间
if ((curTime - lastTime) > 120) {
let diffTime = curTime - lastTime;
lastTime = curTime;
x = acceleration.x;
y = acceleration.y;
z = acceleration.z;
//计算摇动速度
let speed = Math.abs(x + y + z - lastX - lastY - lastZ) / diffTime * 1000;
if (speed > SHAKE_SPEED) {
alert("你摇动了手机");
}
lastX = x;
lastY = y;
lastZ = z;
}
}
if (window.DeviceMotionEvent) {
// 这里的motionHandler函数,在手机端上会一直执行。不知道是不是因为手机对移动太敏感,放到桌子上不动都会触发。
window.addEventListener('devicemotion', motionHandler, false);
} else {
alert("你的设备不支持位置感应");
}
10、H5调用浏览器全屏的接口:https://www.jb51.net/article/76695.htm
谷歌浏览器中:
document.documentElement.webkitRequestFullscreen() // 开启 整个网页全屏 document.webkitExitFullscreen() // 关闭全屏
H5 调用 手机设备的功能的更多相关文章
- ionic 调用手机的打电话功能
1.需求描述 在ionic项目用调用手机的打电话功能.开始还想找cordova和ng-cordova的插件那,现在H5实现起来特别方便. 2.准备 在cordova中所有的URL Schemes 都是 ...
- H5调用手机的相机/摄像/录音等功能 _input:file的capture属性说明
H5使用input标签调用系统默许相机,摄像,录音功能.使用input:file标签, 去调用系统默认相机,摄像,录音功能,其实是有个capture属性,直接说明需要调用什么功能: <input ...
- H5 调用手机摄像机、相册功能
<input type="file" accept="image/*" capture="camera"> <input ...
- h5调用手机相册摄像头以及文件夹
在之前一家公司的时候要做一个app里面有上传头像的功能,当时研究了好久,找到了一篇文章关于h5摄像头以及相册的调用的,所以就解决了这个问题了!!我这里记录一下以便后面有人需要,可以参考一下!!!! 下 ...
- h5调用手机照相机
camera.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...
- H5调用手机拍照并展示在前端页面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- h5调用手机前后摄像头,拍照
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="pacam.aspx.cs& ...
- h5调用手机摄像头/相册
<!DOCTYPE HTML><html><head> <title>上传图片</title> <meta charset=" ...
- h5调用底层接口的一些知识
之前接触过这方面的知识,一直想写一些关于代码的文字,但考虑到浪费时间,又不具备大神的实力,也不想去把别人的代码照搬过来,所以一直都是空白着的,今天敲代码的时候,有了一个比较好的想法,第一,定位在学习这 ...
随机推荐
- Android中实现Activity的启动拦截之----实现360卫士的安装应用界面
第一.摘要 今天不是周末,但是我已经放假了,所以就开始我们的技术探索之旅,今天我们来讲一下Android中最期待的技术,就是拦截Activity的启动,其实我在去年的时候,就像实现这个技术了,但是因为 ...
- [CSP-S模拟测试]:长寿花(DP+组合数)
题目描述 庭院里有一棵古树.圣诞节到了,我想给古树做点装饰,给他一个惊喜.他会不会喜欢呢?这棵树可以分为$n$层,第$i$层有$a_i$个防治装饰品的位置,有$m$种颜色的装饰品可供选择.为了能让他喜 ...
- composer 国内加速,修改镜像源
为什么慢 由于默认情况下执行 composer 各种命令是去国外的 composer 官方镜像源获取需要安装的具体软件信息,所以在不使用代理.不翻墙的情况下,从国内访问国外服务器的速度相对比较慢 如何 ...
- build temu error about SDL
1. 安装sdl2 sudo apt-get install libsdl2-dev 2. 将configure文件中与SDL有关的地方改成SDL2 if test -z "$sdl&quo ...
- C++ 关于const引用的测试
C++ 关于const引用的测试 今天学习了<C++ primer>第五版中的const相关内容,书中关于const的部分内容如下: 由书中内容(P55~P56)可知,const引用有如下 ...
- 数据结构C语言实现
顺序表实现 typedef int Position; typedef struct LNode *List; struct LNode { ElementType Data[MAXSIZE]; Po ...
- jmeter工作原理介绍,以及常见错误
JMeter结果树响应数据中文乱码解决办法 打开jmeter配置文件搜索encoding修改编码格式改为utf-8 Jmeter服务器反馈登陆不成功问题 导入到JMeter后,执行场景,发现登录校验成 ...
- 三种JavaScript 消息框
prompt 提示框 <html><head><script type="text/javascript">function disp_prom ...
- java并发编程之美-阅读记录3
java并发包中的ThreadLocalRandom类,jdk1.7增加的随机数生成器 Random类的缺点:是多个线程使用同一个原子性的种子变量,导致对原子变量的更新产生竞争,降低了效率(该类是线程 ...
- .net core 部署到IIS 以及上 HTTP Error 502.5 - ANCM Out-Of-Process Startup Failure
安装AspNetCoreModule托管模块后执行 1.net stop was /y 2.net start w3svc 测试可以,但是需要装对应的托管模块的版本. 1. .NET Core与Win ...