Web相机和浏览器的二维码扫描方案

Web相机和适用于浏览器的二维码扫描方案

qr-camera

在线体验 | English

功能

1. 支持浏览器扫描二维码
2. 支持拍照
3. 支持录像功能
4. 支持二维码解析和生成

quickstart

npm i qr-camera
1

import {QRCamera} from 'qr-camera';

function main(){
    const camera = new QRCamera();
    document.body.appendChild(camera.video);
    console.log(await camera.scanQrcode());
}
main();
1
2
3
4
5
6
7
8

CDN

<script src="https://unpkg.com/qr-camera">script>
<script>
    function main(){
        const camera = new QRCamera();
        document.body.appendChild(camera.video);
        console.log(await camera.scanQrcode());
    }
    main();
script>
1
2
3
4
5
6
7
8
9

API

1. QRCamera

const camera = new QRCamera(options);
1

options:

interface Options {
    video?: HTMLVideoElement; // 自定义video元素
    size?: { // video 元素宽高
        width: number;
        height: number;
    },
    useAudio?: boolean; // 是否开启音频
    cameraId?: string; // 指定摄像头启动
}
1
2
3
4
5
6
7
8
9

2. getCameras

获取摄像头列表

const cameras = await camera.getCameras();
1

3. switchCamera

切换摄像头

const result = await camera.switchCamera(cameraId); // 指定摄像头
const result = await camera.switchCamera(); // 切换下一个摄像头
1
2

4. scanQrcode

开启识别二维码

const content = await camera.scanQrcode({
    gap: 500 // 识别间隔，单位ms，默认为500ms
});
1
2
3

stopScanQrcode

停止识别二维码

camera.stopScanQrcode();
1

4. photo

拍照

const url = await camera.photo({
    base64: false, // 是否返回base64
    download: false, // 是否自动下载
    name: 'photo', // 下载的文件名
});
1
2
3
4
5

5. record

录像

const url = await camera.record({
    time: undefined, // 录像时长，默认为不限制，直到调用停止录像为止
    download: false, // 是否自动下载
    name: 'video', // 下载的文件名
});
1
2
3
4
5

pause

camera.pauseRecord();
camera.resumeRecord();
camera.recordPaused;
1
2
3

stop

camera.stopRecord();
1

qrcode

二维码能力请参考 tc-qrcode

import {qrcode} from 'qr-camera';
1