Instascan：基于Webcam的实时HTML5二维码扫描器

芮舒淑

于 2024-08-08 07:17:31 发布

阅读量767

点赞数 12

本文链接：https://blog.csdn.net/gitblog_00599/article/details/141007976

版权

Instascan：基于Webcam的实时HTML5二维码扫描器

instascanHTML5 QR code scanner using your webcam项目地址:https://gitcode.com/gh_mirrors/in/instascan

项目介绍

Instascan 是一个强大的开源库，它使得利用用户的网络摄像头进行实时的QR码识别变得简单快捷。本项目专为Web应用设计，无需依赖于额外的插件或非标准技术，仅需现代浏览器对WebRTC/getUserMedia API的支持。它兼容Chrome、Firefox、Opera和Edge等非iOS平台上的浏览器，遗憾的是不支持IE和Safari，以及iOS设备上的原生浏览器。

项目快速启动

要迅速地在你的项目中集成Instascan，首先确保你的网页是通过HTTPS协议提供的，因为Chrome等浏览器要求使用WebRTC时必须满足这一安全条件。接下来，按照以下步骤操作：

安装

你可以通过NPM安装Instascan：

npm install --save instascan

或者，如果你偏好直接引入.min.js文件到HTML中，可以从发布页面下载并使用：

<script type="text/javascript" src="path-to-instascan.min.js"></script>

示例代码

下面是一个基本的使用示例，展示了如何初始化scanner并开始扫描二维码：

<!DOCTYPE html>
<html>
<head>
    <title>Instascan 示例</title>
    <script type="text/javascript" src="instascan.min.js"></script>
</head>
<body>
    <video id="preview"></video>
    <script>
        let scanner = new Instascan.Scanner({
            video: document.getElementById('preview')
        });
        
        scanner.addListener('scan', function(content) {
            console.log(content);
        });

        Instascan.Camera.getCameras().then(function(cameras) {
            if (cameras.length > 0) {
                scanner.start(cameras[0]);
            } else {
                console.error('未找到相机');
            }
        }).catch(function(e) {
            console.error(e);
        });
    </script>
</body>
</html>