117 lines
3.4 KiB
JavaScript
117 lines
3.4 KiB
JavaScript
const videoElement = document.getElementById('video');
|
|
let localConnection;
|
|
let wsConnection;
|
|
let mediaConstraints = { video: true, audio: true };
|
|
let iceCandidates = [];
|
|
|
|
const wsUrl = "ws://localhost:8080/api/v1/preview/5a59a94f-264a-4d24-9e57-8a9be0ecbdbd/KALANI-3.LOCAL%20%28OBS%29"; // Replace with your WebSocket URL
|
|
const peerConnectionConfig = {
|
|
iceServers: [{ urls: "stun:stun.l.google.com:19302" }]
|
|
};
|
|
|
|
// Initialize WebSocket connection
|
|
function initWebSocket() {
|
|
wsConnection = new WebSocket(wsUrl);
|
|
|
|
wsConnection.onopen = () => {
|
|
console.log('Connected to WebSocket');
|
|
createOffer();
|
|
};
|
|
|
|
wsConnection.onmessage = async (message) => {
|
|
const signal = JSON.parse(message.data);
|
|
|
|
if (signal.type === 'offer') {
|
|
handleOffer(signal);
|
|
} else if (signal.type === 'answer') {
|
|
handleAnswer(signal);
|
|
} else if (signal.type === 'ice') {
|
|
handleIceCandidate(signal);
|
|
}
|
|
};
|
|
}
|
|
|
|
// Create an SDP offer
|
|
async function createOffer() {
|
|
localConnection = new RTCPeerConnection(peerConnectionConfig);
|
|
localConnection.onicecandidate = handleIceCandidateEvent;
|
|
localConnection.ontrack = (event) => {
|
|
videoElement.srcObject = event.streams[0];
|
|
};
|
|
|
|
const stream = await navigator.mediaDevices.getUserMedia(mediaConstraints);
|
|
stream.getTracks().forEach(track => localConnection.addTrack(track, stream));
|
|
|
|
const offer = await localConnection.createOffer();
|
|
await localConnection.setLocalDescription(offer);
|
|
|
|
const signalMessage = {
|
|
type: 'offer',
|
|
sdp: offer.sdp
|
|
};
|
|
|
|
wsConnection.send(JSON.stringify(signalMessage));
|
|
}
|
|
|
|
// Handle SDP offer from the server
|
|
function handleOffer(signal) {
|
|
const remoteDescription = new RTCSessionDescription({
|
|
type: 'offer',
|
|
sdp: signal.sdp
|
|
});
|
|
|
|
localConnection.setRemoteDescription(remoteDescription)
|
|
.then(() => {
|
|
return localConnection.createAnswer();
|
|
})
|
|
.then((answer) => {
|
|
return localConnection.setLocalDescription(answer);
|
|
})
|
|
.then(() => {
|
|
const answerMessage = {
|
|
type: 'answer',
|
|
sdp: localConnection.localDescription.sdp
|
|
};
|
|
wsConnection.send(JSON.stringify(answerMessage));
|
|
})
|
|
.catch(console.error);
|
|
}
|
|
|
|
// Handle SDP answer from the server
|
|
function handleAnswer(signal) {
|
|
const remoteDescription = new RTCSessionDescription({
|
|
type: 'answer',
|
|
sdp: signal.sdp
|
|
});
|
|
|
|
localConnection.setRemoteDescription(remoteDescription).catch(console.error);
|
|
}
|
|
|
|
// Handle ICE candidates
|
|
function handleIceCandidateEvent(event) {
|
|
if (event.candidate) {
|
|
const iceMessage = {
|
|
type: 'ice',
|
|
ice: {
|
|
candidate: event.candidate.candidate,
|
|
sdpMid: event.candidate.sdpMid,
|
|
sdpMLineIndex: event.candidate.sdpMLineIndex
|
|
}
|
|
};
|
|
wsConnection.send(JSON.stringify(iceMessage));
|
|
}
|
|
}
|
|
|
|
// Handle ICE candidate from the server
|
|
function handleIceCandidate(signal) {
|
|
const candidate = new RTCIceCandidate({
|
|
candidate: signal.ice.candidate,
|
|
sdpMid: signal.ice.sdpMid,
|
|
sdpMLineIndex: signal.ice.sdpMLineIndex
|
|
});
|
|
|
|
localConnection.addIceCandidate(candidate).catch(console.error);
|
|
}
|
|
|
|
// Initialize the connection
|
|
initWebSocket();
|