DebugPane に CapabilitiesCodec の枠組みを追加する

src/components/DebugPane/CapabilitiesCodec.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export const CapabilitiesCodec: React.FC = () => {
+  const videoCapabilities = RTCRtpSender.getCapabilities('video');
+  console.log(videoCapabilities?.codecs);
+  const audioCapabilities = RTCRtpSender.getCapabilities('audio');
+  console.log(audioCapabilities?.codecs);
+  return <div></div>;
+};

src/components/DebugPane/index.tsx

@@ -4,6 +4,7 @@ import { Tab, Tabs } from 'react-bootstrap';
 import { setDebugType } from '@/app/actions';
 import { useAppDispatch, useAppSelector } from '@/app/hooks';
 
+import { CapabilitiesCodec } from './CapabilitiesCodec';
 import { DataChannelMessagingMessages } from './DataChannelMessagingMessages';
 import { DebugFilter } from './Filter';
 import { LogMessages } from './LogMessages';
@@ -29,7 +30,8 @@ export const DebugPane: React.FC = () => {
       key === 'stats' ||
       key === 'timeline' ||
       key === 'signaling' ||
-      key === 'messaging'
+      key === 'messaging' ||
+      key === 'codec'
     ) {
       dispatch(setDebugType(key));
     }
@@ -65,6 +67,9 @@ export const DebugPane: React.FC = () => {
           <SendDataChannelMessagingMessage />
           <DataChannelMessagingMessages />
         </Tab>
+        <Tab eventKey="codec" title="Codec">
+          <CapabilitiesCodec />
+        </Tab>
       </Tabs>
     </div>
   );

src/constants.ts

@@ -93,6 +93,7 @@ export const DEBUG_TYPES = [
   'timeline',
   'signaling',
   'messaging',
+  'codec',
 ] as const;
 
 export const AUDIO_CONTENT_HINTS = ['', 'speech', 'speech-recognition', 'music'] as const;