in challenge4/frontend/components/voice-mode.tsx [22:91]
async function startSession() {
try {
if (!isSessionStarted) {
setIsSessionStarted(true)
// Get an ephemeral session token
const session = await fetch('/api/session').then(response =>
response.json()
)
const sessionToken = session.client_secret.value
const sessionId = session.id
console.log('Session id:', sessionId)
// Create a peer connection
const pc = new RTCPeerConnection()
// Set up to play remote audio from the model
if (!audioElement.current) {
audioElement.current = document.createElement('audio')
}
audioElement.current.autoplay = true
pc.ontrack = e => {
if (audioElement.current) {
audioElement.current.srcObject = e.streams[0]
}
}
const stream = await navigator.mediaDevices.getUserMedia({
audio: true
})
stream.getTracks().forEach(track => {
const sender = pc.addTrack(track, stream)
if (sender) {
tracks.current = [...(tracks.current || []), sender]
}
})
// Set up data channel for sending and receiving events
const dc = pc.createDataChannel('oai-events')
setDataChannel(dc)
// Start the session using the Session Description Protocol (SDP)
const offer = await pc.createOffer()
await pc.setLocalDescription(offer)
const sdpResponse = await fetch(
`${REALTIME_BASE_URL}?model=${REALTIME_MODEL}`,
{
method: 'POST',
body: offer.sdp,
headers: {
Authorization: `Bearer ${sessionToken}`,
'Content-Type': 'application/sdp'
}
}
)
const answer: RTCSessionDescriptionInit = {
type: 'answer',
sdp: await sdpResponse.text()
}
await pc.setRemoteDescription(answer)
peerConnection.current = pc
}
} catch (error) {
console.error('Error starting session:', error)
}
}