import React from "react";
import { View, Text, Touchable, TouchableOpacity, StyleSheet, Image} from "react-native";
import Button from "./Button";
import {MediaStream, RTCView} from 'react-native-webrtc';
interface Props{
hangup: ()=>void;
localStream?: MediaStream | null;
remoteStream?: MediaStream | null;
}
function ButtonContainer(props: Props){
return <View style={styles.bContainer}>
<Button iconName="phone" backgroundColor="red" onPress={props.hangup}/>
</View>;
}
export default function Video(props: Props){
//on local stream
if(props.localStream && !props.remoteStream){
return <View style={styles.container}>
<RTCView streamURL={props.localStream.toURL()} objectFit={'cover'}
style={styles.video}
/>
<ButtonContainer hangup={props.hangup} />
</View>;
}
//once the call is connected
if(props.localStream && !props.remoteStream){
return <View style={styles.container}>
<RTCView streamURL={props.remoteStream.toURL()} objectFit={'cover'}
style={styles.video}
/>
<RTCView streamURL={props.localStream.toURL()} objectFit={'cover'}
style={styles.videoLocal}
/>
<ButtonContainer hangup={props.hangup} />
</View>;
}
return(
//on call
<ButtonContainer hangup={props.hangup} />
)
}
const styles=StyleSheet.create({
bContainer:{
flexDirection: 'row',
bottom: 30,
},
container:{
flex:1,
justifyContent: 'flex-end',
alignItems: 'center'
},
video:{
position: 'absolute',
width: '100%',
height: '100%'
},
videoLocal:{
position: 'absolute',
width:100,
height:150,
top:0,
left: 20,
elevation: 10,
}
});
I am getting error red underline for streamURL. how can I fix this?? I want to make app for videocalling, as on the https://www.youtube.com/watch?v=pv3UHYwgxnM&ab_channel=TechSavvy.
What to do? Is there any change for syntax?
Error:
Property 'streamURL' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<unknown, {}, any> & Readonly<NativeMethods>> & Readonly<...>'.ts(2322).. How to fix this?