在Firefox中静音/取消静音各个WebRTC对等连接

时间:2016-08-13 03:29:05

标签: google-chrome firefox webrtc

在我的应用程序中,我有多个开放的对等连接,我希望能够在对等连接级别上静音麦克风,而不是全局(如here所述)。

Chrome 非常简单:

  • 静音时调用removeStream
  • 取消静音时调用addStream

否定:我了解到我们正朝着addTrack / removeTrack世界迈进,因此这个解决方案与其他浏览器和未来不兼容。

Firefox 根本不起作用:

  • removeTrack / addTrack需要重新协商,这是不可接受的,因为需要时间
  • replaceTrack不需要重新协商,我的想法是将一个空的MediaStreamTrack用于静音,我可以用来替换以前的MediaStreamTrack。知道怎么做吗?

或者,有关可行的Firefox解决方案 /更酷的Chrome解决方案/统一方法的任何想法?

1 个答案:

答案 0 :(得分:1)

在Firefox(以及Chrome和未来)中执行此操作的方法是克隆曲目,为您提供独立的track.enabled控件:

var track1, track2;

navigator.mediaDevices.getUserMedia({audio: true}).then(stream => {
  var clone = stream.clone();
  track1 = stream.getAudioTracks()[0];
  track2 = clone.getAudioTracks()[0];
})

var toggle = track => track.enabled = !track.enabled;

尝试以下操作(在Chrome中使用https fiddle):

var track1, track2;

navigator.mediaDevices.getUserMedia({audio: true}).then(stream => {
  var clone = stream.clone();
  track1 = stream.getAudioTracks()[0];
  track2 = clone.getAudioTracks()[0];
  return Promise.all([spectrum(stream), spectrum(clone)]);
}).catch(e => console.log(e));

var toggle = track => track && (track.enabled = !track.enabled);

var spectrum = stream => {
  var audioCtx = new AudioContext();
  var analyser = audioCtx.createAnalyser();
  var source = audioCtx.createMediaStreamSource(stream);
  source.connect(analyser);

  var canvas = document.createElement("canvas");
  var canvasCtx = canvas.getContext("2d");
  canvas.width = window.innerWidth/2 - 20;
  canvas.height = window.innerHeight/2 - 20;
  document.body.appendChild(canvas);

  var data = new Uint8Array(canvas.width);
  canvasCtx.strokeStyle = 'rgb(0, 125, 0)';

  setInterval(() => {
    canvasCtx.fillStyle = "#a0a0a0";
    canvasCtx.fillRect(0, 0, canvas.width, canvas.height);

    analyser.getByteFrequencyData(data);
    canvasCtx.lineWidth = 2;
    data.forEach((y, x) => {
      y = canvas.height - (y / 128) * canvas.height / 4;
      var c = Math.floor((x*255)/canvas.width);
      canvasCtx.fillStyle = "rgb("+c+",0,"+(255-x)+")";
      canvasCtx.fillRect(x, y, 2, canvas.height - y)
    });

    analyser.getByteTimeDomainData(data);
    canvasCtx.lineWidth = 5;
    canvasCtx.beginPath();
    data.forEach((y, x) => {
      y = canvas.height - (y / 128) * canvas.height / 2;
      x ? canvasCtx.lineTo(x, y) : canvasCtx.moveTo(x, y);
    });
    canvasCtx.stroke();
    var bogus = source; // avoid GC or the whole thing stops
  }, 1000 * canvas.width / audioCtx.sampleRate);
};
<button onclick="toggle(track1)">Mute A</button>
<button onclick="toggle(track2)">Mute B</button><br>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

然后将两个轨道馈送到不同的对等连接。这也适用于视频静音。