zoukankan      html  css  js  c++  java
  • html5实现移动端调用手机摄像头

    使用html5自带的 input ,纯html5,并且不涉及到js ,可以实现移动端调用手机摄像头。

    capture表示,可以捕获到系统默认的设备,比如:camera照相机;camcorder摄像机;microphone录音。accept表示,直接打开系统文件目录。

     <label>照相机</label>
        <input type="file" id='image' accept="image/*" capture='camera'>
        <br>
        <label>摄像机</label>
        <input type="file" id='video' accept="video/*" capture='camcorder'>


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

    <input type="file" id="file" multiple>


    在各个机型都可以点击 file 调用相册 和 摄像头拍照
    1. 在老版本的安卓中,必须加上capture,否则只能调用相册
    2. 在IOS中 加了capture,就只能调用摄像头不能调用相册

    解决办法:
    判断ios,如果是ios就去掉capture属性.

     var file = document.querySelector('input');
            if (getIos()) {
                file.removeAttribute("capture");
            }
            function getIos() {
                var ua=navigator.userAgent.toLowerCase();
                if (ua.match(/iPhonesOS/i) == "iphone os") {
                    return true;
                } else {
                    return false;
                }
            }
  • 相关阅读:
    LeetCode Single Number
    Leetcode Populating Next Right Pointers in Each Node
    LeetCode Permutations
    Leetcode Sum Root to Leaf Numbers
    LeetCode Candy
    LeetCode Sort List
    LeetCode Remove Duplicates from Sorted List II
    LeetCode Remove Duplicates from Sorted List
    spring MVC HandlerInterceptorAdapter
    yum
  • 原文地址:https://www.cnblogs.com/guanhuohuo/p/12526229.html
Copyright © 2011-2022 走看看