I’m making a website that can livestream via webRTC. One client will publish their video from the camera and send it to the server. Another client who wants to watch will transmit the correct id of that livestream to the server to connect with each other and watch the lives. but now when another client wants to watch live, there is an error: DOMException: Failed to execute ‘setRemoteDescription’ on ‘RTCPeerConnection’: Failed to set remote answer sdp: Called in wrong state: stable
I not good at java so i dont know what wrong with this code. Can someone help me ?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Join Live Stream</title>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
</head>
<body>
<h1>Join Live Stream</h1>
<input type="text" id="idInput" placeholder="Enter Id">
<button id="joinButton">Join Stream</button>
<video id="remoteVideo" autoplay playsinline></video>
<script>
let peerConnection;
const signalingServerUrl = "http://localhost:8080";
document.getElementById('joinButton').addEventListener('click', joinStream);
async function joinStream() {
const id= document.getElementById('idInput').value;
if (!id) {
alert("Please enter a id");
return;
}
try {
const response = await fetch(`${signalingServerUrl}/watch/${id}`);
if (!response.ok) {
throw new Error('Failed to receive offer');
}
const data = await response.json();
await handleOffer(data.offer);
} catch (error) {
console.error('Error joining stream:', error);
}
}
async function handleOffer(offer) {
try {
if (!peerConnection) {
peerConnection = new RTCPeerConnection();
peerConnection.addEventListener('icecandidate', handleICECandidate);
peerConnection.addEventListener('track', handleTrack);
}
// Check if RTCPeerConnection is in a stable state
if (peerConnection.signalingState !== 'stable') {
console.log('Not in stable state, postponing setRemoteDescription');
// Handle the state as needed, perhaps by queuing the offer for later
return;
}
// Set remote description
await peerConnection.setRemoteDescription(new RTCSessionDescription(offer));
// Create answer
const answer = await peerConnection.createAnswer();
await peerConnection.setLocalDescription(answer);
// Send answer to signaling server
const answerData = {
license: document.getElementById('idInput').value,
sdp: peerConnection.localDescription
};
const response = await fetch(`${signalingServerUrl}/answer/${document.getElementById('idInput').value}`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(answerData)
});
if (!response.ok) {
throw new Error('Failed to send answer');
}
console.log('Answer sent successfully');
} catch (error) {
console.error('Error handling offer:', error);
}
}
function handleICECandidate(event) {
console.log('ICE candidate:', event.candidate);
}
function handleTrack(event) {
const remoteVideo = document.getElementById('remoteVideo');
if (remoteVideo.srcObject !== event.streams[0]) {
remoteVideo.srcObject = event.streams[0];
}
}
</script>
</body>
</html>