Cannot read property 'enumerateDevices' of undefined

[AKclown]

index.js:1 TypeError: Cannot read property 'enumerateDevices' of undefined at Function.getCameras (camera.js:44) at Ordelivery.componentDidMount (ordelivery.page.tsx:124) "scanscanscanscan111"

[mjgr0013]

Are you serving under https or http?

[Ren14]

Usa Ngrok para simular un servidor con https.

[AmbrocioIsaias2808]

@Ren14 i tried your tip, i´m running with ngrok and the error still persists. I solved it activating all permises for the camera before entering to the site. But... still i have 2 problems:

1. I can´t see the video output
2. I have another error on console:

Also, when using https with ngrok it doesn´t ask for permissions to use the camera.

My code is:

<?php

$this->registerJsFile('@web/js/instascan.min.js',['position' => \yii\web\View::POS_HEAD]);
?>

<div class="container">
    <div class="row">
        <div class="col-md-6" style="border:1px solid black">
            <video id="preview" width="100%"></video>
        </div>
        <div class="col-md-6">
            <label>SCAN QR CODE</label>
            <input type="text" name="text" id="text" placeholder="scan qrcode" class="form-control">
        </div>
    </div>
</div>


<?php
    $this->registerJs("
    
        let scanner = new Instascan.Scanner({ video: document.getElementById('preview')});
    Instascan.Camera.getCameras().then(function(cameras){
        if(cameras.length > 0 ){
            scanner.start(cameras[0]);
        } else{
            alert('No cameras found');
        }

    }).catch(function(e) {
        console.error(e);
    });

    scanner.addListener('scan',function(c){
        document.getElementById('text').value=c;
    });

    ");
?>

As you can see i´m using yii2 framework. I had tested the same example in local in a simple html file and it works, but when attempting to take this and tweak it a little bit to use in a project, well it crashes. Any ideas.