├── .gitignore
├── package.json
├── server.js
├── index.html
├── public
└── vite.svg
├── src
├── style.css
└── main.js
└── README.md
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "openai-webrtc-play",
3 | "private": true,
4 | "version": "0.0.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite",
8 | "server": "node server.js",
9 | "build": "vite build",
10 | "preview": "vite preview"
11 | },
12 | "dependencies": {
13 | "cors": "^2.8.5",
14 | "express": "^4.21.2"
15 | },
16 | "devDependencies": {
17 | "vite": "^5.0.8"
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/server.js:
--------------------------------------------------------------------------------
1 | import express from "express";
2 | import cors from "cors";
3 |
4 | const app = express();
5 | app.use(cors());
6 |
7 | // 获取 ephemeral token 的端点
8 | app.get("/session", async (req, res) => {
9 | try {
10 | const response = await fetch(
11 | "https://api.openai.com/v1/realtime/sessions",
12 | {
13 | method: "POST",
14 | headers: {
15 | Authorization: `Bearer ${process.env.OPENAI_API_KEY}`,
16 | "Content-Type": "application/json",
17 | },
18 | body: JSON.stringify({
19 | model: "gpt-4o-realtime-preview-2024-12-17",
20 | voice: "verse",
21 | }),
22 | }
23 | );
24 |
25 | if (!response.ok) {
26 | throw new Error(`HTTP error! status: ${response.status}`);
27 | }
28 |
29 | const data = await response.json();
30 | res.json(data);
31 | } catch (error) {
32 | console.error("Error:", error);
33 | res.status(500).json({ error: error.message });
34 | }
35 | });
36 |
37 | const PORT = process.env.PORT || 3000;
38 | app.listen(PORT, () => {
39 | console.log(`Server is running on port ${PORT}`);
40 | });
41 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | WebRTC Audio Chat
8 |
32 |
33 |
34 |
35 |
WebRTC Audio Chat
36 |
Ready to connect...
37 |
38 |
39 |
[${timestamp}] ${message}
`;
95 | console.log(message);
96 | }
97 |
98 | startBtn.addEventListener("click", async () => {
99 | try {
100 | if (dataChannel && dataChannel.readyState === "open") {
101 | const event = {
102 | type: "response.create",
103 | response: {
104 | modalities: ["text", "audio"],
105 | instructions: "Hello, how can I help you today?",
106 | },
107 | };
108 | dataChannel.send(JSON.stringify(event));
109 | updateStatus("Started conversation");
110 | startBtn.disabled = true;
111 | stopBtn.disabled = false;
112 | }
113 | } catch (error) {
114 | updateStatus(`Error starting conversation: ${error.message}`);
115 | }
116 | });
117 |
118 | stopBtn.addEventListener("click", () => {
119 | try {
120 | if (dataChannel && dataChannel.readyState === "open") {
121 | dataChannel.send(JSON.stringify({ type: "response.stop" }));
122 | updateStatus("Stopped conversation");
123 | startBtn.disabled = false;
124 | stopBtn.disabled = true;
125 | }
126 | } catch (error) {
127 | updateStatus(`Error stopping conversation: ${error.message}`);
128 | }
129 | });
130 |
131 | // 初始化应用
132 | init();
133 |
--------------------------------------------------------------------------------