javascript - 在 react-native-webrtc 中连接的对等点之间的正在进行的音频流中添加视频流

Question

我有一个应用程序，我在其中实现了 web ( Reactjs ) 和移动 ( React Native ) 之间的音频/视频调用。我正在使用react-native-webrtc移动端对等方。连接音频呼叫并创建对等连接后，音频流可以完美运行。当我在音频通话期间切换到视频通话并且我设备上的摄像头打开时，现有的流不会更新以适应音频和视频流。我正在寻找一种解决方案，我可以在其中即时在音频和视频通话之间切换并相应地更新 webRTC 流。

Reactjs 代码：获取音频流并将其设置为localStream

getStream = (options) => {
navigator.getUserMedia =
  navigator.getUserMedia ||
  navigator.webkitGetUserMedia ||
  navigator.mozGetUserMedia;
navigator.getUserMedia(
  { audio: true, video: false },
  (stream) => {
    console.log("getusermedia event obj", stream);
    console.log(stream.getTracks());
    this.localGetTracks();
    if (this.localVideo.current !== null) {
      this.localVideo.current.srcObject = stream;
      this.localStream = stream;
    }
  },
  (error) => {
    console.log("User Media Error", error);
  }
)};

Reactjs 代码：创建新的对等连接并localStream在其中添加流，其中包括音频为真和视频为假

newPeerConnection = () => {
window.RTCPeerConnection =
  window.mozRTCPeerConnection ||
  window.webkitRTCPeerConnection ||
  window.RTCPeerConnection;
let peerConn = new RTCPeerConnection({
  iceServers: turnServer,
});
peerConn.onicecandidate = (evt) => {
  if (evt.candidate) {
    this.props.connection.invoke(
      "addIceCandidate",
      parseInt(this.props.ticket.id),
      JSON.stringify({
        type: "candidate",
        sdpMLineIndex: evt.candidate.sdpMLineIndex,
        sdpMid: evt.candidate.sdpMid,
        candidate: evt.candidate.candidate,
      })
    );
  } else {
    console.log("End of candidates.");
    this.setState(
      {
        videoState: true,
        end_call: true,
        call_status: "Connected",
      },
      () => this.props._handleCallConnected(true)
    );

  }
  this.forceUpdate();
};
peerConn.addStream(this.localStream);
peerConn.addEventListener(
  "addstream",
  (stream) => {
    console.log("remoteStream on addstream", stream);
    this.remoteVideo.current.srcObject = stream.stream;

  },
  false
);

this.setState({
  peerConn: peerConn,
})};

React-native 代码：在添加新流时订阅事件侦听器，它会侦听此事件eventListener并将即将到来的流添加到remoteStream

 peerConn.addEventListener(
  'addstream',
  (stream) => {
    console.log(`AddStreamListen`);

    console.log('remoteStream added', stream);

    InCallManager.setForceSpeakerphoneOn(false);
    this.setState({
      isSpeakerEnabled: false,
    });

    this.setState({
      remoteStream: stream,
      showAudioCallTimer: true,
    });
  },
  false,
);

Reactjs 代码：添加一个新的流，其中音频和视频都为 true

getVideoStream = () => {
navigator.getUserMedia =
  navigator.getUserMedia ||
  navigator.webkitGetUserMedia ||
  navigator.mozGetUserMedia;
navigator.getUserMedia(
  { audio: true, video: true, mirror: true },
  (stream) => {
    this.localStream = stream;
    this.localVideo.current.srcObject = this.localStream;
    this.state.peerConn.addStream(this.localStream);
  },
  (error) => {
    console.log("error", error);
  }
)};

但是eventListener移动代码不听我添加的第二个流，音频为真，视频为真，前一个流继续，视频没有显示

标签： javascriptreactjsreact-nativewebrtcrtcpeerconnection