added camera env switcher

README.md

@@ -14,8 +14,6 @@ app_port: 3001
 
 This repository contains a react-based starter app for using the [Multimodal Live API](https://ai.google.dev/api/multimodal-live) over a websocket. It provides modules for streaming audio playback, recording user media such as from a microphone, webcam or screen capture as well as a unified log view to aid in development of your application.
 
-[![Multimodal Live API Demo](readme/thumbnail.png)](https://www.youtube.com/watch?v=J_q7JY1XxFE)
-
 Watch the demo of the Multimodal Live API [here](https://www.youtube.com/watch?v=J_q7JY1XxFE).
 
 ## Usage
@@ -23,14 +21,21 @@ Watch the demo of the Multimodal Live API [here](https://www.youtube.com/watch?v
 To get started, [create a free Gemini API key](https://aistudio.google.com/apikey) and add it to the `.env` file. Then:
 
 ```
-$ npm install && npm start
+GEMINI_API_KEY=your_api_key
+```
+
+Since this is a modified version of the [Multimodal Live API Console](https://github.com/google-gemini/multimodal-live-api-web-console), you will need to run the server proxy locally with the frontend built.
+
 ```
+$ npm run build && npm run start-server
+```
+
+The app should run on `http://localhost:3001`
+
+## Note
 
-We have provided several example applications on other branches of this repository:
+This is a modified version of the [Multimodal Live API Console](https://github.com/google-gemini/multimodal-live-api-web-console) that uses a server proxy to keep your Gemini API key secure in deployment. The original repository is meant to run entirely as a frontend client.
 
-- [demos/GenExplainer](https://github.com/google-gemini/multimodal-live-api-web-console/tree/demos/genexplainer)
-- [demos/GenWeather](https://github.com/google-gemini/multimodal-live-api-web-console/tree/demos/genweather)
-- [demos/GenList](https://github.com/google-gemini/multimodal-live-api-web-console/tree/demos/genlist)
 
 ## Example
 

src/components/control-tray/ControlTray.tsx

@@ -71,6 +71,8 @@ function ControlTray({
   const [inVolume, setInVolume] = useState(0);
   const [audioRecorder] = useState(() => new AudioRecorder());
   const [muted, setMuted] = useState(false);
+  const [videoDevices, setVideoDevices] = useState<MediaDeviceInfo[]>([]);
+  const [currentDeviceIndex, setCurrentDeviceIndex] = useState(0);
   const renderCanvasRef = useRef<HTMLCanvasElement>(null);
   const connectButtonRef = useRef<HTMLButtonElement>(null);
   const [simulatedVolume, setSimulatedVolume] = useState(0);
@@ -179,6 +181,66 @@ function ControlTray({
     };
   }, [connected, activeVideoStream, client, videoRef]);
 
+  // Add effect to track available video devices
+  useEffect(() => {
+    async function getVideoDevices() {
+      console.log('📹 Enumerating video devices...');
+      try {
+        const devices = await navigator.mediaDevices.enumerateDevices();
+        const videoInputs = devices.filter(device => device.kind === 'videoinput');
+        console.log('📹 Available video devices:', videoInputs.length);
+        videoInputs.forEach((device, index) => {
+          console.log(`📹 Device ${index}:`, {
+            deviceId: device.deviceId,
+            label: device.label
+          });
+        });
+        setVideoDevices(videoInputs);
+      } catch (error) {
+        console.error('❌ Error enumerating devices:', error);
+      }
+    }
+
+    // Get initial device list
+    getVideoDevices();
+
+    // Listen for device changes
+    navigator.mediaDevices.addEventListener('devicechange', getVideoDevices);
+    return () => {
+      navigator.mediaDevices.removeEventListener('devicechange', getVideoDevices);
+    };
+  }, []);
+
+  const rotateWebcam = async () => {
+    console.log('🔄 Rotating webcam...');
+    if (videoDevices.length <= 1) {
+      console.log('⚠️ Not enough video devices to rotate');
+      return;
+    }
+
+    const nextIndex = (currentDeviceIndex + 1) % videoDevices.length;
+    console.log(`🎯 Switching to device index ${nextIndex}`);
+    
+    try {
+      const newStream = await navigator.mediaDevices.getUserMedia({
+        video: { deviceId: { exact: videoDevices[nextIndex].deviceId } },
+        audio: false
+      });
+      
+      console.log('✅ Got new video stream');
+      setActiveVideoStream(newStream);
+      onVideoStreamChange(newStream);
+      setCurrentDeviceIndex(nextIndex);
+      
+      // Clean up old stream
+      if (activeVideoStream) {
+        activeVideoStream.getTracks().forEach(track => track.stop());
+      }
+    } catch (error) {
+      console.error('❌ Error rotating webcam:', error);
+    }
+  };
+
   //handler for swapping from one video-stream to the next
   const changeStreams = (next?: UseMediaStreamResult) => async () => {
     if (next) {
@@ -219,13 +281,24 @@ function ControlTray({
 
         {supportsVideo && (
           <>
-            <MediaStreamButton
-              isStreaming={screenCapture.isStreaming}
-              start={changeStreams(screenCapture)}
-              stop={changeStreams()}
-              onIcon="cancel_presentation"
-              offIcon="present_to_all"
-            />
+            {!isIOSDevice && (
+              <MediaStreamButton
+                isStreaming={screenCapture.isStreaming}
+                start={changeStreams(screenCapture)}
+                stop={changeStreams()}
+                onIcon="cancel_presentation"
+                offIcon="present_to_all"
+              />
+            )}
+            {webcam.isStreaming && videoDevices.length > 1 && (
+              <button 
+                className="action-button" 
+                onClick={rotateWebcam}
+                title="Switch camera"
+              >
+                <span className="material-symbols-outlined">switch_camera</span>
+              </button>
+            )}
             <MediaStreamButton
               isStreaming={webcam.isStreaming}
               start={changeStreams(webcam)}