Videochatroom.js

'use strict';
import {Actions} from "react-native-router-flux";
// var Sinch = require('./Sinch-javascript/sinch-rtc')
import Camera from 'react-native-camera';
var GiftedMessenger = require('react-native-gifted-messenger');
var GiftedSpinner = require('react-native-gifted-spinner');
var React = require('react-native');
const timer = require('react-native-timer');
var {
  AppRegistry,
  StyleSheet,
  Text,
  TouchableHighlight,
  View,
  TextInput,
  ListView,
  Dimensions,
  Image,
  InteractionManager,
  ScrollView,
  
} = React;
var senderEmail;
var senderDisplayname;
let ScreenSize = {width:Dimensions.get('window').width,
                  height: Dimensions.get('window').height};
var WebRTC = require('react-native-webrtc');
var {
  RTCPeerConnection,
  RTCMediaStream,
  RTCIceCandidate,
  RTCSessionDescription,
  RTCView,
  RTCSetting,
  MediaStreamTrack,
  getUserMedia,
} = WebRTC;

var globCont;
var configuration = {"iceServers": [{"url": "stun:stun.l.google.com:19302"}]};
var pcPeers = {};
var localStream;
var userEmailForMesage = 'uahood';
var container;
if (!window.navigator.userAgent) {
  // window.navigator.userAgent = "react-native";
}
if (window.navigator && Object.keys(window.navigator).length == 0) {
  window = Object.assign(window, { navigator: { userAgent: 'ReactNative' }});
}
var io = require('socket.io-client/socket.io');
let socket ;

function mapHash(hash, func) {
  
  const array = [];
  for (const key in hash) {
    const obj = hash[key];
    console.warn("array?",obj,key);
    array.push(func(obj, key));
  }
  return array;
}
 function releaseLocalStream() {
  localStream.release();
  localStream = null;
}
function getLocalStream(isFront, callback) {
  MediaStreamTrack.getSources(sourceInfos => {
    console.log(sourceInfos);
    let videoSourceId;
    for (const i = 0; i < sourceInfos.length; i++) {
      const sourceInfo = sourceInfos[i];
      if(sourceInfo.kind == "video" && sourceInfo.facing == "back") {
        videoSourceId = sourceInfo.id;
      }
    }
    getUserMedia({
      "audio": true,
      "video": {
        optional: [{sourceId: videoSourceId}]
      }
    }, function (stream) {
      console.warn('dddd', stream);
      callback(stream);
    }, logError);
  });
}
function logError(error) {
  console.log("logError", error);
}

