Video stuff
This commit is contained in:
@@ -37,7 +37,7 @@ app.use(
|
|||||||
//vibrate: ["'none'"],
|
//vibrate: ["'none'"],
|
||||||
payment: ["'none'"],
|
payment: ["'none'"],
|
||||||
microphone: ["'none'"],
|
microphone: ["'none'"],
|
||||||
camera: ["'none'"],
|
camera: ["'self'"],
|
||||||
speaker: ["*"],
|
speaker: ["*"],
|
||||||
syncXhr: ["'self'"]
|
syncXhr: ["'self'"]
|
||||||
//notifications: ["'self'"]
|
//notifications: ["'self'"]
|
||||||
@@ -102,4 +102,4 @@ app.use("/service-worker.js", function(req, res) {
|
|||||||
res.sendFile(path.join(__dirname, "public/sw/serviceWorker.js"));
|
res.sendFile(path.join(__dirname, "public/sw/serviceWorker.js"));
|
||||||
});
|
});
|
||||||
|
|
||||||
server.listen(30030);
|
server.listen(3000);
|
||||||
|
|||||||
@@ -6,63 +6,70 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { BrowserBarcodeReader } from '@zxing/library';
|
import { BrowserBarcodeReader } from "@zxing/library";
|
||||||
import { barcodeToVinmonopolet } from "@/api";
|
import { barcodeToVinmonopolet } from "@/api";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "Scan to vinnopolet",
|
name: "Scan to vinnopolet",
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
video: undefined,
|
video: undefined,
|
||||||
errorMessage: undefined
|
errorMessage: undefined
|
||||||
}
|
};
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
if (navigator.mediaDevices == undefined) {
|
if (navigator.mediaDevices == undefined) {
|
||||||
this.errorMessage = "Feil: Ingen kamera funnet."
|
this.errorMessage = "Feil: Ingen kamera funnet.";
|
||||||
return
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
this.video = document.querySelector('video');
|
this.video = document.querySelector("video");
|
||||||
this.scrollIntoView();
|
this.scrollIntoView();
|
||||||
|
|
||||||
const constraints = {
|
const constraints = {
|
||||||
audio: false,
|
audio: false,
|
||||||
video: {
|
video: {
|
||||||
facingMode: { exact: "environment" }
|
facingMode: "environment"
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
navigator.mediaDevices.getUserMedia(constraints)
|
navigator.mediaDevices
|
||||||
|
.getUserMedia(constraints)
|
||||||
.then(this.handleSuccess)
|
.then(this.handleSuccess)
|
||||||
.catch(this.handleError)
|
.catch(this.handleError);
|
||||||
}, 10)
|
}, 10);
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
handleSuccess(stream) {
|
handleSuccess(stream) {
|
||||||
this.video.classList.remove("hidden");
|
this.video.classList.remove("hidden");
|
||||||
this.video.srcObject = stream;
|
this.video.srcObject = stream;
|
||||||
this.searchVideoForBarcode(this.video)
|
this.searchVideoForBarcode(this.video);
|
||||||
},
|
},
|
||||||
handleError(error) {
|
handleError(error) {
|
||||||
console.log('navigator.MediaDevices.getUserMedia error: ', error.message, error.name);
|
console.log(
|
||||||
this.errorMessage = "Feil ved oppstart av kamera! Feilmelding: " + error.message
|
"navigator.MediaDevices.getUserMedia error: ",
|
||||||
|
error.message,
|
||||||
|
error.name
|
||||||
|
);
|
||||||
|
this.errorMessage =
|
||||||
|
"Feil ved oppstart av kamera! Feilmelding: " + error.message;
|
||||||
},
|
},
|
||||||
searchVideoForBarcode(video) {
|
searchVideoForBarcode(video) {
|
||||||
const codeReader = new BrowserBarcodeReader()
|
const codeReader = new BrowserBarcodeReader();
|
||||||
|
|
||||||
codeReader.decodeOnceFromVideoDevice(undefined, video)
|
codeReader
|
||||||
|
.decodeOnceFromVideoDevice(undefined, video)
|
||||||
.then(result => {
|
.then(result => {
|
||||||
barcodeToVinmonopolet(result.text)
|
barcodeToVinmonopolet(result.text)
|
||||||
.then(this.emitWineFromVinmonopolet)
|
.then(this.emitWineFromVinmonopolet)
|
||||||
.catch(this.catchVinmonopoletError)
|
.catch(this.catchVinmonopoletError)
|
||||||
.then(this.searchVideoForBarcode(video))
|
.then(this.searchVideoForBarcode(video));
|
||||||
})
|
})
|
||||||
.catch(err => console.error(err));
|
.catch(err => console.error(err));
|
||||||
},
|
},
|
||||||
emitWineFromVinmonopolet(response) {
|
emitWineFromVinmonopolet(response) {
|
||||||
this.errorMessage = ""
|
this.errorMessage = "";
|
||||||
|
|
||||||
this.$emit("wine", {
|
this.$emit("wine", {
|
||||||
name: response.name,
|
name: response.name,
|
||||||
@@ -77,12 +84,13 @@ export default {
|
|||||||
this.errorMessage = "Feil! " + error.message || error;
|
this.errorMessage = "Feil! " + error.message || error;
|
||||||
},
|
},
|
||||||
scrollIntoView() {
|
scrollIntoView() {
|
||||||
window.scrollTo(0,
|
window.scrollTo(
|
||||||
|
0,
|
||||||
document.getElementById("addwine-title").offsetTop - 10
|
document.getElementById("addwine-title").offsetTop - 10
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|||||||
Reference in New Issue
Block a user