title: WebRTC with PeerJS remote video not showing on Android
body: <p>I'm using Ionic3 to build an android videochat application. 
  The videochat works perfectly between two tabs on my browser, but only shows the local video on my android device (the remote video being blank).</p>
  
  <p>I'm using PeerJS for the peer-to-peer connection in my index.html:</p>
  
  
  
  <p>I'm using the stunServer {url: "stun:stun.l.google.com:19302"} for the connection. </p>
  
  <p>I'm using the functions shown on the home page: <a href="http://peerjs.com/" rel="nofollow noreferrer">http://peerjs.com/</a>
  My config service:</p>
  
  <pre><code>import {Injectable} from '@angular/core';
  
  @Injectable()
  export class WebRTCConfig {
  
  peerServerPort: number = 9000;
  
  key:string = '&lt;my peer id&gt;';
  
  stun: string = 'stun.l.google.com:19302';
  
  stunServer = {
      url: 'stun:' + this.stun
  };
  
  getPeerJSOption() {
      return {
          // Set API key for cloud server (you don't need this if you're running your own.
          key: this.key,
  
          // Set highest debug level (log everything!).
          debug: 3,
          // Set it to false because of:
          // &gt; PeerJS:  ERROR Error: The cloud server currently does not support HTTPS. 
          // &gt; Please run your own PeerServer to use HTTPS.
          secure: false,
  
          config: {
              iceServers: [
                  this.stunServer/*,
                  this.turnServer*/
              ]
          }
      };
  }
  
  /**********************/
  
  
  
   audio: boolean = true;
      video: boolean = false;
  
      getMediaStreamConstraints(): MediaStreamConstraints {
          return &lt;MediaStreamConstraints&gt; {
              audio: this.audio,
              video: this.video
          }
      }
  }
  </code></pre>
  
  <p>Snippet of my Peer WebRTC service:</p>
  
  <pre><code>createPeer(userId: string = '') {
      // Create the Peer object where we create and receive connections.
      this._peer = new Peer(/*userId,*/ this.config.getPeerJSOption());
      setTimeout(()=&gt; {
          console.log(this._peer.id);
          this.myid = this._peer.id;
      }, 3000)
  }
  
  myCallId() {
      return this.myid;
  }
  
  answer(call) {
      call.answer(this._localStream);
      this._step2(call);
  }
  
  init(myEl: HTMLMediaElement, otherEl: HTMLMediaElement, onCalling: Function) {
      this.myEl = myEl;
      this.otherEl = otherEl;
      this.onCalling = onCalling;
  
      // Receiving a call
      this._peer.on('call', (call) =&gt; {
          // Answer the call automatically (instead of prompting user) for demo purposes
          this.answer(call);
  
      });
      this._peer.on('error', (err) =&gt; {
          console.log(err.message);
          // Return to step 2 if error occurs
          if (this.onCalling) {
              this.onCalling();
          }
          // this._step2();
      });
  
      this._step1();
  }
  
  call(otherUserId: string) {
      // Initiate a call!
      var call = this._peer.call(otherUserId, this._localStream);
  
      this._step2(call);
  }
  
  endCall() {
      this._existingCall.close();
      // this._step2();
      if (this.onCalling) {
          this.onCalling();
      }
  }
  
  private _step1() {
      // Get audio/video stream
      navigator.getUserMedia({ audio: true, video: true }, (stream) =&gt; {
          // Set your video displays
          this.myEl.src = URL.createObjectURL(stream);
  
          this._localStream = stream;
          // this._step2();
          if (this.onCalling) {
              this.onCalling();
          }
      }, (error) =&gt; { 
          console.log(error);
      });
  }
  
  private _step2(call) {
      // Hang up on an existing call if present
      if (this._existingCall) {
          this._existingCall.close();
      }
  
      // Wait for stream on the call, then set peer video display
      call.on('stream', (stream) =&gt; {
          this.otherEl.src = URL.createObjectURL(stream);
      });
  
      // UI stuff
      this._existingCall = call;
      // $('#their-id').text(call.peer);
      call.on('close', () =&gt; {
          // this._step2();
          if (this.onCalling) {
              this.onCalling();
          }
      });
  }
  </code></pre>
  
  <p>In my chat.ts, I use this to call the function from the peer webrtc service:</p>
  
  <pre><code>call() {
  this.webRTCService.call(this.calleeId);
  }
  </code></pre>