Level 1
I needed to enable SSL. Sorted!
Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
I am running Laravel on a local machine and the following plugin (https://github.com/gruhn/vue-qrcode-reader) is working great! It detects the camera immediately. However, when I deploy to my Forge server there is no camera detection at all. No errors logged - is there something I'm missing here? Any steps I should have taken?
Here is the component:
<template>
<div>
<p v-if="messageShow" class="message">{{ messageShow }}</p>
<div class="qr-fullscreen">
<p class="decode-result" style="color:#ccc">Scanned: <strong style="color:#fff">{{ name }}</strong>
<br>
<input v-model="currentUser" name="adduser" id="adduser" @input="addParticipation(currentUser)" class="form-control user_input" type="text" list="manual" placeholder="Manually add an attendee">
<datalist id="manual">
<option v-for="user in users" v-bind:key="user.upn" v-bind:value="user.upn">{{user.firstname}} {{user.lastname}} (Year {{user.year}})</option>
</datalist>
</p>
<qrcode-stream @decode="onDecode" @init="onInit" />
<a v-bind:href="'/admin/sessions/'+this.session.id" class="qr-fullscreen-close">
<i class="fa fa-times"></i>
</a>
</div>
</div>
</template>
<script>
import { QrcodeStream } from 'vue-qrcode-reader';
export default {
mounted() {
$('.loading').hide();
},
components: { QrcodeStream },
data () {
return {
result: '',
error: '',
name: 'No one scanned',
user: [],
currentUser: '',
messageShow: ''
}
},
methods: {
onDecode (result) {
this.result = result;
this.addParticipation(this.result);
},
addParticipation(upn){
var last_character = upn[upn.length-1];
if(isNaN(last_character)){}else{
let currentObj = this; // important?
axios.post('/api/session_capture', {
session_id: this.session.id,
upn: upn,
api_token: localStorage.getItem('api_token')
})
.then((response) => {
if (response.data.message) {
this.toggleMessage(response.data.message);
} else {
this.playSound();
this.toggleMessage(response.data.name + ' added successfully');
this.name = response.data.name;
this.currentUser='';
$('#manual option[value='+upn+']').remove();
}
})
.catch((error) => {
currentObj.output = error;
console.log(currentObj.output);
});
}
},
toggleMessage($msg) {
this.messageShow = $msg;
setTimeout(() => {
this.messageShow = false;
}, 4000);
},
playSound() {
const path = this.root+'/audio/snap.mp3';
const audio = new Audio(path);
var playPromise = audio.play();
if (playPromise !== undefined) {
playPromise.then(_ => {
console.log('Success');
})
.catch(error => {
console.log(`playSound error: ${error}`);
});
}
},
async onInit (promise) {
try {
await promise
} catch (error) {
if (error.name === 'NotAllowedError') {
this.error = "ERROR: you need to grant camera access permisson"
} else if (error.name === 'NotFoundError') {
this.error = "ERROR: no camera on this device"
} else if (error.name === 'NotSupportedError') {
this.error = "ERROR: secure context required (HTTPS, localhost)"
} else if (error.name === 'NotReadableError') {
this.error = "ERROR: is the camera already in use?"
} else if (error.name === 'OverconstrainedError') {
this.error = "ERROR: installed cameras are not suitable"
} else if (error.name === 'StreamApiNotSupportedError') {
this.error = "ERROR: Stream API is not supported in this browser"
}
this.toggleMessage(this.error);
console.log(this.error);
}
}
},
props:[
'session',
'root',
'users'
],
}
</script>
<style>
.message {
position: fixed;
z-index: 2001;
padding: 10%;
left: 0;
text-align: center;
width: 100%;
background-color: rgba(0, 0, 0, 0.4);
top: 50%;
transform: translateY(-50%);
color: #fff;
}
.user_input{
margin-top: 5px !important;
width: 90vw !important;
}
</style>
Please or to participate in this conversation.