PCM Frame (10ms@48kHz) 
  → 预加重滤波器 (High-pass @ 80Hz) 
  → 分帧加窗 (Hann Window, 20ms 帧长, 50% 重叠) 
  → 短时能量累加 Σ(x[n]²) 
  → 对数域平滑 (α=0.99 攻击 / α=0.999 释放) 
  → 映射至 [0, 1] 线性刻度 (RMS → dBFS → 归一化)
  → RTCOutboundRtpStreamStats.audioLevel

 0                   1                   2                   3
 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
|V=2|P|X|  CC   |M|     PT      |       sequence number         |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
|                           timestamp                           |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
|           synchronization source (SSRC) identifier            |
+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+
|  ID=14  | len=1 | 0 |V|    level (7 bits)   |    padding      |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+

Score(ssrc) = w₁·E[level] + w₂·P(V=1) + w₃·(1 - σ²_level)
其中：
  E[level]      : 窗口内平均电平（归一化）
  P(V=1)        : 语音活跃帧占比
  σ²_level      : 电平方差（抑制持续噪音源）
  w₁,w₂,w₃      : 经验权重 0.4 / 0.4 / 0.2

// hooks/useAudioLevelMonitor.ts
import { useEffect, useRef, useState, useCallback } from 'react';

interface AudioLevelSnapshot {
  ssrc: string;
  level: number;           // 0~1
  voiceProbability: number; // 0~1
  timestamp: number;
}

interface UseAudioLevelMonitorOptions {
  peerConnection: RTCPeerConnection | null;
  intervalMs?: number;      // 默认 100ms
  smoothingFactor?: number; // EMA 平滑系数
  onActiveSpeakerChange?: (ssrc: string | null) => void;
}

export function useAudioLevelMonitor({
  peerConnection,
  intervalMs = 100,
  smoothingFactor = 0.1,
  onActiveSpeakerChange,
}: UseAudioLevelMonitorOptions) {
  const [levels, setLevels] = useState<Map<string, AudioLevelSnapshot>>(new Map());
  const [activeSpeaker, setActiveSpeaker] = useState<string | null>(null);
  
  const statsTimer = useRef<ReturnType<typeof setInterval>>();
  const history = useRef<Map<string, AudioLevelSnapshot[]>>(new Map());
  const smoothed = useRef<Map<string, number>>(new Map());

  const computeActiveSpeaker = useCallback(() => {
    const now = Date.now();
    const WINDOW_MS = 1000; // 1s 滑动窗口
    let bestSsrc: string | null = null;
    let bestScore = -1;

    history.current.forEach((arr, ssrc) => {
      // 截取窗口
      const windowData = arr.filter(d => now - d.timestamp <= WINDOW_MS);
      if (windowData.length < 3) return; // 样本太少

      const avgLevel = windowData.reduce((s, d) => s + d.level, 0) / windowData.length;
      const voiceRatio = windowData.filter(d => d.voiceProbability > 0.5).length / windowData.length;
      const variance = windowData.reduce((s, d) => s + (d.level - avgLevel) ** 2, 0) / windowData.length;

      const score = 0.4 * avgLevel + 0.4 * voiceRatio + 0.2 * (1 - Math.min(variance * 10, 1));
      if (score > bestScore) {
        bestScore = score;
        bestSsrc = ssrc;
      }
    });

    // 迟滞判定
    const THRESHOLD_ON = 0.65, THRESHOLD_OFF = 0.35;
    if (bestSsrc && bestScore > THRESHOLD_ON && bestSsrc !== activeSpeaker) {
      setActiveSpeaker(bestSsrc);
      onActiveSpeakerChange?.(bestSsrc);
    } else if (activeSpeaker && bestScore < THRESHOLD_OFF) {
      setActiveSpeaker(null);
      onActiveSpeakerChange?.(null);
    }
  }, [activeSpeaker, onActiveSpeakerChange]);

  useEffect(() => {
    if (!peerConnection) return;

    statsTimer.current = setInterval(async () => {
      try {
        const stats = await peerConnection.getStats();
        const snapshots: AudioLevelSnapshot[] = [];

        stats.forEach(report => {
          if (report.type === 'inbound-rtp' && report.kind === 'audio') {
            const level = report.audioLevel ?? 0; // 0~1
            const voiceProb = report.voiceActivity ? 1 : 0; // 简化：二值 VAD
            snapshots.push({
              ssrc: report.ssrc.toString(),
              level,
              voiceProbability: voiceProb,
              timestamp: Date.now(),
            });
          }
        });

        // 更新历史与平滑
        setLevels(prev => {
          const next = new Map(prev);
          snapshots.forEach(s => {
            // EMA 平滑
            const prevSmoothed = smoothed.current.get(s.ssrc) ?? 0;
            const newSmoothed = smoothingFactor * s.level + (1 - smoothingFactor) * prevSmoothed;
            smoothed.current.set(s.ssrc, newSmoothed);

            // 写入历史
            const arr = history.current.get(s.ssrc) ?? [];
            arr.push({ ...s, level: newSmoothed });
            // 保留最近 2s
            const cutoff = Date.now() - 2000;
            history.current.set(s.ssrc, arr.filter(d => d.timestamp > cutoff));

            next.set(s.ssrc, { ...s, level: newSmoothed });
          });
          return next;
        });

        computeActiveSpeaker();
      } catch (e) {
        console.warn('[ALI/ASD] getStats failed:', e);
      }
    }, intervalMs);

    return () => {
      if (statsTimer.current) clearInterval(statsTimer.current);
      history.current.clear();
      smoothed.current.clear();
    };
  }, [peerConnection, intervalMs, smoothingFactor, computeActiveSpeaker]);

  return { levels, activeSpeaker };
}

