即使我添加了ice候选并且状态已连接并且连接稳定且展位浏览器已连接，ontrack也不会treggerd！但在轨道上不起作用我使用Spring Boot作为信号服务器，他正在做他的工作来改变浏览器之间的报价和答案，我也使用chrom webrtc内部检查我的对等点的状态，它已连接，但我没有了解为什么未触发 on track 我需要帮助
const [socketUrl, setSocketUrl] = useState('ws://localhost:8085/socket');
const { sendMessage, lastMessage, readyState } = useWebSocket(socketUrl);
const [peerConnection, setPeerConnection] = useState(null);
const [dataChannel, setDataChannel] = useState(null);
const [mediaStream, setMediaStream] = useState(null);
const [receivedMessage, setReceivedMessage] = useState('');
const [display,setDisplay] = useState(false)
const [videoElement, setVideoElement] = useState(null);
useEffect(() => {
if (readyState === WebSocket.OPEN) {
console.log("WebSocket connection opened");
const configuration = {
iceServers: [
{
urls: 'stun:stun.l.google.com:19302'
},
{
urls: 'turn:10.158.29.39:3478?transport=udp',
credential: 'XXXXXXXXXXXXX',
username: 'XXXXXXXXXXXXXXX'
},
{
urls: 'turn:10.158.29.39:3478?transport=tcp',
credential: 'XXXXXXXXXXXXX',
username: 'XXXXXXXXXXXXXXX'
}
],
offerToReceiveAudio: true,
offerToReceiveVideo: true
};
var pc = new RTCPeerConnection(configuration);
console.log('creating a peer connection ')
setPeerConnection(pc);
setDisplay(true);
// Corrected the variable name here
var dataChannel = pc.createDataChannel("dataChannel", { reliable: true });
console.log("Data channel created:", dataChannel);
pc.ondatachannel = function(event) {
console.log("Received data channel:", event.channel);
var dataChannel = event.channel;
dataChannel.onopen = function(event) {
console.log("Data channel is open");
// You can now send messages through this data channel
console.log('sending message')
dataChannel.send("Hello from receiver!");
};
dataChannel.onerror = function(error) {
console.error("Data channel error:", error);
};
dataChannel.onclose = function() {
console.log("Data channel is closed");
};
};
dataChannel.onmessage = function(event) {
console.log('you have a new message')
console.log("Received message:", event.data);
// Handle the received message here
};
function sendMessageThroughDataChannel(message) {
if (dataChannel && dataChannel.readyState === "open") {
dataChannel.send(message);
console.log('message send')
} else {
console.error("Data channel is not open or not initialized.");
}
}
pc.onerror = function(error) {
console.error("Peer connection error:", error);
};
pc.onicecandidate = (event) => {
console.log("ICE candidate:", event.candidate);
if (event.candidate) {
console.log("New ICE candidate:", event.candidate);
// Optionally, log the entire SDP
console.log("Current SDP:", pc.localDescription);
sendMessage(JSON.stringify({ event: "candidate", data: event.candidate }));
} else {
console.log("No more ICE candidates.");
}
};
pc.oniceerror = function(error) {
console.error("ICE error:", error);
};
const remoteVideo = document.querySelector('#remoteVideo');
pc.addEventListener('track', async (event) => {
console.log('hey')
const [remoteStream] = event.streams;
remoteVideo.srcObject = remoteStream;
});
pc.oniceconnectionstatechange = async (event) => {
console.log(`ICE connection state changed to ${pc.iceConnectionState}`);
if (pc.iceConnectionState === 'connected') {
const localStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
localStream.getTracks().forEach(track => {
pc.addTrack(track, localStream);
});
checkIfStreamAdded(pc);
}
};
function checkIfStreamAdded(pc) {
// Get the senders (tracks) that are currently being sent
const senders = pc.getSenders();
// Check if there are any senders (tracks) being sent
if (senders.length > 0) {
console.log("Streams are added to the peer connection.");
} else {
console.log("No streams are added to the peer connection.");
}
}
// Create offer
pc.createOffer()
.then((offer) => {
console.log("Creating offer...");
pc.setLocalDescription(offer);
sendMessage(JSON.stringify({ event: "offer", data: offer }));
})
.catch((error) => {
console.error("Failed to create offer", error);
});
}
else {
console.error("WebSocket connection not open!");
}
}, [readyState, sendMessage]);
useEffect(() => {
if (lastMessage && lastMessage.data) {
const message = JSON.parse(lastMessage.data);
console.log('Received message:', message.data);
switch (message.event) {
case "offer":
console.log("Setting remote description for offer...");
console.log('here', message.data)
peerConnection.setRemoteDescription(new RTCSessionDescription(message.data))
.then(() => {
console.log("Creating answer...");
return peerConnection.createAnswer();
})
.then((answer) => {
console.log('Sending answer');
peerConnection.setLocalDescription(answer);
sendMessage(JSON.stringify({ event: "answer", data: answer }));
})
.catch((error) => {
console.error("Failed to create answer", error);
});
break;
case "answer":
console.log("Setting remote description for answer...");
peerConnection.setRemoteDescription(new RTCSessionDescription(message.data));
break;
case "candidate":
console.log("Adding ICE candidate...");
peerConnection.addIceCandidate(new RTCIceCandidate(message.data));
break;
default:
console.log('Default case');
setReceivedMessage(message.data);
break;
}
}
}, [lastMessage, peerConnection]);
我也尝试做一个直播应用程序
当
iceconnectionstateconnected在调用 createOffer 之前移动
addTrack