callstack / react-native-opentok

React Native OpenTok
202 stars 79 forks source link

Hearing my own voice #82

Open Moussawi7 opened 6 years ago

Moussawi7 commented 6 years ago

When i try to communicate with another user, i am hearing my own voice. are there a way to prevent this issue?

import React, { Component } from 'react';
import { View } from 'react-native';
import { Container, Button, Text, Item, Input } from 'native-base';
import OpenTok, { Publisher, Subscriber } from 'react-native-opentok';
import Header from '../common/Header';
import { containerStyle, buttonStyle, textStyle } from './styles';

const sessionId = 'SESSION_ID';
const token = 'TOKEN_ID';

class StartSession extends Component {
  //Testing purposes
  async componentWillMount() {
    console.log('Start session method');
    const isConnected = await OpenTok.connect(sessionId, token);
    console.log('Volvio del connect: ', isConnected);
    OpenTok.on(OpenTok.events.ON_SIGNAL_RECEIVED, e => console.log(e));
  }

  async sendSignal() {
    console.log('Sending signal');
    const isSent = await OpenTok.sendSignal(sessionId, 'message', 'a');
    console.log('Signal sent: ', isSent);
  }

  render() {
    return (
      <Container>
        <Header title="Start a session" subtitle="Name the session" />
        <View style={containerStyle}>
          <Item regular>
            <Input placeholder="Name of this session" />
          </Item>
          {/* <Button block style={buttonStyle} onPress={() => this.startSession()}>
            <Text style={textStyle}>Start the Session</Text>
          </Button> */}

          <Button block style={buttonStyle} onPress={() => this.sendSignal()}>
            <Text style={textStyle}>Send signal</Text>
          </Button>

          <Publisher
            sessionId={sessionId}
            onPublishStart={() => {
              console.log('publish started');
            }}
            onPublishStop={() => {
              console.log('publish stoped');
            }}
            style={{ height: 100, width: 200, backgroundColor: 'red' }}
            ref={ref => {
              this.publisherRef = ref;
            }}
          />

          <Subscriber
            style={{ height: 100, width: 200, backgroundColor: 'blue' }}
            sessionId={sessionId}
            onSubscribeStart={() => {
              console.log('subscription started');
            }}
            onSubscribeStop={() => {
              console.log('subscription stopped');
            }}
          />
        </View>
      </Container>
    );
  }
}

export default StartSession;