移動web喚起手機拍照、攝影、錄音及撥號

發表於2023-09-19
Web

得益於 HTML5 的發展，如今已強大到可直接操作手機的許多功能，體驗感不輸於原生 APP。本文主要介紹移動web頁面喚起手機的拍照、攝像、錄音及撥號的功能

以下程式碼均可直接複製執行檢視效果，本地測試有兩種方式：

1、本地搭個測試環境，手機連線區域網，輸入IP地址訪問進行測試（推薦）

2、程式碼檔案直接存到手機，使用手機瀏覽器開啟檔案執行進行測試

拍照

圖片

程式碼

<!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>

攝像

圖片

程式碼

<!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>

錄音

圖片

程式碼

<!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>

撥號

圖片

程式碼

<!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>

相關文章