javascript实现QR code二维码扫描

最新推荐文章于 2025-03-31 09:30:59 发布

qingkaqingka

最新推荐文章于 2025-03-31 09:30:59 发布

阅读量2.7k

点赞数

分类专栏：前端

前端专栏收录该内容

26 篇文章

订阅专栏

本例基于instascan ： https://github.com/schmich/instascan

1. html

<video id="preview" width="500" height="500"></video>
<input type="text" class="form-control" id="txtScannedQR" style="display: none" placeholder="Scan Result" name="AssetTag"/>

2. javascript

<script src="~/Scripts/instascan.min.js"></script>
 
 
    <script type="text/javascript">
        function checkQR() {
            return $("#txtScannedQR").val() != "";
        }
 
 
        var scanner = new Instascan.Scanner(
            {
                video: document.getElementById('preview') 
            });
        scanner.addListener('scan', function (content) {
            $("#txtScannedQR").val(content);
            alert(content);
            
        });
        Instascan.Camera.getCameras().then(function (cameras) {
            
            // on mobile pick the rear camera
            if (cameras.length > 1) {
                scanner.start(cameras[1]);
            }
            else if (cameras.length > 0) {
                scanner.start(cameras[0]);
            } else {
                console.error('No cameras found.');
            }
        }).catch(function (e) {
            console.error(e);
        });
    </script>
}

3. 如果运行遇到错误：
getusermedia() no longer works on insecure origins. to use this feature, you should consider switching your application to a secure origin, such as https

是因为这个功能需要https，要在web服务器安装ssl证书并打开443端口就可以了。
---------------------
作者：_iorilan
来源：CSDN
原文：https://blog.csdn.net/lan_liang/article/details/78276153
版权声明：本文为博主原创文章，转载请附上博文链接！