html 5 调用手机条码扫描,vue h5页面如何实现扫一扫功能,扫条形码获取编码

本文介绍了在Vue H5页面中利用HTML5的Barcode API尝试实现条形码扫描功能,但遇到了'plus'未定义的错误,导致扫描功能无法正常工作。在代码中展示了创建扫描控件、开始扫描、结束扫描和关闭控件的方法。作者寻求解决在手机真机测试时无法调取摄像头的问题,并希望实现前端扫条形码获取编码的需求。
摘要由CSDN通过智能技术生成

如图这是我在网上找的一个方法,使用h5的Barcode实现扫码的功能,但代码报错 'plus' is not defined ,是什么原因呢?,现在在手机上真机测试点击扫描也没反应,没调取摄像头,有老师知道什么原因吗?需求是前端实现扫一扫,扫条形码获取条形码的编码,大佬们有没有做过这种的?

...载入中...

1.创建控件

2.开始扫描

3.结束扫描

4.关闭控件

export default {

name: 'scan',

data () {

return {

codeUrl: ''

}

},

created () {

},

mounted () {

this.startRecognize()

},

methods: {

// 创建扫描控件

startRecognize () {

let that = this

if (!window.plus) return

that.scan = new plus.barcode.Barcode('codeId')

that.scan.onmarked = onmarked

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在Vue H5页面中使用扫一扫功能,你需要使用HTML5的API,比如MediaDevices.getUserMedia()和Canvas等。 首先,你需要在页面中引入一个二维码扫描库,比如zxing-js。然后,你可以使用Vue的生命周期钩子函数mounted()来初始化二维码扫描器,并在页面中创建一个canvas元素来显示扫描到的二维码图像。 以下是一个简单的示例代码: ```html <template> <div> <canvas ref="canvas"></canvas> </div> </template> <script> import QrScanner from 'zxing'; export default { mounted() { const canvasElement = this.$refs.canvas; const qrScanner = new QrScanner(canvasElement, result => { console.log(result); qrScanner.stop(); }); qrScanner.start(); } } </script> ``` 在这个示例中,我们引入了zxing-js库,并在mounted()钩子函数中初始化了一个QrScanner对象。我们将canvas元素传递给QrScanner构造函数,并在回调函数中处理扫描到的二维码数据。最后,我们调用qrScanner.start()方法来启动扫描器。 请注意,要在移动设备上使用摄像头,你需要在页面中请求用户授权。你可以使用navigator.mediaDevices.getUserMedia()方法来请求摄像头访问权限,例如: ```javascript const stream = await navigator.mediaDevices.getUserMedia({ video: true }); ``` 然后,你可以将流传递给QrScanner对象: ```javascript const qrScanner = new QrScanner(canvasElement, result => { console.log(result); qrScanner.stop(); }); qrScanner.start(stream); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值