3

我是 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%',
  }
});

我不能再进一步了。提前致谢

4

0 回答 0