Why doesn't this code to work camera on iOS chrome or Safari but the desktop versions are fine

Question

On a button click devices function is called and should show the video in the

 <video autoplay id="getVIN"></video>

however only works on desktop versions of browsers... I get the 'devices' alert but then I don't get the 'doing the stream' alert on mobile... I do get it on desktop and things work great

const constraints = 
    {
        video: {
          width: {
            min: 1280,
            ideal: 1920,
            max: 2560,
          },
          height: {
            min: 720,
            ideal: 1080,
            max: 1440
          },
          facingMode: 'user'
        }
      }


var devices = () => {
    alert('devices');
    navigator.mediaDevices.getUserMedia(constraints).then(stream => {
        alert('doing the stream');
        const stream2 = stream;
        tracks = stream2.getTracks();
        console.log('Got MediaStream:', stream);
        var video:any = document.querySelector('video');
        video.srcObject = stream2;
    })
    .catch(error => {
        alert('inhere');
        console.error('Error accessing media devices.', error);
    });
}

Answer 1

Discovered that the code does work..however since I was accessing it on my local network iPhone->Laptop without SSL this will fail.

This media query will only work off of SSL and localhost w/o SSL.....

So there was the inherent issue.