PeerJS + Angular4 - 如何打開/關閉相機和麥克風，而流式傳輸

我使用一些視頻通話模塊在angular4中製作應用程序。我已經實現了兩個模塊 - 主機和客戶端，並且他們之間的視頻通話工作正常。現在我想製作一個兩個按鈕，可以打開和關閉相機和麥克風，就像通常在Skype或環聊等標準通訊器中一樣。PeerJS + Angular4 - 如何打開/關閉相機和麥克風，而流式傳輸

這是怎麼實現的？

我將顯示我的代碼，但這是行不通的。

主持人：

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是不確定的某些未知的我個理由，其他代碼不用加工。我該怎麼辦？

來源

2017-09-02 Maciej Wójcik

我找到了我的問題的答案。下面的代碼，也許這會幫助別人。請享用！

在這個例子中，我有兩個視頻元素 - 一個來自客戶端的視頻，以及一個顯示只有我，作爲一個預覽視頻

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

來源

2017-09-02 21:02:10

PeerJS + Angular4 - 如何打開/關閉相機和麥克風，而流式傳輸

回答

相關問題