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

【问题标题】：WebRTC - change video stream in the middle of communicationWebRTC - 在通信过程中更改视频流
【发布时间】：2017-08-07 02:40:32
【问题描述】：

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

我发现我可以使用MediaStreamTrack.applyConstraints() 来更改视频属性，但是可以更改视频源吗？进一步了解如何将视频添加到现有的音频流中。

我现在只需要这个在 chrome 上工作。

【问题讨论】：

How to addTrack in MediaStream in WebRTC的可能重复

标签： javascript google-chrome video-streaming webrtc audio-streaming

【解决方案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 here 的文档

我有一个有效的 webrtc 会议解决方案，它支持使用这些类似步骤进行屏幕共享和屏幕录制。你可以去看看here

它在 Firefox 上开箱即用，但要使其在 chrome 上运行，您需要启用“Experimental Web Platform”标志（转到 chrome://flags/）

【讨论】：

【解决方案2】：

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

我能够通过以下步骤找到解决方案

移除当前流
添加新流
创建新报价

请注意，removeStream 已被弃用，不再包含在规范中，并且未在所有浏览器中实现。例如。这在 Firefox 中不起作用。 stream.stop() 也被弃用，取而代之的是 stream.getTracks().forEach(track => track.stop())

【讨论】：

请注意，removeStream 已被弃用，不再在规范中，也未在所有浏览器中实现。例如。这在 Firefox 中不起作用。 stream.stop() 也被弃用，取而代之的是 stream.getTracks().forEach(track => track.stop())。
感谢 jib .. 我的目标是让它现在可以在 chrome 中使用

【解决方案3】：

使用你的方法产生如下错误

代码如下：

  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)

【讨论】：

【解决方案4】：

代码如下：

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

【讨论】：

【解决方案5】：

在 addTrack 到 localPeerConnection 时获取 rtpSender

然后替换您需要的任何曲目

rtpSender.setTrack(camVideoTrack, true); //用于摄像头videoTrack

或

rtpSender.setTrack(screenShareTrack, true); //用于屏幕共享 videoTrack

【讨论】：