WebRTC with PeerJS remote video not showing on Android

Question

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

I'm using PeerJS for the peer-to-peer connection in my index.html:

I'm using the stunServer {url: "stun:stun.l.google.com:19302"} for the connection.

I'm using the functions shown on the home page: http://peerjs.com/ My config service:

import {Injectable} from '@angular/core';

@Injectable()
export class WebRTCConfig {

peerServerPort: number = 9000;

key:string = '<my peer id>';

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:
        // > PeerJS:  ERROR Error: The cloud server currently does not support HTTPS. 
        // > 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 <MediaStreamConstraints> {
            audio: this.audio,
            video: this.video
        }
    }
}

Snippet of my Peer WebRTC service:

createPeer(userId: string = '') {
    // Create the Peer object where we create and receive connections.
    this._peer = new Peer(/*userId,*/ this.config.getPeerJSOption());
    setTimeout(()=> {
        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) => {
        // Answer the call automatically (instead of prompting user) for demo purposes
        this.answer(call);

    });
    this._peer.on('error', (err) => {
        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) => {
        // Set your video displays
        this.myEl.src = URL.createObjectURL(stream);

        this._localStream = stream;
        // this._step2();
        if (this.onCalling) {
            this.onCalling();
        }
    }, (error) => { 
        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) => {
        this.otherEl.src = URL.createObjectURL(stream);
    });

    // UI stuff
    this._existingCall = call;
    // $('#their-id').text(call.peer);
    call.on('close', () => {
        // this._step2();
        if (this.onCalling) {
            this.onCalling();
        }
    });
}

In my chat.ts, I use this to call the function from the peer webrtc service:

call() {
this.webRTCService.call(this.calleeId);
}

Mikkel Mikkel · Accepted Answer · 2017-10-20T20:54:34

It's likely to be a permission problem. You need to grant it permission to use the camera.

Camera Permission - Your application must request permission to use a device camera.

<uses-permission android:name="android.permission.CAMERA" />

See

https://developer.android.com/guide/topics/media/camera.html

WebRTC with PeerJS remote video not showing on Android

1 Answers