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

最新推荐文章于 2024-04-12 15:26:45 发布

云天1995

最新推荐文章于 2024-04-12 15:26:45 发布

阅读量6.8k

点赞数

分类专栏：个人笔记文章标签： JavaScript H5拍照 filereader

本文链接：https://blog.csdn.net/yuntian1995/article/details/77542815

版权

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

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

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

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