• 豌豆资源网
  • 开引网企业服务
  • 服务外包网
  • H5调用手机的相机/摄像/录音等功能 _input:file的capture属性说明

    H5使用input标签调用系统默许相机,摄像,录音功能。使用input:file标签, 去调用系统默认相机,摄像,录音功能,其实是有个capture属性,直接说明需要调用什么功能:

    <input type="file" accept="image/*" capture="camera">
    <input type="file" accept="video/*" capture="camcorder">
    <input type="file" accept="audio/*" capture="microphone">

    capture表示可以捕获到系统默认的设备,比如:camera--照相机;camcorder--摄像机;microphone--录音。如果需要设备的面向用户的摄像头拍摄可以使用capture="user"

     

    51220网站目录 https://www.51220.cn

    input:file标签还支持一个multiple属性,表示可以支持多选,如:

    <input type="file" accept="image/*" multiple>

    加上这个multiple后,capture就没啥用了,因为multiple是专门用来支持多选的。

     

    例子:

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="HandheldFriendly" content="true" />
    <meta name="MobileOptimized" content="320" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>input视频测试</title>
    </head>
    
    <body>
    <!--拍照 <input id="myfile" type="file" name="file" accept="image/*" capture="camera"> -->
    //拍视频
    <input type="file" name="video" id="video-input" accept="video/*" capture="user"  onchange="videoChange()" />
    <span id='info'></span>
    </p>
    <video id="video" width='300' height="300" controls autoplay></video>
    
    <script type="text/javascript">
    function videoChange() {
    var file = document.getElementById('video-input').files[0];
    var fileSize = (Math.round(file.size / 1024)).toFixed();
    document.getElementById('info').innerHTML += "所录视频大小约为:" + (fileSize / 1024).toFixed(2) + "Mb";
    
    var url = URL.createObjectURL(file);
    console.log(url);
    document.getElementById("video").src = url;
    }
    </script>
    </body>
    
    </html>

     

    posted @ 2020-06-12 22:17  前端一点红  阅读(3346)  评论(0编辑  收藏  举报
  • 乐游资源网
  • 热爱资源网
  • 灵活用工代发薪平台
  • 企服知识
  • 355软件知识