import { io } from "https://cdn.socket.io/4.3.2/socket.io.esm.min.js";
const socket = io('http://localhost:4000');
const pc = () => {
const configuration = { iceServers: [
{
urls: "stun:openrelay.metered.ca:80",
},
{
urls: "turn:openrelay.metered.ca:80",
username: "openrelayproject",
credential: "openrelayproject",
},
{
urls: "turn:openrelay.metered.ca:443",
username: "openrelayproject",
credential: "openrelayproject",
},
{
urls: "turn:openrelay.metered.ca:443?transport=tcp",
username: "openrelayproject",
credential: "openrelayproject",
},
] }
return new RTCPeerConnection(configuration);
}
const peerConnection = pc();
const remoteVideo = document.querySelector('#remoteVideo');
const localVideo = document.querySelector('#localVideo');
await navigator.mediaDevices.getUserMedia({video: true, audio: true}).then(stream => {
localVideo.srcObject = stream;
stream.getTracks().forEach(track => {
peerConnection.addTrack(track, stream);
});
});
socket.on('answer', async answer => {
console.log(peerConnection.signalingState, peerConnection.connectionState)
const remoteDesc = new RTCSessionDescription(answer);
await peerConnection.setRemoteDescription(remoteDesc);
});
const icecs = [];
socket.on('iceCandidate', async function onice(iceCandidate) {
if(iceCandidate) icecs.push(iceCandidate);
if(icecs.length === 0)return;
try{
await peerConnection.addIceCandidate(icecs[0]);
icecs.shift();
console.log('ice accepted');
}catch(er) {
console.log('ice collected');
setTimeout(onice,200);
}
});
peerConnection.addEventListener('icecandidate', event => {
console.log(event);
if (event.candidate) {
socket.emit('message', {type: 'iceCandidate', message: event.candidate});
}
});
peerConnection.addEventListener('connectionstatechange', event => {
console.log('PeerState: ', peerConnection.connectionState)
});
peerConnection.addEventListener('track', async (event) => {
console.log(event.streams);
const [remoteStream] = event.streams;
remoteVideo.srcObject = remoteStream;
});
document.querySelector('#listen').onclick = () => {
socket.on('offer', async offer => {
await peerConnection.setRemoteDescription(new RTCSessionDescription(offer));
const answer = await peerConnection.createAnswer();
await peerConnection.setLocalDescription(answer);
socket.emit('message', {type: 'answer', message: answer});
});
}
document.querySelector('#makeCall').onclick = async() => {
const offer = await peerConnection.createOffer();
await peerConnection.setLocalDescription(offer);
socket.emit('message', {type: 'offer', message: offer});
}let ddd;
document.querySelectorAll( '.quest__gaps_gap' ).forEach( d => {
d.draggable = true;
d.ondragstart = e => ddd = e.target;
} );
document.querySelectorAll( '.quest__gaps_target' ).forEach( s => {
s.ondragover = e => {
e.preventDefault();
}
s.ondrop = e => {
const s = e.target;
if( s.tagName !== 'SPAN' ) return;
e.preventDefault();
s.appendChild( ddd );
}
} );