feat: remove registerGlobals and use shim-based createAudioElement

- Remove registerGlobals() call from React Native shim
- Add createAudioElement() function to all shims (browser, RN, node, workers)
- Update openaiRealtimeWebRtc.ts to use shimmed createAudioElement
- Prevents global scope pollution in React Native environments

Addresses maintainer feedback preferring approach 2 from PR openai#193

Author: ryanlchan

.tool-versions

@@ -0,0 +1 @@
+nodejs 22.14.0

packages/agents-realtime/src/openaiRealtimeWebRtc.ts

@@ -4,6 +4,7 @@ import {
   isBrowserEnvironment,
   mediaDevices as shimMediaDevices,
   RTCPeerConnection as RTCPeerConnectionCtor,
+  createAudioElement,
 } from '@openai/agents-realtime/_shims';
 import {
   RealtimeTransportLayer,
@@ -25,23 +26,23 @@ import { HEADERS } from './utils';
  */
 export type WebRTCState =
   | {
-      status: 'disconnected';
-      peerConnection: undefined;
-      dataChannel: undefined;
-      callId: string | undefined;
-    }
+    status: 'disconnected';
+    peerConnection: undefined;
+    dataChannel: undefined;
+    callId: string | undefined;
+  }
   | {
-      status: 'connecting';
-      peerConnection: RTCPeerConnection;
-      dataChannel: RTCDataChannel;
-      callId: string | undefined;
-    }
+    status: 'connecting';
+    peerConnection: RTCPeerConnection;
+    dataChannel: RTCDataChannel;
+    callId: string | undefined;
+  }
   | {
-      status: 'connected';
-      peerConnection: RTCPeerConnection;
-      dataChannel: RTCDataChannel;
-      callId: string | undefined;
-    };
+    status: 'connected';
+    peerConnection: RTCPeerConnection;
+    dataChannel: RTCDataChannel;
+    callId: string | undefined;
+  };
 
 /**
  * The options for the OpenAI Realtime WebRTC transport layer.
@@ -88,8 +89,7 @@ export type OpenAIRealtimeWebRTCOptions = {
  */
 export class OpenAIRealtimeWebRTC
   extends OpenAIRealtimeBase
-  implements RealtimeTransportLayer
-{
+  implements RealtimeTransportLayer {
   #url: string;
   #state: WebRTCState = {
     status: 'disconnected',
@@ -260,7 +260,7 @@ export class OpenAIRealtimeWebRTC
         // set up audio playback
         if (isBrowserEnvironment()) {
           const audioElement =
-            this.options.audioElement ?? document.createElement('audio');
+            this.options.audioElement ?? createAudioElement();
           audioElement.autoplay = true;
           peerConnection.ontrack = (event) => {
             audioElement.srcObject = event.streams[0];

packages/agents-realtime/src/shims/shims-browser.ts

@@ -12,3 +12,10 @@ export const RTCSessionDescription = globalThis.RTCSessionDescription;
 export const MediaStream = globalThis.MediaStream;
 export const MediaStreamTrack = globalThis.MediaStreamTrack;
 export const mediaDevices = navigator.mediaDevices;
+
+/**
+ * Creates an audio element for browser environments.
+ */
+export const createAudioElement = (): HTMLAudioElement => {
+  return document.createElement('audio');
+};

packages/agents-realtime/src/shims/shims-node.ts

@@ -15,3 +15,11 @@ export const MediaStream =
 export const MediaStreamTrack =
   undefined as unknown as typeof globalThis.MediaStreamTrack;
 export const mediaDevices = undefined as unknown as MediaDevices;
+
+/**
+ * Creates an audio element for Node environments.
+ * Returns undefined as Node.js doesn't support audio playback.
+ */
+export const createAudioElement = (): HTMLAudioElement => {
+  return undefined as unknown as HTMLAudioElement;
+};

packages/agents-realtime/src/shims/shims-react-native.ts

@@ -5,11 +5,8 @@ import {
   MediaStream,
   MediaStreamTrack,
   mediaDevices,
-  registerGlobals,
 } from 'react-native-webrtc';
 
-registerGlobals();
-
 export const WebSocket = global.WebSocket;
 export const isBrowserEnvironment = (): boolean => false;
 export const useWebSocketProtocols = true;
@@ -22,3 +19,16 @@ export {
   MediaStreamTrack,
   mediaDevices,
 };
+
+/**
+ * Creates an audio element for React Native.
+ * Returns a mock object with the minimal interface needed for audio playback.
+ */
+export const createAudioElement = (): HTMLAudioElement => {
+  // React Native doesn't use HTML audio elements.
+  // Audio playback is handled through the RTCPeerConnection's ontrack event.
+  return {
+    autoplay: true,
+    srcObject: null,
+  } as unknown as HTMLAudioElement;
+};

packages/agents-realtime/src/shims/shims-workerd.ts

@@ -15,3 +15,11 @@ export const MediaStream =
 export const MediaStreamTrack =
   undefined as unknown as typeof globalThis.MediaStreamTrack;
 export const mediaDevices = undefined as unknown as MediaDevices;
+
+/**
+ * Creates an audio element for Cloudflare Workers.
+ * Returns undefined as Workers don't support audio playback.
+ */
+export const createAudioElement = (): HTMLAudioElement => {
+  return undefined as unknown as HTMLAudioElement;
+};