2017-09-02 4 views
0

私はビデオコールモジュールでangle4でアプリを作っています。私は2つのモジュール - ホストとクライアントを実装しており、それらの間のビデオコールは正常に動作しています。 ここでは、通常、スカイプやハングアウトのような標準的なコミュニケーターのように、カメラとマイクをオン/オフする2つのボタンを作りたいと思います。PeerJS + Angular4 - ストリーミング中にカメラとマイクをオン/オフにする方法

これはどのように実装しますか?

私はこのコードを表示しますが、これは機能しません。

HOST:マイクをオンにする

this.peer = new Peer({key: 'xxxxxxxxxxxxxx'}); 

setTimeout(() => { 
    this.id = this.peer.id; 
},3000); 


var navig = <any>navigator; 
navig.getUserMedia = (navig.getUserMedia || navig.webkitGetUserMedia || navig.mozGetUserMedia || navig.msGetUserMedia); 

this.peer.on('call', (call) => { 
    navig.getUserMedia({video: true, audio: true}, (stream) => 
    { 
    this.stream = stream; 
    myVideoElement.src=URL.createObjectURL(stream); 
    myVideoElement.play(); 
    call.answer(stream); 
    call.on('stream', function(remotestream){ 
     videoElement.src = URL.createObjectURL(remotestream); 
     videoElement.play(); 
    }) 
    },(err) => { 
    console.log('Failed to get stream', err); 
    }) 
}); 

HOSTのFUNC:

switchMicrophone(){ 

console.log(this.stream); 

var navig = <any>navigator; 
navig.getUserMedia = (navig.getUserMedia || navig.webkitGetUserMedia || navig.mozGetUserMedia || navig.msGetUserMedia); 
navig.video = false; 

// var track = this.stream.getTracks()[0]; 
// track.stop(); 
// track = this.stream.getTracks()[1]; 
// track.stop(); 

}

は残念ながらthis.streamが私の理由のためにいくつかの未知のために定義されていない、他のコードにはありませんワーキング。私は何をすべきか?

答えて

0

私の問題の答えが見つかりました。 以下のコードは、多分これは誰かを助けるでしょう。楽しい!私は2つのビデオ要素を持っている。この例では

- クライアントからのビデオのための1つ、および1つは、プレビュー映像

switchMicrophone(){ 
    this.isMicrophoneEnabled = !this.isMicrophoneEnabled; 
    this.stream.getAudioTracks()[0].enabled = this.isMicrophoneEnabled; 
    } 

    switchCamera(){ 
    this.isCameraEnabled = !this.isCameraEnabled; 
    this.stream.getVideoTracks()[0].enabled = this.isCameraEnabled; 
    this.previewStream.getVideoTracks()[0].enabled = this.isCameraEnabled; 
    } 


this.navig.getUserMedia({video: true, audio: false}, (stream)=> { 
    this.previewStream = stream; 
    this.previewVideoElement.nativeElement.src = URL.createObjectURL(stream); 
    this.previewVideoElement.nativeElement.play(); 
}, function(err) { 
    console.log('Failed to get stream', err); 
}); 

this.peer.on('call', (call)=> { 
    this.navig.getUserMedia({video: true, audio: true}, (stream)=> { 
    this.stream = stream; 
    call.answer(stream); 
    call.on('stream', (remotestream)=>{ 
     this.videoElement.nativeElement.src = URL.createObjectURL(remotestream); 
     this.videoElement.nativeElement.play(); 
    }) 
    }, function(err) { 
    console.log('Failed to get stream', err); 
    }) 
}); 
として、私だけを表示します
関連する問題