JS调用手机摄像头的API

用户1750537

发布于 2025-08-29 19:16:56

9000

代码可运行

运行总次数：0

代码可运行

使用 HTML、CSS 和 JavaScript 结合调用手机摄像头的API（如getUserMedia）以及条形码识别的 JavaScript 库（例如 QuaggaJS）来完成。

以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Barcode Scanner</title>
<style>
    #barcodeScanner {
        width: 100%;
        height: auto;
    }
</style>
</head>
<body>
<div id="barcodeScanner"></div>
<div id="barcodeResult"></div>

<script>
// 获取摄像头视频流
navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" } })
    .then(function (stream) {
        var video = document.createElement('video');
        video.srcObject = stream;
        video.setAttribute('autoplay', '');
        video.setAttribute('playsinline', '');
        video.style.width = '100%';
        document.getElementById('barcodeScanner').appendChild(video);

        // 使用QuaggaJS进行条形码扫描
        Quagga.init({
            inputStream: {
                name: "Live",
                type: "LiveStream",
                target: video
            },
            decoder: {
                readers: ["ean_reader"]
            }
        }, function(err) {
            if (err) {
                console.log(err);
                return;
            }
            Quagga.start();
        });

        // 监听识别结果
        Quagga.onDetected(function(result) {
            var code = result.codeResult.code;
            document.getElementById('barcodeResult').innerText = 'Detected barcode: ' + code;
        });
    })
    .catch(function (err) {
        console.error('Error accessing the camera: ', err);
    });
</script>
<script src="https://cdn.jsdelivr.net/npm/quagga"></script>
</body>
</html>

有网络连接，以加载 QuaggaJS 库。您也可以将库下载到本地并引用它。另外，由于涉及到调用摄像头，这段代码通常需要在 HTTPS 页面上才能正常工作。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2025-08-28，如有侵权请联系 cloudcommunity@tencent.com 删除

摄像头