Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

ycsm's avatar
Level 1

Laravel & QR Code reader - No camera capture when on live server?

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>
0 likes
1 reply
ycsm's avatar
Level 1

I needed to enable SSL. Sorted!

Please or to participate in this conversation.