From the course: OpenAI API: Building Front-End Voice Apps with the Realtime API and WebRTC
Unlock this course with a free trial
Join today to access over 24,800 courses taught by industry experts.
A bare-bones JavaScript Realtime API implementation - OpenAI API Tutorial
From the course: OpenAI API: Building Front-End Voice Apps with the Realtime API and WebRTC
A bare-bones JavaScript Realtime API implementation
- [Instructor] To explain the basics of how OpenAI's Realtime API works through WebRTC, I created a reference implementation using vanilla JavaScript. This implementation is found under the 01 folder and is as basic as it can be. All you have is two buttons, one to create the connection and one to mute or unmute a mic, and you have a status update field that will update as different things happen. Let's run this application first to see how it all works. And for reference, I'm already running the server on the backend, that's why this is working. So I'll click Create Connection. Because this is the first time I'm opening this site, I'm now asked if I want to activate the microphone. I'll say, Allow while visiting the site. - [AI] Hello there, how can I assist you today? - [Instructor] Write me a haiku about a duck. - [AI] Feathers soft and bright gliding on the serene pond, nature's grace in quacks. - [Instructor] What you're seeing here is the Realtime API working as expected. Now…
Contents
-
-
-
-
(Locked)
Hands on with five JavaScript AI voice apps1m 39s
-
(Locked)
OpenAI authentication with ephemeral tokens4m 34s
-
(Locked)
Understanding the WebRTC flow3m 6s
-
(Locked)
A bare-bones JavaScript Realtime API implementation6m 29s
-
(Locked)
Configuring assistant messages and settings3m 21s
-
(Locked)
Adding visualizations with the Web Audio API2m 35s
-
(Locked)
Adding text chat to a Realtime app3m
-
(Locked)
Adding text transcripts for accessibility3m 8s
-
(Locked)
Function calling with the Realtime API4m 1s
-
(Locked)
-