title: Camera not working on iOS, error in getUserMedia
body: <p>I'm trying to understand and I'm pretty sure a problem is not in what it telling me.</p>
  
  <p>I am building a PWA with Vue.js. When I init a camera, it does not work on iOS (v11+). I tried many variations, but have no idea what's going on behind and how to properly debug a compiled code in Safari Developer tool (breakpoints just won't work).</p>
  
  <p>here is the code:</p>
  
  <pre><code>async init () {
  
      // Media Device settings
      const constraints = {
        audio: false,
        video: {
          facingMode: (this.camera.mode === 'front') ? 'user' : { exact: 'environment' },
          width: this.camera.size.width,
          height: this.camera.size.height
        }
      }
  
      try {
        const stream = await navigator.mediaDevices.getUserMedia(constraints)
        this.tracks = stream.getVideoTracks()
        this.video.srcObject = stream
  
        // Toggle the camera state
        this.toggleCamera(true)
  
        // Check for realtime validation
        if (this.realtime) {
          this.validatePhotoRealtime()
        }
      } catch (e) {
        this.handleErrorMessage(`getUserMedia error: ${e.name}`, e)
      }
    }
  </code></pre>
  
  <p>And here is what I get in console window:</p>
  
  <p><code>Trying to call getUserMedia from an insecure document.</code></p>
  
  <p><a href="https://i.stack.imgur.com/tBIbj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tBIbj.png" alt="enter image description here"></a></p>
  
  <p>Any idea how to debug this error ?</p>
  
  <p><strong>==== UPDATE ====</strong></p>
  
  <p>While developing on localhost and having no https available for development environment, doing <code>yarn server</code> and connecting to served IP over network</p>
  
  <p><a href="https://i.stack.imgur.com/Yl1FR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Yl1FR.png" alt="enter image description here"></a></p>
  
  <p>I've enabled an option for WebRTC:
  <a href="https://i.stack.imgur.com/ORqTP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ORqTP.png" alt="enter image description here"></a></p>
  
  <p>But it does not help.</p>