diff --git a/webRTC-test/script.js b/webRTC-test/script.js new file mode 100644 index 0000000..1331ddf --- /dev/null +++ b/webRTC-test/script.js @@ -0,0 +1,117 @@ +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();