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调用底层接口的一些知识
之前接触过这方面的知识,一直想写一些关于代码的文字,但考虑到浪费时间,又不具备大神的实力,也不想去把别人的代码照搬过来,所以一直都是空白着的,今天敲代码的时候,有了一个比较好的想法,第一,定位在学习这 ...
随机推荐
- 本地项目关联到远程git仓库
本地项目关联到远程git仓库 场景是这样的:在gitee-code上新建一个项目,gitee会帮你把项目初始化,初始化之后会根据你的选择生成默认的说明文件和gitignore文件.这个时候你就可以复制 ...
- 前端每日实战:33# 视频演示如何用纯 CSS 创作牛奶文字变换效果
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/MGNWOm 可交互视频教程 此视频 ...
- 重写ArcGIS的TiledMapServiceLayer调用天地图瓦片
require(["esri/layers/TiledMapServiceLayer"], function () { dojo.declare("com.StrongI ...
- jenkins-参数化构建插件:Choice Parameter
参考: 谢谢大佬的总结: https://www.cnblogs.com/zhaojingyu/p/9862371.html 使用方式 step1: 添加参数,选择Choice Parameter,并 ...
- MAC使用命令行打包出ipa包-通过xcodeproj
参考 : https://www.jianshu.com/p/32af2f71b4e5--老了,里面的一些命令现在都没有了,但可以借鉴思路 https://www.jianshu.com/p/004c ...
- phpStorm debug
1.重点注意(重要) 如果是wamp,那么请通过wamp打开php.ini文件,不要自己去找php文件夹下的php.ini,这是两个不同的文件 2.开始配置php.ini zend_extension ...
- 【读书笔记】:MIT线性代数(1):Linear Combinations
1. Linear Combination Two linear operations of vectors: Linear combination: 2.Geometric Explaination ...
- JavaScript DOM编程艺术-第一章
发现基础不是很好,补习一下.37买了2本书(dom编程和高级程序设计). 以前读书总是自己勾勾画画,有点没意思.现在写下来,说不定会成为传世经典.哈哈...........随便扯扯淡. 第一天(201 ...
- 组件化框架设计之阿里巴巴开源路由框架——ARouter原理分析(一)
阿里P7移动互联网架构师进阶视频(每日更新中)免费学习请点击:https://space.bilibili.com/474380680 背景 当项目的业务越来越复杂,业务线越来越多的时候,就需要按照业 ...
- leetcode.排序.75颜色分类-Java
1. 具体题目 给定一个包含红色.白色和蓝色,一共 n 个元素的数组,原地对它们进行排序,使得相同颜色的元素相邻,并按照红色.白色.蓝色顺序排列.此题中,我们使用整数 0. 1 和 2 分别表示红色. ...