使用WebRTC将远程流显示为黑屏的React本地组视频呼叫

xoshrz7s  于 2023-11-21  发布在  React
关注(0)|答案(1)|浏览(235)

我有一个React Native应用程序,包括群组视频通话。我正在使用'react-native-webrtc'包中的'RTCPeerConnection'。
在页面加载,我已经启动了本地流和套接字的报价,答案和icecandidate。当用户点击开始调用功能RTCPeerConnection将被创建,添加本地流到peerconnection,创建报价,设置本地描述并将报价发送给套接字中的其他用户。
下面是用户开始调用时的代码

createOffer = async() => {
const pc = new RTCPeerConnection({
  host: PEER_SERVER_HOST,
  path: PEER_SERVER_PATH,
  secure: PEER_SECURE,
  port: PEER_SERVER_PORT,
  iceServers: [
    { urls: ['stun:stun.l.google.com:19302', 'stun:stun2.l.google.com:19302'] },
    { urls: 'stun:global.stun.twilio.com:3478?transport=udp' },
  ],
});
const stream = await mediaDevices.getUserMedia({ audio: true, video: true });
stream.getTracks().forEach((track) => {
    pc.addTrack(track, stream);
});
this.setState({ localStream: stream });

pc.onicecandidate = (event) => {
  if (event.candidate) {
    // alert(`Sending ICE candidate to ${userId}: ${event.candidate}`);
    this.socket.emit('icecandidate_multiple', { candidate: event.candidate, userId: this.state.userId, roomId: this.state.roomId });
  }
};

pc.ontrack = (event) => {
  const remoteStream = new MediaStream();
  
  event.streams[0].getTracks().forEach((track) => {
      remoteStream.addTrack(track);
  });
  
    this.setState({
      remoteStreams:  event.streams[0]
    });
    alert(JSON.stringify( event.streams[0]));
};

pc.onaddstream = (event) => {
  alert("On Add Remote Stream");
}

pc.onconnectionstatechange = (event) => {
  alert(`Connection state changed to ${peerConnectionRef.current.connectionState}`);
};

// Set up the iceConnectionState change handler
pc.oniceconnectionstatechange = this.handleIceConnectionStateChange;

const offer = await pc.createOffer();
await pc.setLocalDescription(offer);

this.setState({
  peerConnections: pc
});

this.socket.emit('offer_multiple', { offer, userId: this.state.userId, roomId: this.state.roomId });

字符串
};
当远程用户通过套接字接收到offer时,将创建一个单独的RTCPeerConnection,添加本地流,使用接收到的offer设置远程描述,创建应答,使用应答设置本地描述并将应答发送回被叫用户。
下面是用户收到呼叫的代码

handleOffer = async(offer, userId) => {
const pc = new RTCPeerConnection({
  host: PEER_SERVER_HOST,
  path: PEER_SERVER_PATH,
  secure: PEER_SECURE,
  port: PEER_SERVER_PORT,
  iceServers: [
    { urls: ['stun:stun.l.google.com:19302', 'stun:stun2.l.google.com:19302'] },
    { urls: 'stun:global.stun.twilio.com:3478?transport=udp' },
  ],
});
// await pc.addStream(this.state.localStream);
// const { localStream } = this.state;
// localStream.getTracks().forEach((track) => {
//     pc.addTrack(track, localStream);
// });

alert("11111");
const stream = await mediaDevices.getUserMedia({ audio: true, video: true });
stream.getTracks().forEach((track) => {
    pc.addTrack(track, stream);
});
this.setState({ localStream: stream });
alert("2222222222");
pc.onicecandidate = (event) => {
  if (event.candidate) {
    // alert(`Sending ICE candidate to ${userId}: ${event.candidate}`);
    this.socket.emit('icecandidate_multiple', { candidate: event.candidate, userId: this.state.userId, roomId: this.state.roomId });
  }
};

pc.ontrack = (event) => {
  const remoteStream = new MediaStream();
  
  event.streams[0].getTracks().forEach((track) => {
      remoteStream.addTrack(track);
  });
  
    this.setState({
      remoteStreams:  event.streams[0]
    });
    alert(JSON.stringify( event.streams[0]));
};

pc.onaddstream = (event) => {
  alert("On Add Remote Stream");
}

pc.onconnectionstatechange = (event) => {
  alert(`Connection state changed to ${peerConnectionRef.current.connectionState}`);
};

// Set up the iceConnectionState change handler
pc.oniceconnectionstatechange = this.handleIceConnectionStateChange;

await pc.setRemoteDescription(new RTCSessionDescription(offer));
const answer = await pc.createAnswer();
await pc.setLocalDescription(answer);

this.setState({
  peerConnections: pc
});

this.socket.emit('answer_multiple', { answer: answer, userId, roomId: this.state.roomId });


};
现在,所有的报价和答案都已创建并接收。问题现在与远程视频流有关。在onTrack函数中,获取流并添加到远程流状态变量。在控制台上,该值确实来自remotestream。
但是,在设备中,远程视频显示为黑屏。本地流正确显示。你能告诉我我在哪里工作或必须修改什么才能使远程流显示吗?
我已经使用RTCView标记来显示本地和远程流。
先谢了。

wlsrxk51

wlsrxk511#

您永远不会处理icecandidate_multiple事件,该事件用于交换将调用addIceCandidate方法的ICE候选者。如果不交换ICE候选者(即要使用的IP地址和端口),则无法建立连接。

相关问题