【HTML】基于jsQR实现的HTML单页面扫码功能

这篇文章距离上次修改已过449天，其中的内容可能已经有所变动。




<!DOCTYPE html>
<html>
<head>
    <title>扫一扫</title>
    <script src="https://cdn.jsdelivr.net/npm/jsqr@latest/dist/jsQR.js"></script>
    <style>
        #qr-canvas {
            width: 300px;
            height: 200px;
        }
    </style>
</head>
<body>
    <video id="qr-video" width="300" height="200" autoplay></video>
    <canvas id="qr-canvas" width="300" height="200"></canvas>
    <script>
        const video = document.createElement("video");
        const canvasElement = document.getElementById("qr-canvas");
        const canvas = canvasElement.getContext("2d");
        let scanning = false;
 
        video.setAttribute("autoplay", "");
        const mediaStreamTrack = typeof video.srcObject !== "undefined" ? video.srcObject : video.mozSrcObject;
 
        const scan = () => {
            if (mediaStreamTrack === null || mediaStreamTrack === undefined) {
                throw new Error("Media stream error");
            }
 
            canvasElement.width = video.videoWidth;
            canvasElement.height = video.videoHeight;
            canvas.drawImage(video, 0, 0, canvasElement.width, canvasElement.height);
            const imageData = canvas.getImageData(0, 0, canvasElement.width, canvasElement.height);
            const code = jsQR(imageData.data, imageData.width, imageData.height, {
                inversionAttempts: "dontInvert",
            });
 
            if (code) {
                console.log("扫描结果:", code.data);
                scanning = false;
            }
        };
 
        video.srcObject = mediaStreamTrack;
        video.onloadedmetadata = () => {
            video.play();
            scanning = true;
        };
 
        setInterval(() => {
            if (scanning) {
                scan();
            }
        }, 100);
    </script>
</body>
</html>

这段代码使用了HTML5的<video>标签和Canvas API来实现视频流的捕获和二维码的扫描。它首先创建了一个video元素，并通过Canvas API将视频流转换成图像，然后使用jsQR库来解析图像中的二维码。扫描结果会输出到控制台。这个例子简洁明了，并且注重于实现核心功能，非常适合作为初学者学习和实践的示例。

【HTML】基于jsQR实现的HTML单页面扫码功能

评论已关闭

推荐阅读