not working in android browsers

[nawaabazmi]

its working perfectly fine i have added few more functionalities like camera changing mute remote streams. but when i tried to connect thought chrome android socket get connected peer counts on desktop increases but on mobile it just show local stream only. but on refreshing/reload mobile page peer counts increases. Can you suggest what should i do? Do i have to implement adapter if yes please suggest me any link through which i can understand about implementation of webrtc-adapter

if find these errors Something went wrong! pc not created!! DOMException: Track already exists. App.js:172

Uncaught TypeError: Cannot read property 'addStream' of null App.js:248

Uncaught (in promise) DOMException: Failed to execute 'addIceCandidate' on 'RTCPeerConnection': Error processing ICE candidate

[nawaabazmi]

I have cleared the errors... So far everything looks good. But major problem android not solved yet. I have traced that local media stream working and even generating answer and even getting connected but on the mobile all the remote stream are black it's video components are rendered but with no data..and on the other hand on computer all the video components are rendering with any error except android one it's rendering but with black screen... also on mobile after rendering data's are coming from server but it doesn't get update on on page like new new peers video component peer counts, until I just reload it

[jamalag]

Hi nawaabazmi I haven't really tried running the web application on android chrome browser. Seems like you are doing great progress. If I get time I'll look into it and if you manage to solve please share your experience.

[jamalag]

Hi Ahmad

Can you please make a Pull Request so that you can apply your changes that you have made?

Thanks Amir

