CODEWITHSUNDEEP
react-nativewebviewexpojitsijitsi-meet
kodervine
kodervine

Reputation: 31

Audio isn't playing on Webview on React Native app

I am using the Webview library (react-native-webview version 13.2.2) to render a meeting Link from jisti on React Native. The link works correctly and I am able to start the meeting and view my video. However, the audio isn't working. My application runs on expo.

The permissions for my device microphone, audio and camera are all allowed.

I'd seen another post where someone said to set the mediaPlaybackRequiresUserAction={false} props. However, that didn't work for me.

I also tried updating the allowsInlineMediaPlayback={true} props.

Here is my code:

<View>
        {backButton}
        <WebView
          source={{ uri: link }}
          allowsInlineMediaPlayback={true}
 mediaPlaybackRequiresUserAction={false}
        />
      </View>

Can anyone help to fix this issue?

Upvotes: 2

Views: 678

Answers (2)

DEV 2
DEV 2

Reputation: 11

The audio wasn't being recognized for a video calling app, so my solution was that the Webview wasn't clearing the cache. Therefore, I forced the cache to clear, and it worked.

import WebView from "react-native-webview";

const webViewRef = useRef<WebView>(null);

const clearCache = () => {
const jsCode = `
   window.location.reload(true); // Force reload without cache
   localStorage.clear(); // Clear localStorage
   sessionStorage.clear(); // Clear sessionStorage
 `;
 webViewRef?.current?.injectJavaScript(jsCode);
};

useEffect(() => {
 clearCache(); 
}, []);

<WebView
  ref={webViewRef}
  source={{ uri: url }}
  cacheEnabled={false}
  onMessage={handleMessage}
  mediaPlaybackRequiresUserAction={false}
  javaScriptEnabled={true}
  allowsInlineMediaPlayback={true}
  scrollEnabled={false}
  showsVerticalScrollIndicator={false}
  style={{
    backgroundColor: colors.background,
  }}
  originWhitelist={["*"]}
/>

Upvotes: 1

kodervine
kodervine

Reputation: 31

I started a fresh expo app to check if any of the packages were conflicting and same issue persists.

However, neither the camera nor audio were working on the new expo app. But on deployment, the camera works while the audio doesn't.

So, I figured I'd deploy the app with the changed I had just to confirm if there were any changes. Turns out the audio and video doesn't work on the development environment on my expo but they are working on deployment.

Just for anyone who comes across this in the future. These are the changes I made to my project

  <WebView
    source={{ uri: link }}
    allowsInlineMediaPlayback={true}
    mediaPlaybackRequiresUserAction={false}
        />

And then I added these permissions to my app.json file

 "android": {
      "versionCode": 1,
      "permissions": [
        "android.permission.READ_EXTERNAL_STORAGE",
        "android.permission.WRITE_EXTERNAL_STORAGE",
        "android.permission.RECORD_AUDIO",
        "android.permission.MODIFY_AUDIO_SETTINGS"
      ]
    },

Upvotes: 1

Related Questions