the webpage im loading in my webview needs an audio input but the webview throws “getUserMedia not supported in your browser” error.
import React, { useState, useEffect } from 'react';
import { View, Dimensions, StyleSheet } from 'react-native';
import { WebView } from 'react-native-webview';
const HeyComponent = ({ customKnowledgeBaseId }) => {
const [dimensions, setDimensions] = useState(Dimensions.get('window'));
useEffect(() => {
const subscription = Dimensions.addEventListener('change', ({ window }) => {
setDimensions(window);
});
return () => subscription?.remove();
}, []);
const generateHtmlContent = (knowledgeBaseId) => {
const baseUrl = 'example.com';
const shareParams = `xyz`;
const url = `example.com`;
return `
</html>
`;
};
return (
<View style={styles.container}>
<WebView
source={{ html: generateHtmlContent(customId) }}
style={styles.webview}
javaScriptEnabled={true}
domStorageEnabled={true}
startInLoadingState={true}
mixedContentMode="always"
allowsInlineMediaPlayback={true}
mediaPlaybackRequiresUserAction={false}
/>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
},
webview: {
flex: 1,
},
});
export default HeyComponent;
please give a general solution this is an Expo react app.
i have seen some solutions here but they are not generic
import React, { useState } from 'react';
import { SafeAreaView, Text } from 'react-native';
import { WebView } from 'react-native-webview';
const App = () => {
const [userInput, setUserInput] = useState('');
return (
<SafeAreaView style={{ flex: 1 }}>
<WebView
style={{ flex: 1 }}
originWhitelist={['*']}
source={{ html: `
<input type="text" id="input" placeholder="Type something"/>
<button onclick="window.ReactNativeWebView.postMessage(document.getElementById('input').value)">
Send Input
</button>
` }}
onMessage={(event) => setUserInput(event.nativeEvent.data)}
/>
<Text>User Input: {userInput}</Text>
</SafeAreaView>
);
};
export default App;