// components/SpeakerGrid.tsx
import React, { useMemo } from 'react';
import { useAudioLevelMonitor } from '../hooks/useAudioLevelMonitor';

interface Participant {
  id: string;
  name: string;
  ssrc: string;          // 与 RTC 统计关联
  stream: MediaStream;
}

interface SpeakerGridProps {
  participants: Participant[];
  peerConnection: RTCPeerConnection;
}

export const SpeakerGrid: React.FC<SpeakerGridProps> = ({ 
  participants, 
  peerConnection 
}) => {
  const { levels, activeSpeaker } = useAudioLevelMonitor({
    peerConnection,
    intervalMs: 80,
    onActiveSpeakerChange: (ssrc) => {
      console.log('[ASD] Active speaker:', ssrc);
      // 可触发埋点、录制标记、服务端侧布局指令等
    },
  });

  // 将统计映射到参与者
  const enriched = useMemo(() => participants.map(p => {
    const stat = levels.get(p.ssrc);
    return {
      ...p,
      level: stat?.level ?? 0,
      isActive: p.ssrc === activeSpeaker,
    };
  }), [participants, levels, activeSpeaker]);

  return (
    <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
      {enriched.map(p => (
        <div
          key={p.id}
          className={`relative rounded-xl overflow-hidden border-2 transition-all duration-200 ${
            p.isActive ? 'border-primary-500 ring-2 ring-primary-500/50' : 'border-gray-200'
          }`}
        >
          <video
            className="w-full h-48 object-cover"
            srcObject={p.stream}
            autoPlay
            playsInline
            muted={p.isActive} // 主讲人取消静音，其余静音防啸叫
          />
          {/* 音量可视化条 */}
          <div className="absolute bottom-0 left-0 right-0 h-2 bg-gray-800/50">
            <div
              className="h-full bg-primary-500 transition-all duration-50 ease-out"
              style={{ width: `${Math.min(p.level * 1.5, 1) * 100}%` }}
            />
          </div>
          <div className="absolute bottom-2 left-2 right-2 text-white text-sm font-medium truncate">
            {p.name} {p.isActive && '🎤'}
          </div>
        </div>
      ))}
    </div>
  );
};

// utils/rtcConfig.ts
export function enableAudioLevelExtension(pc: RTCPeerConnection) {
  const transceiver = pc.getTransceivers().find(t => t.receiver.track?.kind === 'audio');
  if (!transceiver) return;

  // 确保发送方声明支持 ssrc-audio-level
  const sender = transceiver.sender;
  const params = sender.getParameters();
  params.headerExtensions = params.headerExtensions ?? [];
  
  const EXT_URI = 'urn:ietf:params:rtp-hdrext:ssrc-audio-level';
  if (!params.headerExtensions.some(h => h.uri === EXT_URI)) {
    params.headerExtensions.push({ uri: EXT_URI, id: 14 }); // ID 需与对端协商一致
    sender.setParameters(params);
  }
}

