H5移动端调用手机摄像头

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(/iPhone\sOS/i) == "iphone os") {
                return true;
            } else {
                return false;
            }
        }
H5移动端网页中,利用ZXing库(Zebra Crossing Library,也称为ZXing Java Barcode Scanner)扫描二维码通常需要以下几个步骤: 1. 引入库:首先要在HTML中引入ZXing.js文件,它是一个JavaScript版本的ZXing库,可以从GitHub上下载或者通过CDN链接获取。 ```html <script src="https://cdnjs.cloudflare.com/ajax/libs/zxing/3.4.0/lite/zxing.min.js"></script> ``` 2. 创建扫描元素:创建一个canvas元素作为相机预览区域,并设置其宽度和高度适应屏幕。 ```html <canvas id="scannerCanvas" width="640" height="480"></canvas> ``` 3. 初始化:使用ZXing.js初始化一个`ScanManager`实例,并指定canvas元素用于显示扫描结果。 ```javascript var scanner = new ZXingScannerView({ renderView: document.getElementById('scannerCanvas'), autoFocus: true, disableTorch: false, // 可选,是否禁用闪光灯 }); ``` 4. 扫描事件处理:当用户开始扫描时,会触发`onScanSuccess`事件,你可以在这个事件的回调中处理扫描到的二维码数据。 ```javascript scanner.addEventListener('scan', function(result) { console.log('Scanned QR code:', result.text); // 根据需要处理扫码结果 }); ``` 5. 错误处理:如果扫描失败,可能会触发`onScanError`事件,需要对错误进行处理。 ```javascript scanner.addEventListener('scanError', function(error) { console.error('Scanning error:', error); }); ``` 6. 开启扫描:最后,调用`startCamera()`方法启动扫描。 ```javascript scanner.startCamera(); ```
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值