✨(frontend) expose media state in the DOM for the Renater gateway

Add a hidden div in the DOM that reflects the current state of the
microphone and camera, so that the Renater SIP media gateway can
observe it and keep an accurate view of the media state.

src/frontend/src/features/rooms/livekit/components/MediaStateObserver.tsx

@@ -0,0 +1,22 @@
+import { useLocalParticipant } from '@livekit/components-react'
+
+/**
+ * Exposes the local participant's media state in the DOM so external tools
+ * (e.g. bots automating the frontend) can reliably read the microphone and
+ * camera state, and watch for changes with a MutationObserver:
+ *
+ * const el = document.getElementById('media-state')
+ * new MutationObserver(...).observe(el, { attributes: true })
+ */
+export const MediaStateObserver = () => {
+  const { isMicrophoneEnabled, isCameraEnabled } = useLocalParticipant()
+
+  return (
+    <div
+      id="media-state"
+      style={{ display: 'none' }}
+      data-microphone-enabled={isMicrophoneEnabled ? 'true' : 'false'}
+      data-camera-enabled={isCameraEnabled ? 'true' : 'false'}
+    />
+  )
+}

src/frontend/src/features/rooms/livekit/prefabs/VideoConference.tsx

@@ -11,6 +11,7 @@ import { SidePanel } from '../components/SidePanel'
 import { RecordingProvider } from '@/features/recording'
 import { ScreenShareErrorModal } from '../components/ScreenShareErrorModal'
 import { ConnectionObserver } from '../components/ConnectionObserver'
+import { MediaStateObserver } from '../components/MediaStateObserver'
 import { RoomMetadataSynchronizer } from '../components/RoomMetadataSynchronizer'
 import { useRoomPageTitle } from '../hooks/useRoomPageTitle'
 import { useNoiseReduction } from '../hooks/useNoiseReduction'
@@ -63,6 +64,7 @@ export function VideoConference({ ...props }: VideoConferenceProps) {
     <>
       <RoomMetadataSynchronizer />
       <ConnectionObserver />
+      <MediaStateObserver />
       <ChatProvider />
       <VideoResolutionSubscription />
       <div