graph LR
    A[RTP Packet] --> B{Header Extension<br/>ssrc-audio-level}
    B --> C[Level Extractor<br/>解析 level + V bit]
    C --> D[Per-SSRC Ring Buffer<br/>滑动窗口 1s]
    D --> E[Multi-Feature Scorer<br/>EMA + VoiceRatio + Entropy]
    E --> F[Hysteresis FSM<br/>ON: 0.65 / OFF: 0.35]
    F --> G[ActiveSpeakerChanged Event]
    G --> H[DataChannel / WebSocket<br/>下发至全体客户端]
    G --> I[Recording Controller<br/>切流/标记关键帧]
    G --> J[Adaptive Simulcast<br/>主讲人升层/非主讲降层]

// worker/asdProcessor.ts
import { RtpPacket } from 'mediasoup/node/lib/RtpPacket';

interface SsrcState {
  buf: Float32Array;      // 环形缓冲区，存储归一化 level
  ptr: number;
  voiceFrames: number;
  totalFrames: number;
  lastScore: number;
  isActive: boolean;
}

export class ServerSideASD {
  private states = new Map<number, SsrcState>();
  private readonly WINDOW_SIZE = 100; // 100 帧 ≈ 1s @ 10ms/帧
  private readonly TH_ON = 0.65, TH_OFF = 0.35;
  private onChange: (ssrc: number | null, confidence: number) => void;

  constructor(cb: typeof this.onChange) { this.onChange = cb; }

  handleRtpPacket(packet: RtpPacket) {
    const ext = packet.getHeaderExtension(14); // urn:ietf:params:rtp-hdrext:ssrc-audio-level
    if (!ext) return;

    const level = (ext.data[0] & 0x7F) / 127;   // 0~1
    const voice = (ext.data[0] & 0x80) !== 0;   // V bit
    const ssrc = packet.ssrc;

    let st = this.states.get(ssrc);
    if (!st) {
      st = { buf: new Float32Array(this.WINDOW_SIZE), ptr: 0, voiceFrames: 0, totalFrames: 0, lastScore: 0, isActive: false };
      this.states.set(ssrc, st);
    }

    // 环形写入
    const old = st.buf[st.ptr];
    st.buf[st.ptr] = level;
    st.ptr = (st.ptr + 1) % this.WINDOW_SIZE;
    st.totalFrames = Math.min(st.totalFrames + 1, this.WINDOW_SIZE);
    if (voice) st.voiceFrames++;

    // 仅当窗口满或定期计算
    if (st.totalFrames < 30) return; // 预热 300ms
    if (st.totalFrames === this.WINDOW_SIZE && voice) st.voiceFrames--; // 近似滑动扣减

    // 打分
    const avgLevel = st.buf.reduce((a, b) => a + b, 0) / st.totalFrames;
    const voiceRatio = st.voiceFrames / st.totalFrames;
    const variance = st.buf.slice(0, st.totalFrames).reduce((s, v) => s + (v - avgLevel) ** 2, 0) / st.totalFrames;
    const score = 0.4 * avgLevel + 0.4 * voiceRatio + 0.2 * (1 - Math.min(variance * 10, 1));

    // 迟滞状态机
    if (!st.isActive && score > this.TH_ON) {
      st.isActive = true;
      this.onChange(ssrc, score);
    } else if (st.isActive && score < this.TH_OFF) {
      st.isActive = false;
      this.onChange(null, score);
    }
    st.lastScore = score;
  }

  // 定期清理离线 SSRC
  gc(activeSsrcs: Set<number>) {
    for (const [ssrc] of this.states) if (!activeSsrcs.has(ssrc)) this.states.delete(ssrc);
  }
}

