Question 32987 in React native Question posted in
The official React Native documentation can be found here.

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

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!

Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    It looks like a focus problem, I have also tested all combinations of webview properties, if you use an in app browser instead, then this issue will never happen.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search