class VideoChatRoom extends React.Component {
  constructor(props){
    super(props);
    this.ds = new ListView.DataSource({rowHasChanged: (r1, r2) => true});
    this._messages = [];
    this.state = {
      isFront:true,
       cameraType: Camera.constants.Type.front,
      remoteList: {},
      selfViewSrc: null,
      page:'second',
      typingOpacity:0,
    messages: this._messages,
      isLoadingEarlierMessages: false,
      typingMessage: '',
        allLoaded: false,
      
    };

}

serverRequest(callback){
  ///just for test
  console.warn("serverRequest");
  let ___thatM = this;
  // let userEmailForMesageProp = this.props.userEmailForMesageProp;
  
  senderEmail = global.glEmail;
  senderEmail = '[email protected]';
//тут выборка истории смс видео чата
// roomNo chatVideoData [email protected]&roomName=45
 fetch('http://oglteam.xyz/Messaging/getChatVideoData.php?from='+senderEmail+'&roomName='+this.props.roomName)
  .then((response) => response.json())
    .then((responseText) => {
      
      // callback(___thatM,___thatM.props.roomName);
      if(responseText.success==1){
    this._messages = responseText.Data.reverse();


    this._messages.forEach(function(value) {
  
  value.image = {uri:value.image}
  
});
     // console.warn(this._messages);
    this.setState({
      messages: this._messages,
    });
  }
  })
  .catch((error) => {
      console.warn("responseText1",error);
  });
  
}
initSocketIo(that,roomName){

  console.warn("initSocketIo",roomName);
  let ___that = that;
  that.socket = io('https://;;;.herokuapp.com/', {transports: ['websocket']});

// that.socket = io('https://;;;.herokuapp.com/?technology=323&text=true&name=dmytro&[email protected]
  // that.socket = io('https://;;*.herokuapp.com/?technology=323&text=true&name=dmytro&[email protected]', {transports: ['websocket']});
// that.socket = io('https://***.herokuapp.com/?technology='+"roomName"+'&text='+true, {transports: ['websocket']});
  // that.socket = io('https://**.herokuapp.com/?technology='+"roomName", {transports: ['websocket']});
// console.warn('https://((**)).herokuapp.com/?technology='+"roomName"+'&text='+true);
that.socket.io.connect();
socket = that.socket;

that.socket.on('connect', function() {
console.warn('connect');  
  getLocalStream(true, function(stream) {
    // if(localStream){
      // r/eleaseLocalStream(localStream);
    // }
    localStream = stream;
    
    console.warn('connect1',stream.toURL());
    globCont = container;
     globCont.setState({selfViewSrc: stream.toURL()});
     join(roomName);
  }
  );
  //  socket.emit('joƒinRoom',{
  //   name:'senderDisplayname',
  //   user:'senderEmail',
  //   room:roomName,
  // });
         // join("roomName");
         // var timerId = setInterval(function() {
  
// }, 2000);

// через 5 сек остановить повторы
// setTimeout(function() {
  // clearInterval(timerId);
  
// }, 5000);
  });

that.socket.on('exchange', function(data){
  console.warn('connect03',data);  
  exchange(data);
});
// console.warn('connect04');  
that.socket.on('leave', function(socketId){
  console.warn('connect04',socketId);  
  leave(socketId);
});
console.warn('connect05');  
that.socket.on('typing', function(typing){
  console.warn('connect05',typing);  
  // console.warn('User typing->'+typing.email);
  if(typing.status=="ON" && typing.email != global.glEmail){
  ___that.setState({ typingOpacity:0.5});
}
else{
  ___that.setState({ typingOpacity:0});
}
  
  // typing.uniqueId = Math.round(Math.random() * 10000);
  // ___that.setMessageStatus(typing.uniqueId, 'Seen'); // here you can replace 'Seen' by any string you want
});
console.warn('connect06');  
that.socket.on('message',function(message){
   console.warn('User2 sent->',message);
   // console.warn('User sent->'+message.name);
  if(message.name==userEmailForMesage){}
    else /*if(userEmailForMesage.length!=0 && (message.name.length!=0 && message.name!='System'))*/{
  container.handleReceive({
        text: message.text,
        name: message.name,
        image: {uri: message.avatar},
        position: message.position,
        date: message.date,
        uniqueId: message.uniqueId, // simulating server-side unique id generation
      });
}
});





    that._isMounted = true;
    var __this = that;
console.warn('connect07');  
   /* setTimeout(() => {

         storage.load({
  key: 'user',
  id: '1001',
}).then( ret => {
  console.warn("retsenderEmail",ret.email);


// senderEmail = ret.email;
// senderDisplayname = ret.displayname;
// join(roomName);

// let resAr = ret.avatar.split("/");
// console.warn("resAr:",resAr);
let resImage = ret.avatar;//'http://oglteam.xyz/Pictures/'+resAr[resAr.length - 1];


  //   socket.emit('joinRoom',{
  //   name:senderDisplayname,
  //   user:senderEmail,
  //   room:roomName,
  // })

__this.setState({
  avatarURI:resImage,
});

  





}).catch( err => {
  console.warn("0catch0",err);
  // any exception including data not found  
  // goes to catch() 
  // console.warn(err);
   // InteractionManager.runAfterInteractions(() => {
      // this.setState({renderPlaceholderOnly: false});
    // });
})


      // this.handleReceive({
      //   text: 'Hello Awesome Developer',
      //   name: 'React-Bot',
      //   image: {uri: this.state.avatarURI},
      //   position: 'left',
      //   date: new Date(),
      //   uniqueId: 312, // simulating server-side unique id generation
      // });
    }, 35000000); // simulating network
*/
}
_press(event) {
    // this.refs.roomID.blur();
    // this.setState({status: 'connect', info: 'Connecting'});
   // join("roomName");
   leave();
  }
 handleReceive(message = {}) {
    // make sure that your message contains :
    // text, name, image, position: 'left', date, uniqueId
    this.setMessages(this._messages.concat(message));
  }
handleSend(message = {}) {
this.emitTypingOFF();
 
 ///just for test
  let userEmailForMesageProp = '[email protected]';
  senderEmail = '[email protected]';
  senderDisplayname ="just test";
// -------------------------------------- //

let _this = this;
 message.uniqueId = Math.round(Math.random() * 10000); // simulating server-side unique id generation
console.warn("message",this._messages);
socket.emit('message',{text: message.text,'name':senderDisplayname,'position':'right','date':message.date,'uniqueId':message.uniqueId,'avatar':this.state.avatarURI});
this.setMessages(this._messages.concat(message));
 console.warn('req','http://oglteam.xyz/Messaging/setChatVideoData.php?text='+message.text+'&roomName='+this.props.roomName+'&from='+senderEmail+'&type='+'TEMPtext'+
'&date='+encodeURIComponent((new Date())));
fetch('http://oglteam.xyz/Messaging/setChatVideoData.php?text='+message.text+'&roomName='+this.props.roomName+'&from='+senderEmail+'&type='+'TEMPtext'+
'&date='+encodeURIComponent((new Date())))
  .then((response) => response.json())
  .then((responseText) => {
    // console.warn("response:"+responseText.Data);
      _this.setMessages(this._messages.concat(message));
  })
  .catch((error) => {
     console.warn("---"+error);
     // if you couldn't send the message to your server :
      // message.uniqueId = Math.round(Math.random() * 10000); // simulating server-side unique id generation
    // _this.setMessageStatus(message.uniqueId, 'ErrorButton');
  });
    // Your logic here
   
// _this.setMessageStatus(message.uniqueId, 'ErrorButton');
    // mark the sent message as Seen
    // setTimeout(() => {
    //   // this.setMessageStatus(message.uniqueId, 'Seen'); // here you can replace 'Seen' by any string you want
    // }, 1000);

    
  }
  
