WebRTC - 在通信过程中更改视频流

Question

我的目标是在webrtc网络应用程序中的视频或音频通话过程中启用屏幕共享。

我发现可以使用MediaStreamTrack.applyConstraints()来更改视频属性，但是否可能更改视频源？另外，如何将视频添加到现有音频流中。

目前，我需要在Chrome浏览器上实现此功能。

- Abdullah Al Noman

---

可能是如何在WebRTC中添加MediaStream中的Track的重复问题。 - jib

Answer 1

今天起，针对您的情况，我认为更好的方法是使用RTCRtpSender.replaceTrack方法。

假设您的摄像头流名称为“camStream”，您可以使用以下方法获取所需的RTCRtpSender对象：

var camVideoTrack = camStream.getVideoTracks()[0];
var camAudioTrack = camStream.getAudioTracks()[0];
var videoSender = peerConnection.addTrack(camVideoTrack, camStream);
var audioSender = peerConnection.addTrack(camAudioTrack, camStream);

最后两行代码添加了连接的视频和音频功能。

假设屏幕流名称为 "screenStream"，你可以像这样从摄像头切换到屏幕分享视频：

var screenVideoTrack = screenStream.getVideoTracks()[0];
videoSender.replaceTrack(screenVideoTrack);

不需要更换音频轨道，因为我们只关心改变视觉而保持音频输入不变。

使用这种方法的好处是不需要对等方重新协商以切换视频源。

这种方法的另一个好处是您不需要停止camStream。当您结束屏幕共享时，可以使用以下方式切换回视频源：

videoSender.replaceTrack(camStream.getVideoTracks()[0]);

您可以查看replaceTrack的文档这里。

我有一个工作中的webrtc会议解决方案，支持屏幕共享和屏幕录制，使用类似的步骤。您可以在这里查看它。

它可以在Firefox上直接使用，但要在Chrome上使用，您需要启用“实验性Web平台”标志（转到chrome://flags/）。

- Anthony Anyanwu

---

嗨，我正在使用 RTCRtpSender 替换我的本地轨道，但是我的 localRtcVIew 不再显示新的轨道了。 - famfamfam

Answer 2

localStream.stop();
peerconnection.removeStream(localStream);

我通过以下步骤找到了解决方案：

1. 移除当前流

2. 添加新的流

3. 创建新的提供者

请注意，removeStream已经被弃用，不再在规范中，并且并非所有浏览器都实现了它。例如，在Firefox中无法正常工作。stream.stop()也已弃用，建议使用stream.getTracks().forEach(track => track.stop())。

- Abdullah Al Noman

---

请注意，removeStream已过时，在规范中不再存在，并且并非所有浏览器都实现了它。例如，在Firefox中将无法使用。stream.stop()也已被弃用，建议使用stream.getTracks().forEach(track => track.stop())。 - jib

谢谢jib.. 我的目标是现在让它在chrome中可行。 - Abdullah Al Noman

Answer 3

代码如下：

  addMixedVideo: function(stream, peer) {
    if (!stream) return;
    
    var videoTrack = options.attachStream.getVideoTracks()[0];
    var sender = peer.getSenders().find(function(s) {
        return s.track.kind == videoTrack.kind;
    });
    console.log('addMixedVideo -- found sender: ', sender);
    
    var videoTrackMixer = stream.getVideoTracks()[0];
    sender.replaceTrack(videoTrackMixer);
},

- johnny xu

---

或许加入一些背景信息会更有帮助。此外，这里的“options”是什么意思？参数又代表什么？ - innocent

Answer 4

请使用您的方法生成以下错误：

代码如下：

  var camVideoTrack = options.attachStream.getVideoTracks()[0];
  var camAudioTrack = options.attachStream.getAudioTracks()[0];
  var videoSender = peer.addTrack(camVideoTrack, options.attachStream);
  var audioSender = peer.addTrack(camAudioTrack, options.attachStream);
  var videoTrack = stream.getVideoTracks()[0];
  videoSender.replaceTrack(videoTrack);

结果：

  adapter-latest.js:629 Uncaught (in promise) DOMException: Failed to execute 'addTrack' on 'RTCPeerConnection': A sender already exists for the track.
    at RTCPeerConnection.addTrack (https://education.abc.dev:9559/adapter-latest.js:629:31)

- johnny xu

Answer 5

在将轨道添加到本地对等连接时获取rtpSender

然后替换您需要的任何轨道

rtpSender.setTrack(camVideoTrack, true); //用于相机视频轨道

或者

rtpSender.setTrack(screenShareTrack, true); //用于屏幕共享视频轨道

- Gv Ravi

---

当设置Track时，我的本地RtcView不再显示。 - famfamfam