From: Ahmad azmi notifications@github.com Reply-To: jamalag/webrtc-part-5-React-Hooks reply@reply.github.com Date: Tuesday, April 28, 2020 at 1:59 PM To: jamalag/webrtc-part-5-React-Hooks webrtc-part-5-React-Hooks@noreply.github.com Cc: Subscribed subscribed@noreply.github.com Subject: Re: [jamalag/webrtc-part-5-React-Hooks] not working in android browsers (#2)

I have cleared the errors... So far everything looks good. But major problem android not solved yet. I have traced that local media stream working and even generating answer and even getting connected but on the mobile all the remote stream are black it's video components are rendered but with no data..and on the other hand on computer all the video components are rendering with any error except android one it's rendering but with black screen... also on mobile after rendering data's are coming from server but it doesn't get update on on page like new new peers video component peer counts, until I just reload it

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHubhttps://github.com/jamalag/webrtc-part-5-React-Hooks/issues/2#issuecomment-620763990, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AHOLA6KVESGEPK4JMOAAAJDRO4KP7ANCNFSM4MS4KSQQ.

[nawaabazmi]

thanks mate I got the solution . I even found the same issue in you video for react native . The reason for the this black screen is that turn server is expired i used xirsys stun and turn server for the ice and also i found that sometimes addstream is not triggering because connection is not extablished properly solution for that is to put delay of 3 sec in addstream

[nawaabazmi]

its working now i found another bug too. when a peer let say disconnect and reconnect then video components of 1st person repeats 2 times and repeat the same it get multiplied. also found one more thing that online status for the first person keep showing waiting for peers to connect no matter how many of the peer get connected until page get reload. on same side I found the same bug on client to once it get connect then number which is showing at time of connect will remain same no matter how many peers get connect all these problems is in the mobile browser

[jamalag]

ooh got it - by the way this code was an attempt to convert part 5 of the video series to using hooks and I have not covered mobile 1:N connections. So, mobile version only handles 1:1 hence you are facing all these problems. One of the next videos I am to convert the mobile 1:1 to 1:N https://www.youtube.com/watch?v=DBhPUE9UjU8&list=PL_YW-znSZ_dK365WaVuiBUN6FYc9_1hni&index=5

[jamalag]

But again if you want to PR and fork the project to accommodate your updates that will great.

[jamalag]

BTW, did you solve the android part that is not rendering the video?

[nawaabazmi]

yes rendeing problem is solve but addstream loading 2 streams one for video and one for audio. also wanna inform that addstream is outdated so tried with addtrack but it didnt work

[jamalag]

Yes, I think I fixed that in the YouTube video code already. Did you find this github project from YouTube? I dont remember sharing it there.

[nawaabazmi]

i followed both . but it didn't work

[jamalag]

I mean I fixed the addstream

[nawaabazmi]

no i didn't find any fix please suggest me where did you update

[jamalag]

you can find it here line 79 and 84 ...

https://github.com/jamalag/webrtc-Part-4/blob/master/web/src/App.js

and here line 134

https://github.com/jamalag/webrtc-Part-5/blob/master/web/src/App.js

[nawaabazmi]

this is working fine if i use only video:true if i add audio:true it started showing twice stream for each peers

[jamalag]

BTW, for ReactNative mobile, their api still uses addstream

[jamalag]

Please if you dont mind kindly share your code so that it can benefit others like Rahul who is having same issues. Thanks in advance.

[nawaabazmi]

i am not working on react native i am working on reactjs only and for that i used exactly same code as of you . it just your code doesn't have audio constraint set true . i did that and streams geting twice

[nawaabazmi]

if he is having rendering issue ask him to use xirsys for stun and turn server most of his issue will be solved

[nawaabazmi]

import React, { Component } from 'react';

import io from 'socket.io-client' //import adapter from 'webrtc-adapter'; import Video from './components/Video'; import Videos from './components/Videos';

class App extends Component { constructor(props) { super(props)

this.state = {
  localStream: null,    // used to hold local stream object to avoid recreating the stream everytime a new offer comes
  remoteStream: null,    // used to hold remote stream object that is displayed in the main screen

  remoteStreams: [],    // holds all Video Streams (all remote streams)
  peerConnections: {},  // holds all Peer Connections
  selectedVideo: null,

  status: 'Please wait...',

  pc_config: {
    "iceServers":  [// private ice server]
  },

  sdpConstraints: {
    'mandatory': {
        'OfferToReceiveAudio': true,
        'OfferToReceiveVideo': true
    }
  },
}

// DONT FORGET TO CHANGE TO YOUR URL
this.serviceIP = 'https://d11fcad8.ngrok.io/webrtcPeer'

// https://reactjs.org/docs/refs-and-the-dom.html
// this.localVideoref = React.createRef()
// this.remoteVideoref = React.createRef()

this.socket = null
// this.candidates = []

}

getLocalStream = () => { // called when getUserMedia() successfully returns - see below // getUserMedia() returns a MediaStream object (https://developer.mozilla.org/en-US/docs/Web/API/MediaStream) const success = (stream) => { window.localStream = stream console.log("localstream/......"+stream); // this.localVideoref.current.srcObject = stream // this.pc.addStream(stream); this.setState({ localStream: stream })

  this.whoisOnline()
}

// called when getUserMedia() fails - see below
const failure = (e) => {
  console.log('getUserMedia Error: ', e)
}

// https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
// see the above link for more constraint options
const constraints = {
  audio: true,
  video: true,
  //audio:{ echoCancellation: true },
  // video: {
  //   width: 1280,
  //   height: 720
  // },
  // video: {
  //   width: { min: 1280 },
  // }
  options: {
    mirror: true,
  }
}
if (navigator.mediaDevices === undefined) {
  navigator.mediaDevices = {};
}
if (navigator.mediaDevices.getUserMedia === undefined) {
  navigator.mediaDevices.getUserMedia = function(constraints) {

    // First get ahold of the legacy getUserMedia, if present
    var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

    // Some browsers just don't implement it - return a rejected promise with an error
    // to keep a consistent interface
    if (!getUserMedia) {
      return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
    }

    // Otherwise, wrap the call to the old navigator.getUserMedia with a Promise
    return new Promise(function(resolve, reject) {
      getUserMedia.call(navigator, constraints, resolve, reject);
    });
  }
}

// https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
navigator.mediaDevices.getUserMedia(constraints)
  .then(success)
  .catch(failure)

}

whoisOnline = () => { // let all peers know I am joining this.sendToPeer('onlinePeers', null, {local: this.socket.id}) }

sendToPeer = (messageType, payload, socketID) => { this.socket.emit(messageType, { socketID, payload }) }

createPeerConnection = (socketID, callback) => {

try {
  let pc = new RTCPeerConnection(this.state.pc_config)

  // add pc to peerConnections object
  const peerConnections = { ...this.state.peerConnections, [socketID]: pc }
  this.setState({
    peerConnections
  })

  pc.onicecandidate = (e) => {
    if (e.candidate) {
      this.sendToPeer('candidate', e.candidate, {
        local: this.socket.id,
        remote: socketID
      })
    }
  }

  pc.oniceconnectionstatechange = (e) => {

  }

  pc.ontrack = (e) => {
    const remoteVideo = {
      id: socketID,
      name: socketID,
      stream: e.streams[0]
    }

    this.setState(prevState => {
        console.log('streamers stream ',e.streams)
      // If we already have a stream in display let it stay the same, otherwise use the latest stream
      const remoteStream = prevState.remoteStreams.length > 0 ? {} : { remoteStream: e.streams[0] }
      console.log('remote stream ',remoteStream)
      // get currently selected video
      let selectedVideo = prevState.remoteStreams.filter(stream => stream.id === prevState.selectedVideo.id)
      // if the video is still in the list, then do nothing, otherwise set to new video stream
      selectedVideo = selectedVideo.length ? {} : { selectedVideo: remoteVideo }
      //s = Array.from(new Set(remoteStreams));
      return {
        // selectedVideo: remoteVideo,
        ...selectedVideo,
        // remoteStream: e.streams[0],
        ...remoteStream,
        remoteStreams: [...prevState.remoteStreams, remoteVideo]
      }
    })
  }

  pc.close = () => {
    // alert('GONE')
  }

  if (this.state.localStream)
    //pc.addStream(this.state.localStream)
    //var tracks=this.state.localStream.getTracks();
    var newStream=new MediaStream(this.state.localStream)
    pc.addStream(newStream)
    // var newStream=new MediaStream(this.state.localStream)
    // var tracks=newStream.getTracks();
    // //console.log(tracks);
    //   pc.addTrack(tracks[0],newStream)
    //this.state.localStream.getTrack().forEach(track=>pc.addTrack(track,this.state.localStream))

  // return pc
  callback(pc)

} catch(e) {
  console.log('Something went wrong! pc not created!!', e)
  // return;
  callback(null)
}

}

componentDidMount = () => {

this.socket = io.connect(
  this.serviceIP,
  {
    path: '/io/webrtc',
    query: {}
  }
)

this.socket.on('connection-success', data => {

  const status = data.peerCount > 1 ? `Total Connected Peers: ${data.peerCount}` : 'Waiting for other peers to connect'

  this.setState({
    status: status
  })
  this.getLocalStream()

  console.log("peerCount:"+data.peerCount)

})

this.socket.on('peer-disconnected', data => {
  console.log('peer-disconnected', data)

  const remoteStreams = this.state.remoteStreams.filter(stream => stream.id !== data.socketID)

  this.setState(prevState => {
    console.log("state-data",prevState)
    // check if disconnected peer is the selected video and if there still connected peers, then select the first
    const selectedVideo = prevState.selectedVideo.id === data.socketID && remoteStreams.length ? { selectedVideo: remoteStreams[0] } : null

    return {
      // remoteStream: remoteStreams.length > 0 && remoteStreams[0].stream || null,
      remoteStreams,
      ...selectedVideo,
    }
    }
  )
})

// this.socket.on('offerOrAnswer', (sdp) => {

//   this.textref.value = JSON.stringify(sdp)

//   // set sdp as remote description
//   this.pc.setRemoteDescription(new RTCSessionDescription(sdp))
// })

this.socket.on('online-peer', socketID => {
  console.log('connected peers ...', socketID)

  // create and send offer to the peer (data.socketID)
  // 1. Create new pc
  this.createPeerConnection(socketID, pc => {
    // 2. Create Offer
      if (pc)
        pc.createOffer(this.state.sdpConstraints)
          .then(sdp => {

            this.sendToPeer('offer', sdp, {
              local: this.socket.id,
              remote: socketID
            })
            pc.setLocalDescription(sdp)
      })
    })
})

this.socket.on('offer', data => {
  this.createPeerConnection(data.socketID, pc => {
  //  var tracks=this.state.localStream.getTracks();
    var newStream=new MediaStream(this.state.localStream)
    pc.addStream(newStream)
    //pc.addStream(this.state.localStream)
    // var newStream=new MediaStream(this.state.localStream)
    // var tracks=newStream.getTracks();
    // //console.log(tracks);
    //   pc.addTrack(tracks[0],newStream)
    //var tracks=this.state.localStream.getTracks();
    //console.log("audio  "+tracks[0]);
    //pc.addTrack(tracks[0],this.state.localStream)
    //this.state.localStream.getTrack().forEach(track=>pc.addTrack(track,this.state.localStream))
    pc.setRemoteDescription(new RTCSessionDescription(data.sdp)).then(() => {
      // 2. Create Answer
      pc.createAnswer(this.state.sdpConstraints)
        .then(sdp => {
         // console.log("socketid testing"+this.socket.id)
          this.sendToPeer('answer', sdp, {
            local: this.socket.id,
            remote: data.socketID
          })
          pc.setLocalDescription(sdp)
        })
    })
  })
})

this.socket.on('answer', data => {
  // get remote's peerConnection
  const pc = this.state.peerConnections[data.socketID]
  //console.log(data.sdp)
  pc.setRemoteDescription(new RTCSessionDescription(data.sdp)).then(()=>{})
})

this.socket.on('candidate', (data) => {
  // get remote's peerConnection
  const pc = this.state.peerConnections[data.socketID]

  if (pc)
    pc.addIceCandidate(new RTCIceCandidate(data.candidate))
})

// const pc_config = null

// const pc_config = {
//   "iceServers": [
//     // {
//     //   urls: 'stun:[STUN_IP]:[PORT]',
//     //   'credentials': '[YOR CREDENTIALS]',
//     //   'username': '[USERNAME]'
//     // },
//     {
//       urls : 'stun:stun.l.google.com:19302'
//     }
//   ]
// }

// https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection
// create an instance of RTCPeerConnection
// this.pc = new RTCPeerConnection(this.state.pc_config)

// triggered when a new candidate is returned
// this.pc.onicecandidate = (e) => {
//   // send the candidates to the remote peer
//   // see addCandidate below to be triggered on the remote peer
//   if (e.candidate) {
//     // console.log(JSON.stringify(e.candidate))
//     this.sendToPeer('candidate', e.candidate)
//   }
// }

// triggered when there is a change in connection state
// this.pc.oniceconnectionstatechange = (e) => {
//   console.log(e)
// }

// triggered when a stream is added to pc, see below - this.pc.addStream(stream)
// this.pc.onaddstream = (e) => {
//   this.remoteVideoref.current.srcObject = e.stream
// }

// this.pc.ontrack = (e) => {
//   debugger
//   // this.remoteVideoref.current.srcObject = e.streams[0]

//   this.setState({
//     remoteStream: e.streams[0]
//   })
// }

}

switchVideo = (_video) => { //console.log(_video) this.setState({ selectedVideo: _video }) }

render() {

//console.log(this.state.localStream)

const statusText = <div style={{ color: 'yellow', padding: 5 }}>{this.state.status}</div>

return (
  <div>
    <Video
      videoStyles={{
        zIndex:2,
        position: 'absolute',
        right:0,
        width: 200,
        height: 200,
        margin: 5,
        backgroundColor: 'black'
      }}
      // ref={this.localVideoref}
      videoStream={this.state.localStream}
      autoPlay>
    </Video>
    <Video
      videoStyles={{
        zIndex: 1,
        position: 'fixed',
        bottom: 0,
        minWidth: '100%',
        minHeight: '100%',
        backgroundColor: 'black'
      }}
      // ref={ this.remoteVideoref }
      videoStream={this.state.selectedVideo && this.state.selectedVideo.stream}
      autoPlay>
    </Video>
    <br />
    <div style={{
      zIndex: 3,
      position: 'absolute',
      margin: 10,
      backgroundColor: '#cdc4ff4f',
      padding: 10,
      borderRadius: 5,
    }}>
      { statusText }
    </div>
    <div>
      <Videos
        switchVideo={this.switchVideo}
        remoteStreams={this.state.remoteStreams}
      ></Videos>
    </div>
    <br />

    {/* <div style={{zIndex: 1, position: 'fixed'}} >
      <button onClick={this.createOffer}>Offer</button>
      <button onClick={this.createAnswer}>Answer</button>

      <br />
      <textarea style={{ width: 450, height:40 }} ref={ref => { this.textref = ref }} />
    </div> */}
    {/* <br />
    <button onClick={this.setRemoteDescription}>Set Remote Desc</button>
    <button onClick={this.addCandidate}>Add Candidate</button> */}
  </div>
)

} }

export default App;

[nawaabazmi]

take a look on yourself .. problem that i found is that if i set both audio and video constraint true then two mediastream will be generated one for audio and one for video. and when this pc.addstream calling while generating pc it calls both mediastream(audio and video) and that is the reason for twice rendering of remotevideo.......

[jamalag]

Thanks Ahmad

[jamalag]

take a look on yourself .. problem that i found is that if i set both audio and video constraint true then two mediastream will be generated one for audio and one for video. and when this pc.addstream calling while generating pc it calls both mediastream(audio and video) and that is the reason for twice rendering of remotevideo.......

Thanks, I will look into it - highly appreciated.

I will also compare and update with you code.

[nawaabazmi]

thanks . i know the problem the problem and i am working on the solution too

[nawaabazmi]

i have tried alot but couldn't find any solution for that twice video rendering

[nawaabazmi]

please let me know as soon as you find the solution

[jamalag]

Sure will do.

[nawaabazmi]

Have you found any error on that? or you suggest any changes?

[nawaabazmi]

hello i have resolved my issues just by adding filter in videos component and checking for the repeated media streams. i found another issue of echo can you suggest me any better way for doing so. i have used echoCancellation :true constraint but it didn't work

[alenthomas343]

I am facing an issue with your code, can anyone please help me. I am working with react native, nodes, webrtc. But I am unable to see the video of another person, it shows a black screen only.

[jamalag]

Hi nawaabazmi, I have also reworked the code to avoid repeated video thumbnails. The reason for that was due to audio and video tracks added separately. I will include this change in my next video any time soon may be in a couple of days.

  let _rVideos = nextProps.remoteStreams.map((rVideo, index) => {

    const _videoTrack = rVideo.stream.getTracks().filter(track => track.kind === 'video')
    console.log('tracks...', index, _videoTrack, rVideo.stream.getTracks())

    // let video = rVideo.stream.getTracks()[0].kind === 'video' && (
    let video = _videoTrack && (
      <Video
        videoStream={rVideo.stream}
        frameStyle={{ width: 120, float: 'left', padding: '0 3px' }}
        videoStyles={{
          cursor: 'pointer',
          objectFit: 'cover',
          borderRadius: 3,
          width: '100%',
        }}
        // muted // <--- remove
        autoplay
      />
    ) || <div></div>

    return (
      <div
        id={rVideo.name}
        onClick={() => this.props.switchVideo(rVideo)}
        style={{ display: 'inline-block' }}
        key={index}
      >
        {video}
      </div>
    )
  })

[jamalag]

I am facing an issue with your code, can anyone please help me. I am working with react native, nodes, webrtc. But I am unable to see the video of another person, it shows a black screen only.

Hi alenthomas343, are you having this problem...

• within two tabs/browsers on the same computer?
• within two browsers on two computers on the same network (LAN)?
• within two browsers on two computers on different networks?

did you follow my tutorials from scratch on YouTube? Because this code was an attempt to rewrite the code in YouTube to use React Hooks. https://www.youtube.com/watch?v=h2WkZ0h0-Rc&list=PL_YW-znSZ_dK365WaVuiBUN6FYc9_1hni&index=1

[alenthomas343]

I want to run the app on my android phone

On Mon, 18 May, 2020, 10:57 PM AMIR ESHAQ, notifications@github.com wrote:

I am facing an issue with your code, can anyone please help me. I am working with react native, nodes, webrtc. But I am unable to see the video of another person, it shows a black screen only.

Hi alenthomas343, are you having this problem...

• within two tabs/browsers on the same computer?
• within two browsers on two computers on the same network (LAN)?
• within two browsers on two computers on different networks?

did you follow my tutorials from scratch on YouTube? Because this code was an attempt to rewrite the code in YouTube to use React Hooks.

https://www.youtube.com/watch?v=h2WkZ0h0-Rc&list=PL_YW-znSZ_dK365WaVuiBUN6FYc9_1hni&index=1

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/jamalag/webrtc-part-5-React-Hooks/issues/2#issuecomment-630327847, or unsubscribe https://github.com/notifications/unsubscribe-auth/APTLB7FLDUXWHPF34BKUXFDRSFVZJANCNFSM4MS4KSQQ .

[jamalag]

I want to run the app on my android phone … On Mon, 18 May, 2020, 10:57 PM AMIR ESHAQ, @.***> wrote: I am facing an issue with your code, can anyone please help me. I am working with react native, nodes, webrtc. But I am unable to see the video of another person, it shows a black screen only. Hi alenthomas343, are you having this problem... - within two tabs/browsers on the same computer? - within two browsers on two computers on the same network (LAN)? - within two browsers on two computers on different networks? did you follow my tutorials from scratch on YouTube? Because this code was an attempt to rewrite the code in YouTube to use React Hooks. https://www.youtube.com/watch?v=h2WkZ0h0-Rc&list=PL_YW-znSZ_dK365WaVuiBUN6FYc9_1hni&index=1 — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#2 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/APTLB7FLDUXWHPF34BKUXFDRSFVZJANCNFSM4MS4KSQQ .

I have not tried the above fixes in android yet.

[alenthomas343]

Can you please help me sir, i know that you are a good programmer, according to me you are the only one who can help me. Can you please help me make a react native video call app, with nodejs, socket.io. Please kindly help me.

On Mon, 18 May, 2020, 11:11 PM AMIR ESHAQ, notifications@github.com wrote:

I want to run the app on my android phone … <#m-4607108528357421756> On Mon, 18 May, 2020, 10:57 PM AMIR ESHAQ, @.***> wrote: I am facing an issue with your code, can anyone please help me. I am working with react native, nodes, webrtc. But I am unable to see the video of another person, it shows a black screen only. Hi alenthomas343, are you having this problem... - within two tabs/browsers on the same computer? - within two browsers on two computers on the same network (LAN)? - within two browsers on two computers on different networks? did you follow my tutorials from scratch on YouTube? Because this code was an attempt to rewrite the code in YouTube to use React Hooks. https://www.youtube.com/watch?v=h2WkZ0h0-Rc&list=PL_YW-znSZ_dK365WaVuiBUN6FYc9_1hni&index=1 — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#2 (comment) https://github.com/jamalag/webrtc-part-5-React-Hooks/issues/2#issuecomment-630327847>, or unsubscribe https://github.com/notifications/unsubscribe-auth/APTLB7FLDUXWHPF34BKUXFDRSFVZJANCNFSM4MS4KSQQ .

I have not tried the above fixes in android yet.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/jamalag/webrtc-part-5-React-Hooks/issues/2#issuecomment-630335313, or unsubscribe https://github.com/notifications/unsubscribe-auth/APTLB7GURIVFZKASM2KMQGDRSFXM7ANCNFSM4MS4KSQQ .

[nawaabazmi]

Hello alenthomas343. I had this issue before check for 3 things 1- use turn for the ice candidate generation 2- check whether pc actually generated or not 3- const selectedVideo = prevState.selectedVideo.id === data.socketID && remoteStreams.length ? { selectedVideo: remoteStreams[0] } : null In this line sometimes prevState.selectedVideo is set null so here code is giving error

[alenthomas343]

Can you please show me your code which is working on android phones.

On Mon, 18 May, 2020, 11:20 PM Ahmad azmi, notifications@github.com wrote:

Hello alenthomas343. I had this issue before check for 3 things 1- use turn for the ice candidate generation 2- check whether pc actually generated or not 3- const selectedVideo = prevState.selectedVideo.id === data.socketID && remoteStreams.length ? { selectedVideo: remoteStreams[0] } : null In this line sometimes prevState.selectedVideo is set null so here code is giving error

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/jamalag/webrtc-part-5-React-Hooks/issues/2#issuecomment-630339710, or unsubscribe https://github.com/notifications/unsubscribe-auth/APTLB7DYSBCSWDCQBDLSBXDRSFYNZANCNFSM4MS4KSQQ .

[jamalag]

Can you please show me your code which is working on android phones. … On Mon, 18 May, 2020, 11:20 PM Ahmad azmi, @.***> wrote: Hello alenthomas343. I had this issue before check for 3 things 1- use turn for the ice candidate generation 2- check whether pc actually generated or not 3- const selectedVideo = prevState.selectedVideo.id === data.socketID && remoteStreams.length ? { selectedVideo: remoteStreams[0] } : null In this line sometimes prevState.selectedVideo is set null so here code is giving error — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#2 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/APTLB7DYSBCSWDCQBDLSBXDRSFYNZANCNFSM4MS4KSQQ .

Please look at this link from Rahul who managed to run the App on Android and then come back to this thread to resolve the issue that Rahul face. https://github.com/rahulbtops/webrtc

[alenthomas343]

I used this code, but mine is not working on my android phones. Is your app working on android devices perfectly, sir?

On Tue, 19 May, 2020, 8:21 AM AMIR ESHAQ, notifications@github.com wrote:

Can you please show me your code which is working on android phones. … <#m7935601247840947230> On Mon, 18 May, 2020, 11:20 PM Ahmad azmi, @.***> wrote: Hello alenthomas343. I had this issue before check for 3 things 1- use turn for the ice candidate generation 2- check whether pc actually generated or not 3- const selectedVideo = prevState.selectedVideo.id === data.socketID && remoteStreams.length ? { selectedVideo: remoteStreams[0] } : null In this line sometimes prevState.selectedVideo is set null so here code is giving error — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#2 (comment) https://github.com/jamalag/webrtc-part-5-React-Hooks/issues/2#issuecomment-630339710>, or unsubscribe https://github.com/notifications/unsubscribe-auth/APTLB7DYSBCSWDCQBDLSBXDRSFYNZANCNFSM4MS4KSQQ .

Please look at this link from Rahul who managed to run the App on Android and then come back to this thread to resolve the issue that Rahul face. https://github.com/rahulbtops/webrtc

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/jamalag/webrtc-part-5-React-Hooks/issues/2#issuecomment-630547456, or unsubscribe https://github.com/notifications/unsubscribe-auth/APTLB7HRLBFUL7Z7KOSB2CLRSHX3VANCNFSM4MS4KSQQ .

[alenthomas343]

My issue is that it is not showing me other person's video on android phone. Can you help me please

On Tue, 19 May, 2020, 8:35 AM Alen Thomas Nellary, alenthomas343@gmail.com wrote:

I used this code, but mine is not working on my android phones. Is your app working on android devices perfectly, sir?

On Tue, 19 May, 2020, 8:21 AM AMIR ESHAQ, notifications@github.com wrote:

Can you please show me your code which is working on android phones. … <#m_4357872041992691950_m7935601247840947230> On Mon, 18 May, 2020, 11:20 PM Ahmad azmi, @.***> wrote: Hello alenthomas343. I had this issue before check for 3 things 1- use turn for the ice candidate generation 2- check whether pc actually generated or not 3- const selectedVideo = prevState.selectedVideo.id === data.socketID && remoteStreams.length ? { selectedVideo: remoteStreams[0] } : null In this line sometimes prevState.selectedVideo is set null so here code is giving error — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#2 (comment) https://github.com/jamalag/webrtc-part-5-React-Hooks/issues/2#issuecomment-630339710>, or unsubscribe https://github.com/notifications/unsubscribe-auth/APTLB7DYSBCSWDCQBDLSBXDRSFYNZANCNFSM4MS4KSQQ .

Please look at this link from Rahul who managed to run the App on Android and then come back to this thread to resolve the issue that Rahul face. https://github.com/rahulbtops/webrtc

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/jamalag/webrtc-part-5-React-Hooks/issues/2#issuecomment-630547456, or unsubscribe https://github.com/notifications/unsubscribe-auth/APTLB7HRLBFUL7Z7KOSB2CLRSHX3VANCNFSM4MS4KSQQ .

[jamalag]

I used this code, but mine is not working on my android phones. Is your app working on android devices perfectly, sir? … On Tue, 19 May, 2020, 8:21 AM AMIR ESHAQ, @.> wrote: Can you please show me your code which is working on android phones. … <#m7935601247840947230> On Mon, 18 May, 2020, 11:20 PM Ahmad azmi, @.> wrote: Hello alenthomas343. I had this issue before check for 3 things 1- use turn for the ice candidate generation 2- check whether pc actually generated or not 3- const selectedVideo = prevState.selectedVideo.id === data.socketID && remoteStreams.length ? { selectedVideo: remoteStreams[0] } : null In this line sometimes prevState.selectedVideo is set null so here code is giving error — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#2 (comment) <#2 (comment)>>, or unsubscribe https://github.com/notifications/unsubscribe-auth/APTLB7DYSBCSWDCQBDLSBXDRSFYNZANCNFSM4MS4KSQQ . Please look at this link from Rahul who managed to run the App on Android and then come back to this thread to resolve the issue that Rahul face. https://github.com/rahulbtops/webrtc — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#2 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/APTLB7HRLBFUL7Z7KOSB2CLRSHX3VANCNFSM4MS4KSQQ .

I haven't tried it myself - but if you give me time to finish other stuff, I'll give it a shot soon.

[jamalag]

BTW, when you say Android do you mean ReactNative App or chrome browser in Android?

[alenthomas343]

Okay sir, take your time. But can you make it soon. I mean react native android app. I am working with it. I only need that one.

On Tue, 19 May, 2020, 9:34 AM AMIR ESHAQ, notifications@github.com wrote:

BTW, when you say Android do you mean ReactNative App or chrome browser in Android?

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/jamalag/webrtc-part-5-React-Hooks/issues/2#issuecomment-630565747, or unsubscribe https://github.com/notifications/unsubscribe-auth/APTLB7CEKVSFFPOGVQH2LRTRSIALZANCNFSM4MS4KSQQ .

[alenthomas343]

Can anyone please help me make a react native android app connecting to nodejs, socket.io for video call purpose getting both video and voice call for atleast 5 people. I can pay you money for the work you did. I will surely give the money, but please reply if anyone is interested.

On Tue, 19 May, 2020, 9:37 AM Alen Thomas Nellary, alenthomas343@gmail.com wrote:

Okay sir, take your time. But can you make it soon. I mean react native android app. I am working with it. I only need that one.

On Tue, 19 May, 2020, 9:34 AM AMIR ESHAQ, notifications@github.com wrote:

BTW, when you say Android do you mean ReactNative App or chrome browser in Android?

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/jamalag/webrtc-part-5-React-Hooks/issues/2#issuecomment-630565747, or unsubscribe https://github.com/notifications/unsubscribe-auth/APTLB7CEKVSFFPOGVQH2LRTRSIALZANCNFSM4MS4KSQQ .

[alenthomas678]

Hello Amir Eshaq, I used your code for coding my webrtc app, and Its totally working fine. And I am thankful to you. But I now need your help, can you please help me add peer real names along with their remote videos. If a new peer joins in, his name will also be shown in our screen along with his remote video. Can you please help me to implement that because I know you are an expert in this. I request your concern.

[nawaabazmi]

Hello alen, you can do this easily by passing query also on server side store the query in array along with peer I'd then you can use these data in any manner you want

[alenthomas678]

Thank you for your help Ahmad Azmi, it worked well.

[jamalag]

That's great Ahmad Azmi, with a few words made it easy for Alen Thomas to implement a needed feature.

[nawaabazmi]

Thank you amir you taught me webrtc

[alenthomas678]

Yeah we all are thankful to Amir. And we request Amir to do more and more videos on YouTube too.