-
Notifications
You must be signed in to change notification settings - Fork 21
/
CameraPage.vue
119 lines (112 loc) · 3.14 KB
/
CameraPage.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<template >
<div class="ion-page">
<ion-header>
<ion-toolbar class="toolbar-md-primary">
<ion-title>Capacitor - VueJS</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<img :src="imageUrl ? imageUrl : null" />
<ion-button @click="takePicture()">Take Picture Now</ion-button>
<ion-button @click="nextPage()">Next Page</ion-button>
<ion-button @click="scan()">SCAN</ion-button>
</ion-content>
</div>
</template>
<script>
import {
Plugins,
CameraSource,
CameraResultType,
} from "@capacitor/core";
const { Camera } = Plugins;
export default {
name: "CameraPage",
data() {
return {
msg: "Welcome to Your Vue Capacitor App",
imageUrl: null
};
},
methods: {
scan() {
window.cordova.plugins.barcodeScanner.scan(
function(result) {
alert(
"We got a barcode\n" +
"Result: " +
result.text +
"\n" +
"Format: " +
result.format +
"\n" +
"Cancelled: " +
result.cancelled
);
},
function(error) {
alert("Scanning failed: " + error);
},
{
preferFrontCamera: true, // iOS and Android
showFlipCameraButton: true, // iOS and Android
showTorchButton: true, // iOS and Android
torchOn: true, // Android, launch with the torch switched on (if available)
saveHistory: true, // Android, save scan history (default false)
prompt: "Place a barcode inside the scan area", // Android
resultDisplayDuration: 500, // Android, display scanned text for X ms. 0 suppresses it entirely, default 1500
formats: "QR_CODE,PDF_417", // default: all but PDF_417 and RSS_EXPANDED
orientation: "landscape", // Android only (portrait|landscape), default unset so it rotates with the device
disableAnimations: true, // iOS
disableSuccessBeep: false // iOS and Android
}
);
},
nextPage() {
this.$router.push("/geo-location-page");
},
async takePicture() {
let isAvailable = true;
if (!isAvailable) {
// Have the user upload a file instead
alert("No Camera Aailable");
} else {
// Otherwise, make the call:
try {
const image = await Camera.getPhoto({
quality: 90,
allowEditing: true,
resultType: CameraResultType.DataUrl,
source: CameraSource.Prompt
});
console.log("image", image);
// image.base64_data will contain the base64 encoded result as a JPEG, with the data-uri prefix added
this.imageUrl = image.dataUrl;
// can be set to the src of an image now
console.log(image);
} catch (e) {
console.log("error", e);
}
}
}
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>