圖片來源于網(wǎng)絡(luò)
得益于 HTML5 的發(fā)展，如今已強(qiáng)大到可直接操作手機(jī)的許多功能，體驗(yàn)感不輸于原生 APP。本文主要介紹移動(dòng)web頁面喚起手機(jī)的拍照、攝像、錄音及撥號(hào)的功能
以下代碼均可直接復(fù)制運(yùn)行查看效果，本地測試有兩種方式：
1、本地搭個(gè)測試環(huán)境，手機(jī)連接局域網(wǎng)，輸入IP地址訪問進(jìn)行測試（推薦）
2、代碼文件直接存到手機(jī)，使用手機(jī)瀏覽器打開文件運(yùn)行進(jìn)行測試
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();">點(diǎn)擊拍照</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();">點(diǎn)擊攝像</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();">點(diǎn)擊錄音</button></p>
</body>
</html>
4 撥號(hào)
call.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>撥號(hào)</title>
<style type="text/css">
body{
text-align: center;
background-color: #f8e6ce;
}
</style>
</head>
<body>
<p>手機(jī)號(hào)碼：112233445566778899</p>
<a href="tel:112233445566778899">點(diǎn)擊撥號(hào)</a>
</body>
</html>
最后
覺得文章不錯(cuò)的，請點(diǎn)個(gè)贊哇！
文章首發(fā)于微信公眾號(hào)：GitWeb，歡迎關(guān)注學(xué)習(xí)技術(shù)討論交流。
歡迎掃碼關(guān)注
