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

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