Val Town Code SearchReturn to Val Town

5[hello-realtime.val.run](https://hello-realtime.val.run), or via SIP by calling 425-800-0042.
6
7This demo shows off the new SIP API, the new all-in-one WebRTC API, and the new
8server-side websocket interface.
9
10If you remix the app, you'll just need to pop in your own `OPENAI_API_KEY` (from
11[platform.openai.com](https://platform.openai.com)), and if you want SIP, the `OPENAI_SIGNING_SECRET`.
12
23   - observer established to monitor session
24
25## API Endpoints
26- `GET /` - serves the WebRTC-based app
27- `POST /rtc` - creates a new WebRTC-based Realtime API session
28- `POST /sip` - handles an incoming Realtime API SIP call
29- `POST /observer` - internal endpoint to establish a Realtime API websocket for session control
30
31## Project Structure
39    |── rtc.ts              # WebRTC session setup
40    |── sip.ts              # SIP webhook handling and session setup
41    └── utils.ts            # Realtime API session configuration and helpers
42```
43

8observer.post("/:callId", async (c) => {
9  const callId = c.req.param("callId");
10  const url = `wss://api.openai.com/v1/realtime?call_id=${callId}`;
11  const ws = new WebSocket(url, { headers: makeHeaders() });
12  ws.on("open", () => {

4    <meta charset="utf-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1" />
6    <title>OpenAI Realtime API Voice Agent</title>
7    <style>
8      :root {

17```
18
19If you want to use an apiToken as a password:
20
21```ts

72    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
73    <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
74    <link rel="preconnect" href="https://fonts.googleapis.com">
75    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
76    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
77    <script>
78        function onOpenCvReady() {
325            }
326        };
327        const API_URL = '${sourceUrl}';
328
329        // --- UTILITIES ---
475                analysisCanvas.getContext('2d').drawImage(App.image.img, 0, 0, width, height);
476                const imageDataUrl = analysisCanvas.toDataURL('image/jpeg', 0.9);
477                const response = await fetch(API_URL, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ image: imageDataUrl }) });
478                if (!response.ok) { throw new Error((await response.json()).error || 'AI analysis failed.'); }
479                const result = await response.json();

72    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
73    <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
74    <link rel="preconnect" href="https://fonts.googleapis.com">
75    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
76    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
77    <script>
78        function onOpenCvReady() {
325            }
326        };
327        const API_URL = '${sourceUrl}';
328
329        // --- UTILITIES ---
475                analysisCanvas.getContext('2d').drawImage(App.image.img, 0, 0, width, height);
476                const imageDataUrl = analysisCanvas.toDataURL('image/jpeg', 0.9);
477                const response = await fetch(API_URL, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ image: imageDataUrl }) });
478                if (!response.ok) { throw new Error((await response.json()).error || 'AI analysis failed.'); }
479                const result = await response.json();

10  
11  // Connect to OpenAI WebSocket for this call
12  const wsUrl = `wss://api.openai.com/v1/realtime?call_id=${callId}`;
13  const ws = new WebSocket(wsUrl, {
14    headers: makeHeaders(),

1# hello-transcription
2
3Real-time speech transcription using OpenAI's Realtime API - a demonstration of transcription-only mode without AI responses.
4
5## Features
14## How It Works
15
16This app uses OpenAI's Realtime API in transcription-only mode:
171. Your voice is captured via WebRTC
182. Audio is streamed to OpenAI's transcription service
426. Click "Stop" to end the session
43
44## API Endpoints
45
46- `GET /` - Serves the transcription interface
51
52Set in your Val Town environment:
53- `OPENAI_API_KEY` - Your OpenAI API key (required)
54
55## Local Development
66
671. Fork/remix this val on Val Town
682. Add your `OPENAI_API_KEY` to Val Town secrets
693. Your app will be available at `https://[your-val-name].val.run`
70
71## Technical Details
72
73The app uses OpenAI's Realtime API in transcription mode:
74- Session type: `transcription` (not `realtime`)
75- Audio format: PCM16
85## Credits
86
87Built with OpenAI's Realtime API for transcription-only use cases.

1# Hello-Transcription - OpenAI Realtime API Transcription Demo
2
3## 🎯 Project Overview
4
5Hello-Transcription demonstrates the transcription-only mode of OpenAI's Realtime API. Unlike the conversational mode, this implementation focuses purely on speech-to-text conversion without generating AI responses, making it ideal for subtitles, live captions, meeting transcriptions, and other transcription-focused use cases.
6
7**Created:** September 2, 2025  
8**Platform:** Val Town  
9**API:** OpenAI Realtime API (Transcription Mode)  
10**Key Feature:** Real-time streaming transcription with multiple model support
11
14- **Runtime:** Deno (Val Town platform)
15- **Framework:** Hono (lightweight web framework)
16- **Transcription:** OpenAI Realtime API in transcription mode
17- **Connection:** WebRTC with data channel for events
18- **Frontend:** Vanilla JavaScript with split-view interface
39### Transcription vs Conversation Mode
40
41The Realtime API supports two distinct modes:
42
431. **Conversation Mode** (`type: "realtime"`):
299   ```bash
300   # Create .env file
301   echo "OPENAI_API_KEY=sk-..." > .env
302   
303   # Install Deno
347**Solutions:**
348- Check microphone permissions
349- Verify OPENAI_API_KEY is set
350- Check browser console for errors
351- Ensure WebRTC connection established
391
392### Current Implementation
393- API key stored in environment variable
394- No authentication on endpoints
395- No rate limiting
414
4152. **Set Environment**
416   - Add `OPENAI_API_KEY` in Val Town secrets
417
4183. **Deploy**
425
426### Environment Variables
427- `OPENAI_API_KEY` - Required for OpenAI API access
428
429## 📝 Future Enhancements
4586. **Integration**
459   - Webhook support
460   - Real-time API streaming
461   - Database storage
462
465### Documentation
466- [OpenAI Realtime Transcription Guide](https://platform.openai.com/docs/guides/realtime-transcription)
467- [Realtime API Reference](https://platform.openai.com/docs/api-reference/realtime)
468- [Voice Activity Detection Guide](https://platform.openai.com/docs/guides/realtime-vad)
469- [Val Town Documentation](https://docs.val.town)
498## 🎯 Summary
499
500Hello-Transcription successfully demonstrates the transcription-only capabilities of OpenAI's Realtime API. Key achievements:
501
5021. **Pure Transcription**: No AI responses, focused solely on speech-to-text

3const SLACK_TOKEN = Deno.env.get("SLACK_BOT_TOKEN");
4const CHANNEL_ID = "C1234567890"; // 실제 채널 ID
5const HOLIDAY_API_KEY = Deno.env.get("HOLIDAY_API_KEY"); // 공공데이터포털 인증키
6
7function formatDateKey(date) {
18async function getHolidays(year) {
19  const url =
20    `https://apis.data.go.kr/B090041/openapi/service/SpcdeInfoService/getHoliDeInfo?serviceKey=${HOLIDAY_API_KEY}&solYear=${year}&numOfRows=100&_type=json`;
21  const res = await fetch(url);
22  const json = await res.json();
75`;
76
77    await fetch("https://slack.com/api/chat.postMessage", {
78      method: "POST",
79      headers: {