2017-10-13 49 views
0

Ionic3을 사용하여 Android Videochat 응용 프로그램을 만듭니다. videochat은 브라우저의 두 탭 사이에서 완벽하게 작동하지만 내 안드로이드 장치의 로컬 비디오 만 표시합니다 (원격 비디오는 비어 있음).Android에서 PeerJS 원격 비디오가 표시되지 않는 WebRTC

나는 stunServer {URL을 사용하고 있습니다 : "기절 : stun.l.google.com을 :

내 index.html을에서 피어 - 투 - 피어 연결 PeerJS을 사용하고 19302 "} 연결. 나는 홈 페이지에 표시된 기능을 사용하고

: http://peerjs.com/ 내 구성 서비스 : 내 피어의 WebRTC 서비스의

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

코드 조각 : 내 chat.ts에서

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

, I 이를 사용하여 피어 webrtc 서비스에서 함수를 호출하십시오.

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

를 참조하십시오. – SteveFest

+0

Thanks @SteveFest fixed – Shanks

답변

0

It 's 허가 문제가 될 가능성이있다. 카메라 사용 권한을 부여해야합니다.

카메라 권한 - 응용 프로그램에서 장치 카메라 사용 권한을 요청해야합니다.

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

는 코드의 일부 비트 포맷하지

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

+0

모든 권한을 추가했습니다. Android의 최신 버전에서 작동하는 것으로 보입니다. 나는 그것이 Crosswalk의 문제라고 생각한다. – Shanks

+0

그들은 보안 요구 사항을 증가시켰다. 그래서 나는 당신이 당신의 설정에서 그것을 가질 필요가있을 것이라고 생각한다. 아마도 코드에서도 마찬가지 일 것이다. – Mikkel