H5唤起手机照相、相册、摄影、录音及打电话发邮件

最新推荐文章于 2024-01-12 15:24:24 发布

维多利亚少年-

最新推荐文章于 2024-01-12 15:24:24 发布

阅读量870

点赞数 1

分类专栏： h5 文章标签： html5

本文链接：https://blog.csdn.net/weixin_45532305/article/details/118890862

版权

h5 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

这篇博客展示了如何使用HTML5实现拍照、摄像和录音功能。通过输入元素让用户选择本地资源，然后实时预览和播放。对于拍照，用户可以调用摄像头；摄像功能允许录制视频；录音部分则能捕获音频。这些功能为网页应用提供了丰富的多媒体交互体验。

摘要由CSDN通过智能技术生成

拍照

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>拍照</title>
<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>
    <input type="file" id='image' accept="image/*" capture='camera' onchange="change()">
</body>
</html>

如果想选择本地照片把input标签的capture='camera'属性去掉即可

摄影

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>摄像</title>
<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" onchange="change()">
</body>
</html>

录音

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>录音</title>
<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" onchange="change()">
</body>
</html>

拨号、发邮件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>拨号</title>
</head>
<body>
  <p>手机号码：112233445566778899</p>
  <a href="tel:112233445566778899">点击拨号</a>
  <a href="mailto:11111111youjian@163.com">一键发送邮件</a>
</body>
</html>