YT (YouTube) Viewer for Meta Display

A YouTube search and playback experience built specifically for Meta Ray-Ban Display; including a secure way to move an API key from a phone to the glasses.

I built Meta Display glasses YouTube Viewer as an experiment in developing web applications for the Meta Ray-Ban Display platform.

The application lets a user search YouTube and play videos directly on the glasses. It runs inside Meta's approximately 600x600 Chromium webview, max size on the Meta Glasses, and is designed around the input methods available on the device: directional controls move focus, Enter selects, and Escape navigates back.

Search is powered by the YouTube Data API v3, while playback remains inside YouTube's own embedded player.  It also features Play/Stop and +/- 10 second skips.

The most interesting engineering problem wasn't YouTube search or playback. It was getting the API key onto the glasses during setup.

Designing Around the Device

A YouTube API key is a long, mixed-case string containing letters and numbers. That's easy to copy and paste on a phone or computer, but it is a poor input format for smart glasses. Typing it with directional controls was frustrating. I also tried Meta's Writer (Beta) feature, but it wasn't practical for accurately entering a long string with mixed capitalization. Voice dictation had a similar problem: saying something like “capital J” literally entered the words “Capital J” rather than an uppercase J. 

The natural answer seemed to be handing the task off to the phone paired with the glasses. But there was an important limitation: the web application running on the glasses does not automatically have a communication channel to that phone.

The web runtime does not expose the user's phone number or contacts, nor does it provide a general-purpose way for a web application to send something through the Meta AI mobile app. Traditional browser approaches such as sms: or mailto: links also weren't useful in this environment.

Even a QR code wasn't particularly helpful. A code displayed in the glasses exists in the waveguide rather than on a physical surface that can simply be photographed with the phone.

Exploring Other Approaches

I initially considered using browser notifications.

In theory, the glasses could ask the server to push a setup link to the user's phone. The problem is that push notifications require a relationship to have already been established with the phone. The phone first has to visit the site and subscribe to notifications. On iOS, web push also introduces additional requirements around installing the site as a web application.

The Handoff

The solution was to make the complicated information travel to the glasses rather than asking the user to enter it there.

YT Viewer generates an eight-digit temporary pairing code.

The user enters a mobile number on the glasses using a simple numeric interface and sends a SMS text. A Cloudflare Worker sends an SMS through Twilio containing a link to the mobile setup page. The pairing code is already included in the link, so the user simply opens the message and pastes their YouTube API key.

If SMS isn't convenient, the same page can be opened manually and the eight-digit code entered instead. The glasses periodically check for the matching pairing session. Once the key arrives, the glasses retrieve it and stored.

Keeping the Server Out of the Middle

I specifically did not want the YouTube key to become a permanent server-side configuration value.

The Worker instead acts as a short-lived mailbox between the phone and the glasses.

A Cloudflare Durable Object temporarily associates the pairing code with the API key. The value exists only until the glasses retrieve it or until the temporary session expires after approximately three minutes.

After that initial handoff, the key lives on the device and normal YouTube searching can begin.

YouTube on the Display

Once configured, YT Viewer provides a glasses-oriented interface for searching YouTube, selecting results, and watching videos directly within the display.

Rather than trying to recreate the entire YouTube experience, I focused on the interactions that make sense on this type of device.

That meant designing around a small display, directional navigation, limited text entry, and the expectation that interactions should be short and simple.

Why I Like This Project

The part I find most interesting isn't just that I got YouTube running on a pair of glasses.

It's that the limitations of the platform forced a different way of thinking about application architecture.

Instead of trying to make either device do something it wasn't designed for, the solution lets each device handle the part of the workflow it is good at.

Technology

Front end: React, TypeScript and Vite
Display: Meta Ray-Ban Display web application / Chromium runtime
Video: YouTube Data API v3 and YouTube embedded player
Backend: Cloudflare Workers
Temporary state: Cloudflare Durable Objects
Phone handoff: Twilio SMS

Have a Meta Display? Install YT Viewer on Meta Ray-Ban Display

To add the web app to your Meta Ray-Ban Display:

1. Open the Meta AI app on your phone.

2. Tap Glasses.

3. Open Settings.

4. Select Apps.

5. Scroll to the bottom and choose Web Apps.

6. Enter: https://metadisplayyt.jerry-aa8.workers.dev/ (You can try this on your desktop too just to see that it works.)

7. Add/connect the web app.

Once added, YT Viewer should appear as an app on your Display and can be launched directly from the glasses.

8. Under settings you'll be able to enter your phone number and get a text to hit an address on your phone to submit the API key.  Once this is done, your glasses are ready to go!

Developer Mode: If you do not see the Web Apps option, you may need to enable Developer Mode first. In the Meta AI app, go to the glasses settings and tap the Version entry five times. Then return to Apps -> Web Apps and add the URL above.

Because Meta is still evolving the Display software and developer experience, the exact menu wording may change slightly between app versions.

Create a YouTube API Key (You'll need this to setup the Display app)

YT Viewer uses the YouTube Data API v3 for search, so you will need your own Google API key.

1. Open Google Cloud Console -> Credentials:
   https://console.cloud.google.com/apis/credentials

2. Sign in with your Google account.

3. Select an existing Google Cloud project or create a new one.

4. Make sure YouTube Data API v3 is enabled for that project.

5. On the Credentials page, select Create Credentials -> API key.

6. Open the new API key to edit its settings.

7. Under Application restrictions, select None. (This is what I used and know works.)

8. Under API restrictions, choose Restrict key and select YouTube Data API v3.

9. Save the changes.

10. Return to API Keys, choose Show Key, and copy Your API key to Clipboard.