diff --git a/examples/p2p-webrtc/voice-agent/index.html b/examples/p2p-webrtc/voice-agent/index.html index 0692f5b7c..4ee386627 100644 --- a/examples/p2p-webrtc/voice-agent/index.html +++ b/examples/p2p-webrtc/voice-agent/index.html @@ -24,27 +24,44 @@ let connected = false let peerConnection = null - /*const waitForIceGatheringComplete = async (pc) => { + const waitForIceGatheringComplete = async (pc, timeoutMs = 5000) => { if (pc.iceGatheringState === 'complete') return; + console.log("Waiting for ICE gathering to complete..."); return new Promise((resolve) => { + let timeoutId; const checkState = () => { + console.log("icegatheringstatechange:", pc.iceGatheringState); if (pc.iceGatheringState === 'complete') { - pc.removeEventListener('icegatheringstatechange', checkState); + cleanup(); resolve(); } }; + const onTimeout = () => { + console.warn(`ICE gathering timed out after ${timeoutMs} ms.`); + cleanup(); + resolve(); + }; + const cleanup = () => { + pc.removeEventListener('icegatheringstatechange', checkState); + clearTimeout(timeoutId); + }; pc.addEventListener('icegatheringstatechange', checkState); + timeoutId = setTimeout(onTimeout, timeoutMs); }); - }*/ + }; + const createSmallWebRTCConnection = async (audioTrack) => { - const pc = new RTCPeerConnection() + const config = { + iceServers: [{ urls: ["stun:stun.l.google.com:19302"] }], + }; + const pc = new RTCPeerConnection(config) pc.ontrack = e => audioEl.srcObject = e.streams[0] // SmallWebRTCTransport expects to receive both transceivers pc.addTransceiver(audioTrack, { direction: 'sendrecv' }) pc.addTransceiver('video', { direction: 'sendrecv' }) await pc.setLocalDescription(await pc.createOffer()) - //await waitForIceGatheringComplete(pc) + await waitForIceGatheringComplete(pc) const offer = pc.localDescription const response = await fetch('/api/offer', { body: JSON.stringify({ sdp: offer.sdp, type: offer.type}), @@ -57,9 +74,14 @@ } const connect = async () => { + _onConnecting() const audioStream = await navigator.mediaDevices.getUserMedia({audio: true}) peerConnection= await createSmallWebRTCConnection(audioStream.getAudioTracks()[0]) + peerConnection.oniceconnectionstatechange = () => { + console.log("oniceconnectionstatechange", peerConnection?.iceConnectionState) + } peerConnection.onconnectionstatechange = () => { + console.log("onconnectionstatechange", peerConnection?.connectionState) let connectionState = peerConnection?.connectionState if (connectionState === 'connected') { _onConnected() @@ -69,6 +91,12 @@ } } + const _onConnecting = () => { + statusEl.textContent = "Connecting" + buttonEl.textContent = "Disconnect" + connected = true + } + const _onConnected = () => { statusEl.textContent = "Connected" buttonEl.textContent = "Disconnect"