手机端网页调用摄像头拍照扫码功能

手机调用摄像头拍照或录像

<input type="file" accept="image/*" capture="camera">

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

## 在webapp上使用input:file, 指定capture属性调用默认相机，摄像，录音功能

在iOS6下开发webapp，使用inputz之file，很有用

capture表示，可以捕获到系统默认的设备，比如：camera--照相机；camcorder--摄像机；microphone--录音。

accept表示，直接打开系统文件目录。

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

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

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

手机浏览器的话大部分都是支持的 （不支持的浏览器暂时无法就行兼容处理，只能想其他办法）

微信中ios内置的浏览器是完全支持的

android中必须加上accept最好也加上capture

如果是做跨平台应用，在webView中是不能用的，应该调用插件运用原生去实现。

html5-qrcode 扫码

官网

html5-qrcode文档

html5-qrcode项目

简单示例，拷贝到html中即可使用。经本人体验，觉得有缺陷，1识别慢  2识别不是很准确，特别是值比较长的码

<div id="reader" width="600px"></div>
    <script src="https://unpkg.com/html5-qrcode" type="text/javascript">
    </script>
    <script type="text/javascript">

        function onScanSuccess(decodedText, decodedResult) {
            // handle the scanned code as you like, for example:
            console.log(`Code matched = ${decodedText}`, decodedResult);
            alert("decodedText:"+decodedText)
            alert("decodedResult:"+decodedResult)
        }

        function onScanFailure(error) {
            // handle scan failure, usually better to ignore and keep scanning.
            // for example:
            console.warn(`Code scan error = ${error}`);
        }

        let html5QrcodeScanner = new Html5QrcodeScanner(
            "reader",
            { fps: 10, qrbox: {width: 250, height: 250} },
            /* verbose= */ false);
        html5QrcodeScanner.render(onScanSuccess, onScanFailure);
</script>

如果你有很好的成熟方案，请留言，谢谢