WebRTC 暂停和恢复流

Question

我正在尝试使用 WebRTC 构建一个 Web 应用程序，当某些事件触发时需要暂停/恢复视频/音频流。我已经尝试过

getTracks()[0].stop()

但我不知道如何恢复流。对此有什么建议吗？谢谢

Answer 1

getTracks()[0].stop()

是永久的。

请使用

getTracks()[0].enabled = false

代替。取消暂停

getTracks()[0].enabled = true

。

这会将您的视频替换为黑色，将音频替换为静音。

尝试一下（对于 Chrome 使用 https fiddle）：

var pc1 = new RTCPeerConnection(), pc2 = new RTCPeerConnection();

navigator.mediaDevices.getUserMedia({ video: true, audio: true })
  .then(stream => pc1.addStream(video1.srcObject = stream))
  .catch(log);

var mute = () => video1.srcObject.getTracks().forEach(t => t.enabled = !t.enabled);

var add = (pc, can) => can && pc.addIceCandidate(can).catch(log);
pc1.onicecandidate = e => add(pc2, e.candidate);
pc2.onicecandidate = e => add(pc1, e.candidate);

pc2.onaddstream = e => video2.srcObject = e.stream;
pc1.onnegotiationneeded = e =>
  pc1.createOffer().then(d => pc1.setLocalDescription(d))
  .then(() => pc2.setRemoteDescription(pc1.localDescription))
  .then(() => pc2.createAnswer()).then(d => pc2.setLocalDescription(d))
  .then(() => pc1.setRemoteDescription(pc2.localDescription))
  .catch(log);

var log = msg => div.innerHTML += "<br>" + msg;

<video id="video1" height="120" width="160" autoplay muted></video>
<video id="video2" height="120" width="160" autoplay></video><br>
<input type="checkbox" onclick="mute()">mute</input><div id="div"></div>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

PeerConnections 在这种静音状态下基本上停止发送数据包，因此效率很高。

Answer 2

你应该尝试使用重新协商，我相信 Chrome 和 Firefox 中的差异仍然存在：

• 在 chrome 中，您只需在

  addStream

  对象上调用

  removeStream

  或

  PeerConnection

  即可添加/删除流，然后创建和交换

  sdp

  。

• 在firefox中，没有直接的

  removeStream

  ，需要使用RTCRtpSender和

  addTrack

  和

  removeTrack

  方法，可以看看这个问题

Answer 3

下面的代码可以在 Mac 和 Windows Chrome 117 版本之后完美运行。

在每个条件下，包括选项卡（有或没有音频）、窗口或全屏（有或没有音频）。

冻结在最后一个屏幕并快速恢复。

const pc = new RTCPeerConnection(servers);

...

const pause=()=>{
    pc.getSenders().forEach(sender=>{
        console.log(sender.track.kind+' pause');//audio(if it exists) and video
        const parameters=sender.getParameters();
        parameters.encodings[0].active=false;
        sender.setParameters(parameters);
    });
};

const resume=()=>{
    pc.getSenders().forEach(sender=>{
        console.log(sender.track.kind+' resume');
        const parameters=sender.getParameters();
        parameters.encodings[0].active=true;
        sender.setParameters(parameters);
    });
};