Why WebRTC live video is getting freezes in webview react native?

Question

If I touch the screen then only video plays. I have already set mediaPlaybackRequiresUserAction={false}.

<View style={styles.TopContainer}>
          <AppBar props={AppBarContent}/>
          {
            url !== null ?
                <WebView 
                  style={{height:'100%', width:'100%', backgroundColor:"red"}} 
                  source={{ uri: url }} 
                  // allowsInlineMediaPlayback={true} 
                  mediaPlaybackRequiresUserAction={false}
                  mediaCapturePermissionGrantType="grantIfSameHostElsePrompt"
                  // allowsProtectedMedia={true}
                  // allowsAirPlayForMediaPlayback={true}
                  // startInLoadingState
                  // scalesPageToFit
                  // javaScriptEnabled={true}
                  // userAgent={'Mozilla/5.0 (Linux; An33qdroid 10; Android SDK built for x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.185 Mobile Safari/537.36'}
                />
            : null
          }
    </View>

I have tried to set different props related to media but nothing is working. If you can provide a solution would be a great help. Thank You!

Answer 1

There are restrictions for autoplay media in browsers. Many browsers do not allow autoplay of any video while the audio is not muted. I never found a solution to bypass this behavior. But there are a few tricks to solve this.

• Start your videos muted, then update their audio status in the first user interaction.
• Show them something like a pop-up to make them interact with the page.
• Use "canAutoplay" npm package to check whether the page can autoplay the media or not.

One way or another. If the page that you rendered in the browser is not a trusted or white-labeled one, you won't be able to autoplay without any user interaction.

You can check browser restrictions for chrome here: https://developer.chrome.com/blog/autoplay/

Also, you can check the website scores for your browser (chrome) from here: about://media-engagement