android 摄像头黑屏,5+app 安卓调用摄像头黑屏 苹果可以

这篇博客详细介绍了如何在Vue H5环境中实现扫码功能,包括创建扫描控件、开启和关闭扫描、切换闪光灯等操作。代码示例展示了在Android和iOS设备上的实现方式,主要使用了PlusRuntime的Barcode API。
摘要由CSDN通过智能技术生成

第一张是安卓 第二张是苹果的

代码如下

...载入中...

轻触照亮关闭扫码

/**

* h5+ 扫码功能实现

*/

let scan = null

export default {

name: 'Scan',

data() {

return {

fromRouter: '', // 进入扫码页面的上一个路由

barcodeBoo: false,

key: '',

flash: false,

barStyle: {

top: '0',

left: '0',

width: '100%',

height: '80%',

scanbarColor: '#1DA7FF',

position: 'fixed',

frameColor: '#1DA7FF'

}

}

},

mounted() {},

beforeDestroy() {

this.closeScan()

},

methods: {

setFlash() {

this.flash = !this.flash

if (scan) {

scan.setFlash(this.flash)

}

},

createRecognize(key) {

const temp = this

temp.key = key

temp.barcodeBoo = true

setTimeout(() => {

temp.startRecognize()

}, 1000)

},

// 创建扫描控件

// "vue-h5-plus": "^1.2.0",

/* eslint-enable */

startRecognize() {

const temp = this

if (!window.plus) return

// eslint-disable-next-line

plus.navigator.setFullscreen(true); //全屏

// temp.createView()

// eslint-disable-next-line

scan = new plus.barcode.Barcode('bcidBar',[plus.barcode.QR],temp.barStyle)

scan.onmarked = onmarked

// eslint-disable-next-line

plus.webview.currentWebview().append(scan)

scan.setFlash(temp.flash)

temp.startScan()

function onmarked(type, result, file) {

switch (type) {

// eslint-disable-next-line

case plus.barcode.QR:

type = 'QR'

break

// eslint-disable-next-line

case plus.barcode.EAN13:

type = 'EAN13'

break

// eslint-disable-next-line

case plus.barcode.EAN8:

type = 'EAN8'

break

default:

type = '其它' + type

break

}

result = result.replace(/\n/g, '')

}

},

// 开始扫描

startScan() {

if (!window.plus) return

scan.start()

},

// 关闭扫描

cancelScan() {

if (!window.plus) return

this.barcodeBoo = false

scan.cancel()

},

// 关闭条码识别控件

closeScan() {

if (!window.plus) return

// eslint-disable-next-line

plus.navigator.setFullscreen(false); //全屏

this.barcodeBoo = false

if(scan){

scan.close()

}

this.$emit('close', 'close', true)

},

}

}

.scan {

height: 100%;

#bcid {

width: 100%;

position: absolute;

left: 0;

right: 0;

top: 0;

bottom: 0;

text-align: center;

color: #fff;

background: #ccc;

z-index: 9999;

pointer-events: none;

}

}

.flashButton {

z-index: 9999;

position: fixed;

top: 90%;

left: 20%;

}

.closeButton {

z-index: 9999;

position: fixed;

top: 90%;

right: 20%;

}

3776cd8b3503785d62340854977389c8.png

1daeb88053032985944545b1b9acda7d.png

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值