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