Web相机和适用于浏览器的二维码扫描方案
qr-camera
在线体验 | English
功能
- 支持浏览器扫描二维码
- 支持拍照
- 支持录像功能
- 支持二维码解析和生成
quickstart
npm i qr-camera
import {QRCamera} from 'qr-camera';
function main(){
const camera = new QRCamera();
document.body.appendChild(camera.video);
console.log(await camera.scanQrcode());
}
main();
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>
API
1. QRCamera
const camera = new QRCamera(options);
options:
interface Options {
video?: HTMLVideoElement; // 自定义video元素
size?: { // video 元素宽高
width: number;
height: number;
},
useAudio?: boolean; // 是否开启音频
cameraId?: string; // 指定摄像头启动
}
2. getCameras
获取摄像头列表
const cameras = await camera.getCameras();
3. switchCamera
切换摄像头
const result = await camera.switchCamera(cameraId); // 指定摄像头
const result = await camera.switchCamera(); // 切换下一个摄像头
4. scanQrcode
开启识别二维码
const content = await camera.scanQrcode({
gap: 500 // 识别间隔，单位ms，默认为500ms
});
stopScanQrcode
停止识别二维码
camera.stopScanQrcode();
4. photo
拍照
const url = await camera.photo({
base64: false, // 是否返回base64
download: false, // 是否自动下载
name: 'photo', // 下载的文件名
});
5. record
录像文章来源：https://www.toymoban.com/news/detail-757048.html
const url = await camera.record({
time: undefined, // 录像时长，默认为不限制，直到调用停止录像为止
download: false, // 是否自动下载
name: 'video', // 下载的文件名
});
pause
camera.pauseRecord();
camera.resumeRecord();
camera.recordPaused;
stop
camera.stopRecord();
qrcode
二维码能力请参考 tc-qrcode文章来源地址https://www.toymoban.com/news/detail-757048.html
import {qrcode} from 'qr-camera';
到了这里，关于Web相机和浏览器的二维码扫描方案的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
