我有一个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
标记来显示本地和远程流。
先谢了。
1条答案
按热度按时间wlsrxk511#
您永远不会处理
icecandidate_multiple
事件,该事件用于交换将调用addIceCandidate
方法的ICE候选者。如果不交换ICE候选者(即要使用的IP地址和端口),则无法建立连接。