WebRTC mit PeerJS Remote-Video nicht auf Android angezeigt

Question

Ich benutze Ionic3, um eine Android-Videochat-Anwendung zu bauen. Der Videochat funktioniert perfekt zwischen zwei Tabs in meinem Browser, zeigt aber nur das lokale Video auf meinem Android-Gerät an (das Remote-Video ist leer).

Ich verwende PeerJS für die Peer-to-Peer-Verbindung in meinem index.html:

Ich bin mit dem Stunserver {url: „betäuben: stun.l.google.com: 19302 "} für die Verbindung.

ich die Funktionen auf der Homepage gezeigt bin mit: http://peerjs.com/ Meine 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 meiner 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 meinem chat.ts, ich Verwenden Sie dies, um die Funktion vom Peer-webrtc-Service aus aufzurufen:

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

Answer 1

Es ist wahrscheinlich ein Genehmigungsproblem. Sie müssen die Erlaubnis erteilen, die Kamera zu verwenden.

Kameraberechtigung - Ihre Anwendung muss die Verwendung einer Gerätekamera anfordern.

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

Siehe

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