移动端H5，拍照，录制视频以及录音功能的调用

最新推荐文章于 2025-05-26 18:23:31 发布

原创

最新推荐文章于 2025-05-26 18:23:31 发布 · 7k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #H5拍照 #filereader

本文分享了一段原创代码，用于在移动端H5中调用拍照、录制视频和录音功能。虽然可能存在浏览器兼容性问题，如部分浏览器只能通过文件选择而非直接调用摄像头，但代码核心原理是通过动态添加隐藏input标签，触发拍照或文件选择，然后在change事件中利用FileReader的readAsDataUrl方法将文件转换为base64数据，最终将数据加载到img标签中显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么都不说，先上代码（原创）

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <meta name="viewport" content="width=device-width">
  <meta name="format-detection" content="telephone=no">
  <meta name="apple-touch-fullscreen" content="YES">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="x5-fullscreen" content="true"/>
  <title>调用手机功能</title>
  <style>
    .btn {
      border-bottom: 2px solid #fff;
      display: block;
      text-align: center;
      padding: 2px 10%;
      margin: 2px 0;
    }

    .btn:first-child {
      border-top: 2px solid #fff;
      margin-top: 20px;;
    }
  </style>
</head>
<body>
<a class="btn picture">调用拍照</a>
<a class="btn camera">调用视频</a>
<a class="btn v