in components/app.tsx [30:96]
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(`${BASE_URL}?model=${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);
}
}