// 服务端 -> 客户端：主讲人变更
{
  "type": "active_speaker_change",
  "payload": {
    "speaker_id": "user_123",      // 业务层 ID，非 SSRC
    "ssrc": 3456789012,
    "confidence": 0.92,
    "timestamp": 1715000000123,    // 服务端单调时钟 ms
    "reason": "voice_activity"     // voice_activity | manual_pin | admin_force
  },
  "seq": 1001                      // 单调递增，客户端去重
}

// 客户端 -> 服务端：手动固定/取消固定（教学/主持场景）
{
  "type": "pin_speaker",
  "payload": { "speaker_id": "user_123", "pin": true }
}

// audio-worklet/vad-processor.js
class VADProcessor extends AudioWorkletProcessor {
  constructor() {
    super();
    this.port.onmessage = async (e) => {
      if (e.data.type === 'init') {
        this.ort = await import('onnxruntime-web');
        this.session = await this.ort.InferenceSession.create(e.data.modelUrl);
        this.state = this.session.run([], { h: new Float32Array(2*1*128), c: new Float32Array(2*1*128) }); // 初始隐状态
      }
    };
    this.buffer = new Float32Array(512); // 512 采样 @ 16kHz = 32ms
    this.ptr = 0;
  }

  process(inputs) {
    const input = inputs[0][0]; // 单声道
    if (!input || !this.session) return true;

    for (const sample of input) {
      this.buffer[this.ptr++] = sample;
      if (this.ptr === 512) {
        this.ptr = 0;
        this.runInference(this.buffer);
      }
    }
    return true;
  }

  async runInference(chunk) {
    // Silero 需要 512 采样 + 隐状态
    const inputTensor = new this.ort.Tensor('float32', chunk, [1, 512]);
    const feeds = { input: inputTensor, h: this.state.h, c: this.state.c };
    const results = await this.session.run(feeds);
    this.state = { h: results.h, c: results.c };
    const speechProb = results.output.data[0]; // 0~1
    this.port.postMessage({ type: 'vad', prob: speechProb, timestamp: currentTime });
  }
}
registerProcessor('vad-processor', VADProcessor);

// 双轨并行：传统 ALI（低延迟 UI 反馈）+ AI VAD（高精度 ASD 判定）
const { levels } = useAudioLevelMonitor({...});
const aiVadProb = useRef(0);

useEffect(() => {
  const ctx = new AudioContext({ sampleRate: 16000 });
  const worklet = await ctx.audioWorklet.addModule('/vad-processor.js');
  const node = new AudioWorkletNode(ctx, 'vad-processor');
  node.port.onmessage = (e) => { if (e.data.type === 'vad') aiVadProb.current = e.data.prob; };
  // 接入麦克风或远端轨道
}, []);

const fusedScore = useMemo(() => 
  0.6 * traditionalScore + 0.4 * aiVadProb.current, [traditionalScore]);

# server/asd_gpu_pipeline.py (伪代码，基于 Triton Inference Server / TensorRT)
import numpy as np
from pytriton.triton import Triton, TritonConfig
from pytriton.model_config import ModelConfig, Tensor

def asd_infer(audio_chunks: np.ndarray, ssrcs: List[int]) -> Dict[int, float]:
    """
    audio_chunks: [B, T] float32 @ 16kHz, 每路 1s 窗口
    返回: {ssrc: active_prob}
    """
    # 1. 批量 VAD
    vad_probs = triton_client.infer('silero_vad', {'audio': audio_chunks})['speech_prob']  # [B]
    
    # 2. 说话人嵌入（用于重叠发言聚类）
    embeds = triton_client.infer('ecapa_tdnn', {'audio': audio_chunks})['embedding']  # [B, 192]
    
    # 3. 聚类 + 语义打分（可选接入 ASR 结果）
    scores = {}
    for i, ssrc in enumerate(ssrcs):
        base = 0.4 * vad_probs[i] + 0.3 * (1 - np.std(audio_chunks[i])) + 0.3 * semantic_weight[i]
        scores[ssrc] = float(np.clip(base, 0, 1))
    return scores

// shared/proto/asd_event.proto
syntax = "proto3";
package rtc.asd.v1;

