You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
64 lines
1.1 KiB
64 lines
1.1 KiB
<template>
|
|
<div>
|
|
<p v-if="torchNotSupported" class="error">
|
|
Torch not supported for active camera
|
|
</p>
|
|
|
|
<qrcode-stream :torch="torchActive" @init="onInit">
|
|
<button @click="torchActive = !torchActive" :disabled="torchNotSupported">
|
|
<img :src="$withBase(icon)" alt="toggle torch">
|
|
</button>
|
|
</qrcode-stream>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { QrcodeStream } from '../../../../src'
|
|
|
|
export default {
|
|
|
|
components: { QrcodeStream },
|
|
|
|
data () {
|
|
return {
|
|
torchActive: false,
|
|
torchNotSupported: false
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
icon() {
|
|
if (this.torchActive)
|
|
return '/flash-off.svg'
|
|
else
|
|
return '/flash-on.svg'
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
async onInit (promise) {
|
|
try {
|
|
const { capabilities } = await promise
|
|
|
|
console.log(capabilities);
|
|
|
|
this.torchNotSupported = !capabilities.torch
|
|
} catch (error) {
|
|
console.error(error)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
button {
|
|
position: absolute;
|
|
left: 10px;
|
|
top: 10px;
|
|
}
|
|
.error {
|
|
color: red;
|
|
font-weight: bold;
|
|
}
|
|
</style>
|
|
|