我是 react-native 和 Jitsi-Meet 的新手。我正在尝试使用 Jitsi Meet 开发视频通话应用程序。我按照官方网站上的描述应用了所有内容,但我得到了图片中的错误。
这是我的一些代码
在我的 Jitsi.js 组件上 =
import React from 'react';
import { View } from 'react-native';
import JitsiMeet, { JitsiMeetView } from 'react-native-jitsi-meet';
class VideoCall extends React.Component {
constructor(props) {
super(props);
this.onConferenceTerminated = this.onConferenceTerminated.bind(this);
this.onConferenceJoined = this.onConferenceJoined.bind(this);
this.onConferenceWillJoin = this.onConferenceWillJoin.bind(this);
}
componentDidMount() {
console.log(props);
const { username, roomname } = this.props;
setTimeout(() => {
const url = `https://your.jitsi.server/${roomname}`; // can also be only room name and will connect to jitsi meet servers
const userInfo = {
displayName: `${username}`,
email: 'user@example.com',
avatar: 'https:/gravatar.com/avatar/abc123' };
JitsiMeet.call(url, userInfo);
/* You can also use JitsiMeet.audioCall(url) for audio only call */
/* You can programmatically end the call with JitsiMeet.endCall() */
}, 1000);
}
onConferenceTerminated(nativeEvent) {
/* Conference terminated event */
}
onConferenceJoined(nativeEvent) {
/* Conference joined event */
}
onConferenceWillJoin(nativeEvent) {
/* Conference will join event */
}
render() {
return (
<View style={{ backgroundColor: 'black',flex: 1 }}>
<JitsiMeetView onConferenceTerminated={this.onConferenceTerminated} onConferenceJoined={this.onConferenceJoined} onConferenceWillJoin={this.onConferenceWillJoin} style={{ flex: 1, height: '100%', width: '100%' }} />
</View>
);
}
}
export default VideoCall;
在我导入 jitsi 组件的 App.Js 上 =
import React, {useState} from 'react';
import { Platform, StyleSheet, Text, View, Button, TextInput } from 'react-native';
import JitsiMeet from './components/jitsi'
const instructions = Platform.select({
ios: `Şu anda IOS konfigürasyon`,
android: `Android Konfigürasyon`,
});
export default function App() {
const [Count, setCount] = useState(0);
const [value, SetValue] = React.useState('');
const [value2, SetValue2] = React.useState('');
const addJitsi = () => {
try {
if (value !== '' && value2 !== '' ) {
const roomname = value.replace(/ |,|\.|/g, "");
const username = value2.replace(/ |,|\.|/g, "");
return <JitsiMeet roomname={roomname} username={username}/>
}
return <Text style={styles.welcome}>Lütfen alanları doldurunuz</Text>
} catch (error) {
console.log(error);
}
}
return (
<View style={styles.container}>
<View style={styles.header}>
<Text style={styles.welcome}>Deep Lab University</Text>
<TextInput
style={styles.TextInputStyle}
onChangeText={text => SetValue(text)}
value={value}
placeholder='Kanal adı: '
/>
<TextInput
style={styles.TextInputStyle}
onChangeText={text => SetValue2(text)}
value={value2}
placeholder='Kullanıcı adı: '
/>
<Button title={'Kanal Oluştur'} style={{ marginBottom: '3%' }} onPress={(e) => console.log(value, value2)}/>
</View>
<Text style={styles.welcome}>Sayımız: `${Count}`</Text>
<Text style={styles.instructions}>To get started, edit App.js</Text>
<Text style={styles.instructions}>{instructions}</Text>
<Button title={`${Count}`} onPress={(e) => setCount(prevstate => prevstate +1)}/>
{
addJitsi()
}
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
header: {
backgroundColor: '#999',
color: 'red',
minHeight: '50%',
width: '90%',
top: '1%',
marginTop: '0%',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
TextInputStyle: {
height: 40,
borderColor: 'gray',
borderWidth: 1,
backgroundColor: 'white',
margin: '2%',
}
});
我不能再进一步了。提前致谢