Video stuff

This commit is contained in:
Kasper Rynning-Tønnesen
2020-03-26 16:02:00 +01:00
parent 06000a99f1
commit 56352a85fb
2 changed files with 33 additions and 25 deletions

View File

@@ -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);

View File

@@ -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>