not working in android browsers

[jamalag]

not working in android browsers

[jamalag]

I am humbled. You guys are also teaching me, so thank you too!

[alenthomas678]

Ok I will surely install it. Thank you sir.☺️☺️😍

[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]

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.......

[nawaabazmi]

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

[jamalag]

Sure will do.

[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, ***@***.***> 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 <#2 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/APTLB7CEKVSFFPOGVQH2LRTRSIALZANCNFSM4MS4KSQQ> .

[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

[jamalag]

I remember there was such issue and it may be due to no disconnected functionality, especially when mobile connects and disconnects - the peers number increases. If you haven't progressed in the videos to part 7, then I suggest you watch those videos because somewhere in the videos I handle the disconnections.

[alenthomas678]

Sir, Can you please help me to implement mediasoup SFU with my webrtc application. From the beginning onwards, your teaching videos helped me a lot and I understand your teaching very well. I request your concern for this. Please..🙏

[jamalag]

I saw you just liked my video on LinkedIn

[jamalag]

I really dont look at WhatsApp msg, mostly once a day. Too many messages there

[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 <[email protected]> Reply-To: jamalag/webrtc-part-5-React-Hooks <[email protected]> Date: Tuesday, April 28, 2020 at 1:59 PM To: jamalag/webrtc-part-5-React-Hooks <[email protected]> Cc: Subscribed <[email protected]> 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 GitHub<#2 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AHOLA6KVESGEPK4JMOAAAJDRO4KP7ANCNFSM4MS4KSQQ>.

[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;

[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]

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

[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, ***@***.***> 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> .

[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, ***@***.***> 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) <#2 (comment)>>, 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 <#2 (comment)>, 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, ***@***.***> 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> .

[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, ***@***.***> wrote: Can you please show me your code which is working on android phones. … <#m_7935601247840947230_> 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> .

[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, <[email protected]> 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, ***@***.***> wrote: > Can you please show me your code which is working on android phones. > … <#m_4357872041992691950_m_7935601247840947230_> > 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> > . >

[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. … <#m_7935601247840947230_> 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]

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, <[email protected]> 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, ***@***.***> 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 > <#2 (comment)>, > 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.

[alenthomas678]

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

[alenthomas678]

I have an issue, even though no users are connected, there shows peer numbers on screen, ie., If a total of 2 peers are connected, the no. of connected peers on screen is sometimes 3 or more than that. I don't find a solution for this, guys please help me.

[alenthomas678]

Ok Thanks, I will check it🤩

[alenthomas678]

Sir, Is it possible to implement Janus webrtc with your code.

[jamalag]

Janus is a bit involving but I am working on mediasoup SFU

[jamalag]

I am spending a few hours daily to start from scratch. is your environment on Windows or Linux?

[alenthomas678]

Mine is windows

[jamalag]

I don't think mediasoup can run on windows but with WSL you can do it without installing VM - I will demo that as this time I will be on windows

[alenthomas678]

Sir, I want to learn it, please then is it okay if I am on windows.

[jamalag]

yes, if you can't setup WSL, then you will need to have virtual environment like VirtualBox. But with Windows 10, latest build should be ok. I suggest you look at configuring WSL on your Windows 10 - you will be able to install Ubuntu.

check this link for instructions ...
https://www.youtube.com/watch?v=uWNpXOT-Zbo&list=PLhfrWIlLOoKNMHhB39bh3XBpoLxV3f0V9&index=4

[alenthomas678]

Sir, I have setup the WSL installation and now my windows 10 has WSL. It's working fine. What I want to do after that.

[alenthomas678]

Sir, can you give me your email id.

[jamalag]

Alenthomas, it's best we wait for the video as I am still researching for the video especially SFU. To install Ubuntu simply go to Windows store and search for it and install.

[jamalag]

you can connect via linkedIn

[alenthomas678]

Ok, when you start working with it, will you help me also implementing that. My system is setup with Ubuntu. Till then, can you share me some resources which you are referring for its implementation. Please, don't feel that I am disturbing you, only because I want to make that. Kindly please do concern.

[alenthomas678]

Can we connect via WhatsApp or telegram please this is my number [phone].
Please🙏

[jamalag]

It's not disturbing but it's difficult to focus on two separate ends. Are you not able to connect via LinkedIn? many YouTube viewers are connecting with me via LinkedIn. Simply search for my name Amir Eshaq

[jamalag]

resources am looking at ...

• https://mediasoup.org/
• https://github.com/versatica/mediasoup/network/dependents
• https://github.com/mkhahani/mediasoup-sample-app

[alenthomas678]

Yeah I connect with you now actually on LinkedIn and Twitter but I am not able to message you.

[alenthomas678]

Please can I connect you via WhatsApp

[jamalag]

I just sent you a connect request

[alenthomas678]

Yeah it's true, Thank you. I am connected with you🤗🤗