MediaDevices.getUserMedia() prompts the user for permission then launches camera app on full screen instead of in-browser

Question

I am using getUserMedia() to take images on a vue web app. Working everywhere except on iOS safari. The user is asked permission for accessing the camera, after user accepts the camera is launched on a full screen instead of in-browser. I have to manually close it and then I can see the camera feed in my web app.

Can this be avoided? I want to show the camera feed in the browser where I have some functionality instead of launching the camera on full screen after user confirms permission. I'm guessing this is a iOS-safari issue and not js or chrome..

Basic syntax:

navigator.mediaDevices.getUserMedia(constraints)
.then(function(stream) {
  /* use the stream */
})
.catch(function(err) {
  /* handle the error */
});

Answer 1

In my case, adding playsinline attribute into element solved the problem.

Working code:

<video
    ref="video"
    autoplay
    playsinline
/>

<script>
    const stream = await navigator.mediaDevices.getUserMedia({
      video: true,
      audio: false,
    })

    this.$refs.video.srcObject = stream
</script>