  onErrorButtonPress(message = {}) {
    // Your logic here
    // re-send the failed message

    // remove the status
    this.setMessageStatus(message.uniqueId, '');
  }
  onImagePress(message = {}) {
    // Your logic here
    // Eg: Navigate to the user profile
  }
  componentWillUnmount() {
   
 timer.clearInterval(this);
}
  componentDidMount() {
    
container = this;
InteractionManager.runAfterInteractions(() => {

      this.setState({renderPlaceholderOnly: false});
      this.serverRequest(this.initSocketIo)
    // timer.setInterval(this, 'hideMsg',()=> this.serverRequest(this.initSocketIo), 1500);  
       ;
      
    
      
      // socket.io.connect();
     socket  = io.connect('https://**.herokuapp.com/', {transports: ['websocket']});
    
function getLocalStream(isFront, callback) {
  MediaStreamTrack.getSources(sourceInfos => {
    console.log(sourceInfos);
    let videoSourceId;
    for (const i = 0; i < sourceInfos.length; i++) {
      const sourceInfo = sourceInfos[i];
      if(sourceInfo.kind == "video" && sourceInfo.facing == (isFront ? "front" : "back")) {
        videoSourceId = sourceInfo.id;
      }
    }
    getUserMedia({
      "audio": true,
      "video": {
        optional: [{sourceId: videoSourceId}]
      }
    }, function (stream) {
      console.warn('dddd', stream);
      callback(stream);
    }, logError);
  });
}
function join(roomID) {
console.warn("roomNo");
 socket.emit('joinRoom',{
    name:"senderDisplayname",
    user:"senderEmail",
    room:"323",
  },
  function(socketIds){
    if(socketIds.length!=0){
    console.warn('join', socketIds);
    

    // container.setState({textRoomConnected: true});

    for (var i in socketIds) {
      var socketId = socketIds[i];
      createPC(socketId, true);
    }
  }
  });

  
}
function createPC(socketId, isOffer) {
  const pc = new RTCPeerConnection(configuration);
  pcPeers[socketId] = pc;

  pc.onicecandidate = function (event) {
    console.warn('onicecandidate', event.candidate);
    if (event.candidate) {
      socket.emit('exchange', {'to': socketId, 'candidate': event.candidate });
    }
  };

  function createOffer() {
    pc.createOffer(function(desc) {
      console.warn('createOffer', desc);
      pc.setLocalDescription(desc, function () {
        console.log('setLocalDescription', pc.localDescription);
        socket.emit('exchange', {'to': socketId, 'sdp': pc.localDescription });
      }, logError);
    }, logError1);
  }

  pc.onnegotiationneeded = function () {
    console.warn('onnegotiationneeded');
    if (isOffer) {
      createOffer();
    }
  }

  pc.oniceconnectionstatechange = function(event) {
    console.warn('oniceconnectionstatechange', event.target.iceConnectionState);
    if (event.target.iceConnectionState === 'completed') {
      setTimeout(() => {
        getStats();
      }, 1000);
    }
    if (event.target.iceConnectionState === 'connected') {
      createDataChannel();
      pc.addStream(localStream);
    }
  };
  pc.onsignalingstatechange = function(event) {
    console.warn('onsignalingstatechange', event.target.signalingState);
  };

  pc.onaddstream = function (event) {
    console.log('onaddstream', event.stream);
    console.log('onaddstream2', socketId);
    // container.setState({info: 'One peer join!'});

    const remoteList = container.state.remoteList;
    remoteList[socketId] = event.stream.toURL();
    container.setState({ remoteList: remoteList });
  };
  pc.onremovestream = function (event) {
    console.log('onremovestream', event.stream);
  };
console.warn("TestInfo2",pc)
  
  function createDataChannel() {
    if (pc.textDataChannel) {
      return;
    }
    const dataChannel = pc.createDataChannel("text");

    dataChannel.onerror = function (error) {
      console.log("dataChannel.onerror", error);
    };

    dataChannel.onmessage = function (event) {
      console.log("dataChannel.onmessage:", event.data);
      container.receiveTextData({user: socketId, message: event.data});
    };

    dataChannel.onopen = function () {
      console.log('dataChannel.onopen');
      container.setState({textRoomConnected: true});
    };

    dataChannel.onclose = function () {
      console.log("dataChannel.onclose");
    };

    pc.textDataChannel = dataChannel;
  }
  return pc;
}
function leave(socketId) {
  // if(true){
    socket.emit('disconnect',{});
  // }
// else{
  console.warn('leave', socketId);
  var pc = pcPeers[socketId];
  var viewIndex = pc.viewIndex;
  pc.close();
  delete pcPeers[socketId];

  var remoteList = container.state.remoteList;
  delete remoteList[socketId];
  Actions.pop();
  socket.close();
  // container.setState({ remoteList: remoteList });
  // container.setState({info: 'One peer leave!'});
// }
}
function exchange(data) {
  const fromId = data.from;
  let pc;
  if (fromId in pcPeers) {
    pc = pcPeers[fromId];
  } else {
    pc = createPC(fromId, false);
  }

  if (data.sdp) {
    console.log('exchange sdp', data);
    pc.setRemoteDescription(new RTCSessionDescription(data.sdp), function () {
      if (pc.remoteDescription.type == "offer")
        pc.createAnswer(function(desc) {
          console.log('createAnswer', desc);
          pc.setLocalDescription(desc, function () {
            console.log('setLocalDescription', pc.localDescription);
            socket.emit('exchange', {'to': fromId, 'sdp': pc.localDescription });
          }, logError2);
        }, logError3);
    }, logError4);
  } else {
    console.log('exchange candidate', data);
    pc.addIceCandidate(new RTCIceCandidate(data.candidate));
  }
}
socket.on('message',function(message){
   console.warn('User2 sent->',message);
   // console.warn('User sent->'+message.name);
  if(message.name==userEmailForMesage){}
    else /*if(userEmailForMesage.length!=0 && (message.name.length!=0 && message.name!='System'))*/{
  container.handleReceive({
        text: message.text,
        name: message.name,
        image: {uri: message.avatar},
        position: message.position,
        date: message.date,
        uniqueId: message.uniqueId, // simulating server-side unique id generation
      });
}
});

socket.on('exchange', function(data){
  exchange(data);
});
socket.on('leave', function(socketId){
  console.warn('leave??');
  leave(socketId);
});

socket.on('connect', function(data) {
   // localStream.release();
        // localStream = null;
  getLocalStream(true, function(stream) {
//

    localStream = stream;
    if(typeof container !='undefined'){
    container.setState({selfViewSrc: stream.toURL()});
    // container.setState({status: 'ready', info: 'Please enter or create room ID'});
    join("323");
  }
  });
});

function logError(error) {
  console.log("logError", error);
}
function logError1(error) {
  console.log("logError1", error);
}
function logError2(error) {
  console.log("logError2", error);
}
function logError3(error) {
  console.log("logError3", error);
}
function logError4(error) {
  console.log("logError4", error);
}



function getStats() {
  const pc = pcPeers[Object.keys(pcPeers)[0]];
  if (pc.getRemoteStreams()[0] && pc.getRemoteStreams()[0].getAudioTracks()[0]) {
    const track = pc.getRemoteStreams()[0].getAudioTracks()[0];
    console.log('track', track);
    pc.getStats(track, function(report) {
      console.log('getStats report', report);
    }, logError);
  }
}


function peerConnected() {
  // RTCSetting.setAudioOutput('speaker');
  // RTCSetting.setKeepScreenOn(true);
  // RTCSetting.setProximityScreenOff(true);
}

    });
  

}
   setMessages(messages) {
    console.warn("setMessages",messages);
    this._messages = messages;

    // append the message
    this.setState({
      messages: messages,
    });
  }
  emitTypingOn(){
    console.warn("emitTyping",senderDisplayname/*,userEmailForMesage*/);
    socket.emit('typing',{status: 'ON','name':senderDisplayname,'email':"ALL"});
  }
  emitTypingOFF(){
    console.warn("emitTypingOFF");
    socket.emit('typing',{status: 'OFF','name':senderDisplayname,'email':/*userEmailForMesage*/"ALL"});
  }
  _renderPlaceholderView() {
    return (
       <View style={{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
      }}>
        <GiftedSpinner />
      </View>
    );
    }
    _switchCamera() {
    var state = container.state;
    state.cameraType = state.cameraType === Camera.constants.Type.back ? Camera.constants.Type.front : Camera.constants.Type.back;
    container.setState({cameraType:state.cameraType});
}
  render(){
    if (this.state.renderPlaceholderOnly) {
      return this._renderPlaceholderView();
    }
  
  return(
    <View ref='scrollView' keyboardShouldPersistTaps={false} style = {{marginTop:0,height: ScreenSize.height, width: ScreenSize.width}}>
  
      <Image  source={require('./img/header.png')} style={{flexDirection:'row', borderWidth: 0,alignSelf: 'stretch', height: 50, width: ScreenSize.width}}>
      
      <TouchableHighlight style={{height: 50,width: 50,}} activeOpacity={0.3} underlayColor='transparent'
              onPress={this._Connection}>
              
              <Image
        style={{height: 20,width: 20, borderWidth: 0,marginTop: 20,margin:10,flexDirection:'row',flex:1}}
        source={require('./img/goBack.png')}
      />
     
            </TouchableHighlight>
              </Image>
              <TouchableHighlight style={{marginTop:20,alignItems:'center',justifyContent:'center',height: 35,width: (Dimensions.get('window').width -120),borderRadius:15,backgroundColor:'#2f858d',alignSelf:'center'}} activeOpacity={0.3} underlayColor='transparent'
              onPress={this._Join}>
              
              <Text style={{color:'white',fontFamily: 'BariolRegular-Italic'}}>Join</Text>
     
            </TouchableHighlight>

            {/*  <Camera
          ref={(cam) => {
            this.camera = cam;
          }}
          style={styles.preview}
          type={this.state.cameraType}
          aspect={Camera.constants.Aspect.fill}>
          <View style={styles.buttonBar}>
        <TouchableHighlight style={styles.button} onPress={this._switchCamera}>
            <Text style={styles.buttonText}>Flip</Text>
        </TouchableHighlight>
        
            
        
    </View>
        </Camera>*/}
                      
              <TouchableHighlight
            style={{borderWidth: 1, borderColor: 'black'}}
            onPress={()=>this._switchVideoType()}>
            <Text>Switch camera</Text>
          </TouchableHighlight>

              <RTCView streamURL={this.state.selfViewSrc} style={{height:(ScreenSize.height-90)/2,width:ScreenSize.height/2-20}}/>
           
              <View  style={{width:ScreenSize.width,height:ScreenSize.width/3,backgroundColor:'transparent',flexDirection:'row'}}>
              {
          mapHash(this.state.remoteList, function(remote, index) {
            return <RTCView key={index} streamURL={remote}  style={{width:ScreenSize.width/3,height:ScreenSize.width/3,borderWidth:1 }}/>
            })
              }
        </View>
              <GiftedMessenger
        ref={(c) => this._GiftedMessenger = c}

        styles={{
          bubbleRight: {
            marginLeft: 70,
            backgroundColor: '#449199',
            
          },

          bubbleLeft: {
            
            backgroundColor: '#064056',
            
          },
        }}

        autoFocus={false}
        SendBtnTextIpnut={false}
        messages={this.state.messages}
        handleSend={this.handleSend.bind(this)}
        onErrorButtonPress={this.onErrorButtonPress.bind(this)}
        maxHeight={(ScreenSize.height-50)/2-60}
onScroll={this.handleScroll}
        loadEarlierMessagesButton={!this.state.allLoaded}
        onLoadEarlierMessages={this.onLoadEarlierMessages.bind(this)}
onMessageLongPress={this.onMessageLongPress.bind(this)}
        senderName='Awesome Developer'
        senderImage={{uri: this.state.avatarURI}}
        onImagePress={this.onImagePress}
        displayNames={true}
keyboardShouldPersistTaps={false}
        parseText={true} // enable handlePhonePress, handleUrlPress and handleEmailPress
handlePhonePress={this.handlePhonePress}
        handleUrlPress={this.handleUrlPress}
        handleEmailPress={this.handleEmailPress}
onChangeText = {this.emitTypingOn}
        isLoadingEarlierMessages={this.state.isLoadingEarlierMessages}
showDate = {true}
        typingMessage={this.state.typingMessage}
      />
      <View style={{width:ScreenSize.width-20,flex:1,backgroundColor:'transparent',position:'absolute',bottom:70,marginLeft:10}}>
      <Text style={{color:'gray',flex:1,opacity:this.state.typingOpacity}}>typing...</Text>
      </View>
            </View>
    );

}

onLoadEarlierMessages() {
  console.warn("onMessageLongPress0");
    // display a loader until you retrieve the messages from your server
    this.setState({
      isLoadingEarlierMessages: true,
      allLoaded: false,
    });

    // Your logic here
    // Eg: Retrieve old messages from your server

    // IMPORTANT
    // Oldest messages have to be at the begining of the array
     this.serverRequestNextPages();
    // var earlierMessages = [
    //   {
    //     text: 'React Native enables you to build world-class application experiences on native platforms using a consistent developer experience based on JavaScript and React. https://github.com/facebook/react-native',
    //     name: 'React-Bot',
    //     image: {uri: 'https://facebook.github.io/react/img/logo_og.png'},
    //     position: 'left',
    //     date: new Date(2016, 0, 1, 20, 0),
    //     uniqueId: Math.round(Math.random() * 10000), // simulating server-side unique id generation
    //   }, {
    //     text: 'This is a touchable phone number 0606060606 parsed by taskrabbit/react-native-parsed-text',
    //     name: 'Awesome Developer',
    //    image: {uri: 'https://facebook.github.io/react/img/logo_og.png'},
    //     position: 'right',
    //     date: new Date(2016, 0, 2, 12, 0),
    //     uniqueId: Math.round(Math.random() * 10000), // simulating server-side unique id generation
    //   },
    // ];

    // setTimeout(() => {
    //   this.setMessages(earlierMessages.concat(this._messages)); // prepend the earlier messages to your list
    //   this.setState({
    //     isLoadingEarlierMessages: true, // hide the loader
    //     allLoaded: true, // hide the `Load earlier messages` button
    //   });
    // }, 1000); // simulating network

  }
  serverRequestNextPages(){

  }
  handleScroll(e) {
  // console.warn("!!!"+e.nativeEvent.contentOffset.y);
  if (e.nativeEvent.contentOffset.y == 0) {
  this.onLoadEarlierMessages();
}
}
onMessageLongPress(){
  console.warn("onMessageLongPresss");
}
_Join(){

}
_Connection(){
// releaseLocalStream();
localStream.getTracks().forEach(track => track.stop());
localStream.release();
localStream = null;
console.warn("_Connection");
  // socket.emit('disconnect',{});
  socket.emit('leave',{});
   // Actions.pop();
  socket.close();
  Actions.pop();
for(let pc in pcPeers){
  pc.close();
  delete pcPeers[pc];

  var remoteList = this.state.remoteList;
  delete remoteList[socketId];
 
  socket.close();
}
 pcPeers.release();
  Actions.pop();
  
  
  
}
_switchVideoType() {
    const isFront = !this.state.isFront;
    this.setState({isFront});
    getLocalStream(isFront, function(stream) {
      if (localStream) {
        for (const id in pcPeers) {
          const pc = pcPeers[id];
          pc && pc.removeStream(localStream);
        }
        localStream.release();
        releaseLocalStream();
      }
      localStream = stream;
      container.setState({selfViewSrc: stream.toURL()});

      for (const id in pcPeers) {
        const pc = pcPeers[id];
        pc && pc.addStream(localStream);
      }
    });
  }
switchVideoType() {
    
    // return;
    var _tr = this;
    
    var isFront = !this.state.isFront;
    this.setState({isFront});

   
    getLocalStream(isFront, function(stream) {
      if (localStream) {
        console.warn("0");
        // pc.removeStream(localStream);

        for (var id in pcPeers) {
          // console.warn("pcPeers",pcPeers);
          const pc = pcPeers[id];
          pc && pc.removeStream(localStream);
        }
        localStream.release();
        localStream = null;
      }
      pc.addStream(stream);
      localStream = stream;
      console.warn("_switchVideoType0",stream);

      globCont.setState({selfViewSrc: stream.toURL()});

      for (var id in pcPeers) {
        console.warn("1");
        
        var pc = pcPeers[id];
        pc && pc.addStream(localStream);
      }
    });
  }

}    

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  preview: {
    flex: 1,
    marginTop:20,
    alignSelf:'center',
    justifyContent: 'flex-end',
    alignItems: 'center',
    height: Dimensions.get('window').height - 260,
    width: Dimensions.get('window').width - 120
  },
  capture: {
    flex: 0,
    backgroundColor: '#fff',
    borderRadius: 5,
    color: '#000',
    padding: 10,
    margin: 40
  },
  button:{
     padding: 10,
        backgroundColor: "#FFFFFF",
        borderWidth: 1,
        borderColor: "#FFFFFF",
        margin: 5
  },
});
module.exports = VideoChatRoom;