html5扫一扫并取结果实例
时间: 2023-08-03 18:01:31 浏览: 59
HTML5提供了强大的扫一扫功能,并且可以通过JavaScript获取扫描结果。以下是一个简单的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>扫一扫并取结果示例</title>
<style>
/* 用于显示扫描结果的div样式 */
#result {
width: 300px;
height: 200px;
border: 1px solid #ccc;
padding: 10px;
margin: 20px auto;
}
</style>
</head>
<body>
<!-- 显示扫描结果的div -->
<div id="result"></div>
<!-- 引入调用摄像头扫描的JavaScript库 -->
<script src="https://cdn.jsdelivr.net/npm/@zxing/library@latest"></script>
<script>
// 获取扫描结果的函数
function scanQRCode() {
// 创建一个ZXing编码库的对象
const zxing = new ZXing.BrowserBarcodeReader();
// 调用摄像头扫描
zxing.decodeFromInputVideoDevice(undefined, 'video')
.then(result => {
// 扫描成功,将结果显示到result元素中
document.getElementById('result').innerHTML = result.text;
})
.catch(error => {
// 扫描失败,显示错误信息
document.getElementById('result').innerHTML = '扫描失败:' + error;
});
}
// 在页面加载后调用扫描函数
window.onload = scanQRCode;
</script>
</body>
</html>
```
在这个示例中,我们首先在页面中创建一个用于显示扫描结果的div元素。然后,通过在页面中引入ZXing JavaScript库,我们可以轻松地调用摄像头进行扫描。
在JavaScript部分,我们定义了一个名为`scanQRCode`的函数,用于执行扫描操作。函数内部创建了一个ZXing编码库的实例,并通过`decodeFromInputVideoDevice`方法调用了摄像头进行扫描。接着,我们使用Promise的`then`方法来处理扫描成功的情况,将结果显示在`result`元素中。如果扫描失败,我们使用`catch`方法捕获错误,并在`result`元素中显示相关错误信息。
最后,当页面加载完成后,我们通过设置`window.onload`事件,将扫描操作触发。这样,一旦页面加载完毕,就会自动调用摄像头进行扫描,并将结果显示在页面中。
这是一个基本的HTML5扫一扫并取结果的示例。根据需求,你还可以对这个示例进行扩展和修改。