message AudioLevelReport {
  string user_id = 1;
  uint32 ssrc = 2;
  float level = 3;              // 0~1, EMA smoothed
  bool voice_activity = 4;      // VAD 判定
  int64 client_ts = 5;          // 客户端单调时钟
  string sdk_version = 6;
  string platform = 7;          // web | ios | android | flutter | electron
}

message ActiveSpeakerEvent {
  string speaker_user_id = 1;
  uint32 speaker_ssrc = 2;
  float confidence = 3;
  int64 server_ts = 4;
  uint32 seq = 5;
  ChangeReason reason = 6;
  enum ChangeReason { VOICE_ACTIVITY = 0; MANUAL_PIN = 1; ADMIN_FORCE = 2; AI_SEMANTIC = 3; }
}

// core/IAudioLevelProvider.ts
export interface IAudioLevelProvider {
  start(pc: RTCPeerConnection): Promise<void>;
  stop(): void;
  onLevel: (report: AudioLevelReport) => void;
  onActiveSpeaker: (evt: ActiveSpeakerEvent) => void;
}

// web/WebAudioLevelProvider.ts
export class WebAudioLevelProvider implements IAudioLevelProvider {
  // 复用上篇 useAudioLevelMonitor 核心逻辑，暴露统一接口
}

// ios/IosAudioLevelProvider.swift (通过 JSI/React Native Bridge 暴露)
// android/AndroidAudioLevelProvider.kt (通过 JNI/Flutter Pigeon 暴露)

# .github/workflows/asd-consistency.yml
name: ASD Cross-Platform Consistency
on: [push, pull_request]
jobs:
  test:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        platform: [web-chrome, web-firefox, web-safari, ios-sim, android-emu, electron]
    steps:
      - uses: actions/checkout@v4
      - name: Start MediaSoup Test Server
        run: docker run -d -p 4443:4443 --name mediasoup-test myorg/mediasoup-test:latest
      - name: Run Platform Test
        uses: ./.github/actions/platform-test
        with:
          platform: ${{ matrix.platform }}
          test-suite: asd_consistency
      - name: Compare Golden Metrics
        run: |
          python scripts/compare_metrics.py 
            --baseline artifacts/golden_metrics.json 
            --current artifacts/${{ matrix.platform }}_metrics.json 
            --threshold 0.05  # F1 差异 < 5%

# HELP rtc_asd_active_speaker_changes_total 主讲人切换总次数
# TYPE rtc_asd_active_speaker_changes_total counter
rtc_asd_active_speaker_changes_total{room_id="123", reason="voice_activity"} 42

# HELP rtc_asd_decision_confidence 主讲人判定置信度分布
# TYPE rtc_asd_decision_confidence histogram
rtc_asd_decision_confidence_bucket{room_id="123", le="0.5"} 10
rtc_asd_decision_confidence_bucket{room_id="123", le="0.9"} 120

# HELP rtc_ali_level_distribution 音频电平分布
# TYPE rtc_ali_level_distribution histogram
rtc_ali_level_distribution_bucket{user_id="u1", le="0.1"} 5000
rtc_ali_level_distribution_bucket{user_id="u1", le="0.5"} 200

# HELP rtc_asd_false_positive_alert 误报告警
# TYPE rtc_asd_false_positive_alert gauge
rtc_asd_false_positive_alert{room_id="123", type="keyboard_noise"} 1

// OpenTelemetry Span 示例
{
  "traceId": "a1b2c3d4e5f6",
  "spanId": "s1",
  "name": "ASD_Decision",
  "kind": "INTERNAL",
  "attributes": {
    "rtc.room_id": "room_789",
    "rtc.speaker_user_id": "user_123",
    "rtc.confidence": 0.92,
    "rtc.algorithm_version": "v2.1-ema-hysteresis",
    "rtc.input_level_avg": 0.45,
    "rtc.input_voice_ratio": 0.88,
    "rtc.network_rtt_ms": 45,
    "rtc.encode_bitrate_kbps": 64
  },
  "events": [
    {"name": "vad_triggered", "time": "2024-05-06T08:00:00.123Z", "attributes": {"prob": 0.95}},
    {"name": "hysteresis_on", "time": "2024-05-06T08:00:00.350Z"}
  ]
}

