图片来源于网络
得益于 html5 的发展, 如今已强大到可直接操作手机的许多功能, 体验感不输于原生 App. 本文主要介绍移动 web 页面唤起手机的拍照, 摄像, 录音及拨号的功能
以下代码均可直接复制运行查看效果, 本地测试有两种方式:
1, 本地搭个测试环境, 手机连接局域网, 输入 IP 地址访问进行测试 (推荐)
2, 代码文件直接存到手机, 使用手机浏览器打开文件运行进行测试
1 拍照
photo.HTML
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>
- 拍照
- </title>
- <style type="text/CSS">
- body{ text-align: center; background-color: #f8e6ce; }
- </style>
- <script type="text/javascript">
- function change() {
- var imagefile = document.getElementById("image").files[0];
- var reads = new FileReader();
- reads.readAsDataURL(imagefile);
- reads.onload = function(e) {
- document.getElementById('imageId').src = this.result;
- };
- }
- </script>
- </head>
- <body>
- <img style="width:350px;height:200px;border:2px dashed black;" id="imageId">
- <input type="file" id='image' style="display:none" accept="image/*" capture='camera'
- onchange="change()">
- <p>
- <button onclick="image.click();">
- 点击拍照
- </button>
- </p>
- </body>
- </HTML>
2 摄像
video.HTML
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>
- 摄像
- </title>
- <style type="text/css">
- body{ text-align: center; background-color: #f8e6ce; }
- </style>
- <script type="text/javascript">
- function change() {
- var videofile = document.getElementById('getvideo').files[0];
- var url = URL.createObjectURL(videofile);
- var videos = document.getElementById("myVideo") videos.src = url;
- }
- </script>
- </head>
- <body>
- <video id="myVideo" controls width="350" height="200">
- <source type="video/mp4" />
- <source type="video/webm" />
- <source type="video/ogg" />
- </video>
- <input type="file" id='getvideo' accept="video/*" capture="camcorder"
- style="display:none" onchange="change()">
- <p>
- <button onclick="getvideo.click();">
- 点击摄像
- </button>
- </p>
- </body>
- </HTML>
3 录音
audio.HTML
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>
- 录音
- </title>
- <style type="text/css">
- body{ text-align: center; background-color: #f8e6ce; }
- </style>
- <script type="text/javascript">
- function change() {
- var audiofile = document.getElementById('getaudio').files[0];
- var url = URL.createObjectURL(audiofile);
- var audio = document.getElementById("myAudio") audio.src = url;
- }
- </script>
- </head>
- <body>
- <audio id="myAudio" controls>
- <source type="audio/ogg">
- <source type="audio/mpeg">
- <source type="audio/wav">
- </audio>
- <input type="file" accept="audio/*" id="getaudio" capture="microphone"
- style="display:none" onchange="change()">
- <p>
- <button onclick="getaudio.click();">
- 点击录音
- </button>
- </p>
- </body>
- </HTML>
4 拨号
call.HTML
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>
- 拨号
- </title>
- <style type="text/css">
- body{ text-align: center; background-color: #f8e6ce; }
- </style>
- </head>
- <body>
- <p>
- 手机号码: 112233445566778899
- </p>
- <a href="tel:112233445566778899">
- 点击拨号
- </a>
- </body>
- </HTML>
最后
觉得文章不错的, 请点个赞哇!
来源: http://www.jianshu.com/p/1dc8e3c5e51d