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 */
});
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>