// 语音电平可视化的无障碍增强
<div role="img" 
     aria-label={`${p.name} 当前音量 ${Math.round(p.level * 100)}%${p.isActive ? '，正在发言' : ''}`}
     className="sr-only">
  {/* 视觉条形图 */}
</div>

// 主讲人切换的屏幕阅读器公告
const [announcement, setAnnouncement] = useState('');
useEffect(() => {
  if (activeSpeaker) {
    const name = participants.find(p => p.ssrc === activeSpeaker)?.name;
    setAnnouncement(`${name} 开始发言`);
  }
}, [activeSpeaker]);

return <div aria-live="polite" className="sr-only">{announcement}</div>;

// design-tokens/asd.json
{
  "colors": {
    "speakerActiveBorder": "{color.brand.500}",
    "speakerActiveRing": "{color.brand.500/20}",
    "levelBarBg": "{color.neutral.800/50}",
    "levelBarFill": "{color.brand.500}",
    "levelBarWarnFill": "{color.warning.500}"  // 音量过大/削波提示
  },
  "motion": {
    "levelTransition": "{duration.fast} {easing.easeOut}",
    "borderTransition": "{duration.medium} {easing.easeInOut}",
    "pulseActive": "pulse 1.5s ease-in-out infinite"
  },
  "thresholds": {
    "levelWarn": 0.9,
    "levelClip": 0.98
  }
}

// packages/ui/src/asd/SpeakerTile.tsx
export interface SpeakerTileProps {
  stream: MediaStream;
  name: string;
  level: number;          // 0~1
  isActive: boolean;
  isMuted: boolean;
  isLocal: boolean;
  onPin?: () => void;
  onMute?: () => void;
  className?: string;
}

export const SpeakerTile = forwardRef<HTMLDivElement, SpeakerTileProps>(
  ({ stream, name, level, isActive, isMuted, isLocal, onPin, onMute, className }, ref) => {
    const warn = level > tokens.thresholds.levelWarn;
    const clip = level > tokens.thresholds.levelClip;

    return (
      <div
        ref={ref}
        className={cn(
          'relative rounded-xl overflow-hidden border-2 transition-all',
          isActive && 'border-speakerActiveBorder ring-2 ring-speakerActiveRing',
          !isActive && 'border-neutral-200 dark:border-neutral-700',
          className
        )}
        data-testid={`speaker-tile-${name}`}
      >
        <video
          className="w-full h-48 object-cover"
          srcObject={stream}
          autoPlay
          playsInline
          muted={!isActive || isLocal} // 非主讲/本地静音防啸叫
          aria-label={`${name} 视频流`}
        />
        
        {/* 电平条 + 削波报警 */}
        <div className="absolute bottom-0 left-0 right-0 h-2 bg-levelBarBg" role="progressbar" 
             aria-valuenow={Math.round(level * 100)} aria-valuemin={0} aria-valuemax={100}
             aria-label={`${name} 音量`}>
          <div className={cn(
            'h-full transition-all duration-50 ease-out',
            clip && 'bg-levelBarClipFill animate-pulse',
            warn && !clip && 'bg-levelBarWarnFill',
            !warn && 'bg-levelBarFill'
          )} style={{ width: `${Math.min(level * 1.2, 1) * 100}%` }} />
        </div>

        <div className="absolute bottom-2 left-2 right-2 flex items-center justify-between text-white text-sm">
          <span className="truncate font-medium">{name} {isLocal && <span className="ml-1 text-xs opacity-70">(我)</span>}</span>
          <div className="flex items-center gap-2">
            {isActive && <span className="flex items-center gap-1 text-brand-300" aria-hidden="true">🎤 发言中</span>}
            <button onClick={onMute} aria-label={isMuted ? '取消静音' : '静音'} className="p-1 rounded hover:bg-white/10">
              {isMuted ? <MicOff className="w-4 h-4" /> : <Mic className="w-4 h-4" />}
            </button>
            {onPin && <button onClick={onPin} aria-label="固定画面" className="p-1 rounded hover:bg-white/10">
              <Pin className="w-4 h-4" />
            </button>}
          </div>
        </div>
      </div>
    );
  }
);
SpeakerTile.displayName = 'SpeakerTile';