Sveltekit: Webapp can access camera but mobile version can not

Question

I'm working on a web app which will allow an user to read barcodes. I'm using Svelte and Sveltekit to do so. I have some code which runs well on my laptop. It asks for permission to access my camera and after I allow it I can see the camera and I'm able to scan codes. To "activate" the camera I'm using a button at the moment. When the start button is clicked then the camera is visible, I can then click on the stop button and the camera will disappear.

As I just mentioned, this works well in my web browser (laptop) but when accessing the same app on my iPhone (haven't tried a different device yet) it does not behave the same. I see the Start button, but once I click it nothing seems to happen. I don't see any popup asking for permission to access the camera and although I can see the Stop button, clicking it has no effect whatsoever.

Here's my code:

<script>
    import {Html5Qrcode} from "html5-qrcode";
    import {onMount} from "svelte";

    let scanning = false

    let html5Qrcode

    onMount(init)

    function init() {
        html5Qrcode = new Html5Qrcode('reader')
    }

    async function start() {
        html5Qrcode.start(
            { facingMode: 'environment' },
            {
                fps: 10,
                qrbox: { width: 250, height: 250 },
            },
            onScanSuccess,
            onScanFailure
        )
        scanning = true
    }

    async function stop() {
        await html5Qrcode.stop()
        scanning = false
    }

    let result = "";
    function onScanSuccess(decodedText, decodedResult) {
        // alert(`Code matched = ${decodedText}`)
        console.log(decodedResult)
        result = decodedResult.decodedText;
        stop();
    }

    function onScanFailure(error) {
        // console.warn(`Code scan error = ${error}`)
        return;
    }
    
</script>

<div class="container mx-auto">
    <div style="width: 300px" id="reader"></div>
    {#if scanning}
        <button class="btn btn-success" on:click={stop}>stop</button>
    {:else}
        <button class="btn btn-warning" on:click={start}>start</button>
    {/if}
    <div id="result" class="text-3xl text-red-500">{ result }</div>
</div>

Any idea what's going on?

Thanks.

Update

When accessing the logs in dev tools from the attempt to Start the camera on my iPhone, I see the following error in the console:

Unhandled Promise Rejection: Camera streaming not supported by the browsers

Don't understand why I'm getting this error. If I go to this codepen codepen.io/takatama/pen/dyZeWQJ in my iPhone (which uses the same library I'm using), it asks me for permission to use the camera and after being granted I can see it.

I believe the issue comes to the fact that I'm trying to access an http site from my phone so it does not allow it to have camera access.