zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    POJ 3258 (NOIP2015 D2T1跳石头)
    POJ 3122 二分
    POJ 3104 二分
    POJ 1995 快速幂
    409. Longest Palindrome
    389. Find the Difference
    381. Insert Delete GetRandom O(1)
    380. Insert Delete GetRandom O(1)
    355. Design Twitter
    347. Top K Frequent Elements (sort map)
  • 原文地址:https://www.cnblogs.com/ypppt/p/13110806.html
Copyright © 2011-2022 走看看