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

Question

我正在用一些視頻通話模塊在angular4中制作應用程序。 我已經實現了兩個模塊-主機和客戶端，它們之間的視頻通話運行良好。 現在，我想制作兩個按鈕來打開和關閉相機和麥克風，就像在Skype或hangout這樣的標准通訊器中通常一樣。

如何實施呢？

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

主辦：

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

將麥克風打開的主機功能：

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，其他代碼無法正常工作。 我該怎么辦？

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