WebRTC avec la vidéo à distance PeerJS ne s'affiche pas sur Android

Question

J'utilise Ionic3 pour créer une application de terminal vidéo Android. Le videochat fonctionne parfaitement entre deux onglets sur mon navigateur, mais ne montre que la vidéo locale sur mon appareil Android (la vidéo à distance étant vide).

J'utilise PeerJS pour la connexion peer-to-peer dans mon index.html:

J'utilise le stunServer {url: « paralysant: stun.l.google.com: 19302 "} pour la connexion.

J'utilise les fonctions indiquées sur la page d'accueil: http://peerjs.com/ Mon service de configuration:

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 de mon service Peer WebRTC:

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(); 
     } 
    }); 
} 

Dans mes chat.ts, je utilisez ceci pour appeler la fonction depuis le service peer webrtc:

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

Answer 1

C'est susceptible d'être un problème d'autorisation. Vous devez lui accorder la permission d'utiliser la caméra.

Autorisation de caméra - Votre application doit demander l'autorisation d'utiliser une caméra de périphérique .

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

Voir

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