圖片來源于網(wǎng)絡
得益于 HTML5 的發(fā)展如庭，如今已強大到可直接操作手機的許多功能碰煌，體驗感不輸于原生 APP舒岸。本文主要介紹移動web頁面喚起手機的拍照、攝像芦圾、錄音及撥號的功能
以下代碼均可直接復制運行查看效果蛾派，本地測試有兩種方式：
1、本地搭個測試環(huán)境，手機連接局域網(wǎng)洪乍，輸入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>
最后
覺得文章不錯的壳澳，請點個贊哇岂贩！
文章首發(fā)于微信公眾號：GitWeb，歡迎關注學習技術討論交流巷波。
歡迎掃碼關注
