Why video stream doesn't work on iOS 15.1?

Question

Looks like in iOS 15 or 15.1 a bug appeared that somehow broke the video streaming feature.

I've found a couple of links related to that issue but still couldn't figure it out. I use VueJS and I tried different solutions.

So, it doesn't work on any browser in iOS 15.1.

What I exactly do I have a video tag, in which I put srcObject with a video stream. The following code works everywhere except iOS 15.1:

<template>
    <video
      autoplay
      playsinline
      ref="video"
      class="video"
      :class="{ 'video-mobile': $mq === 'sm' }"
    />
</template>

<script>
    // ...
    async mounted () {
      if (!this.deviceSupported) {
        this.handleError('NoSupportedDevice')
        return
      }

      try {
        let stream = await navigator.mediaDevices.getUserMedia(this.constraints)
        this.$refs.video.srcObject = stream

      } catch (error) {
        console.log(error, 'camera_error')
        this.handleError(error.name)
      }
    },

</script>

BUT What happens is that if I hide and show the browser window, the video appears. And even if I don't do that, I'm still able to capture the video screenshot, so technically the stream works. The only thing that doesn't work is that the image of the video tag does not appear.

I tried different solutions

1. Using v-show, v-if and initialising video in $nextTick
2. Using timeout (e.g. after getting video permissions I waited for a second and then initialized video with srcObject)

Without any success =\

Answer 1

You need to add 'muted' attribute in pair with 'autoplay' to make the video play by default. Also, try 'playsInline' if 'playsinline' still doesn't resolve it.