graph TD
    A[CI/CD 流水线] --> B(控制层: 调度引擎)
    B --> C[执行层: Playwright Worker Cluster]
    C --> D[虚拟媒体服务]
    C --> E[信令/业务交互]
    C --> F[网络模拟引擎]
    D --> G[验证层: 质量采集与断言]
    E --> G
    F --> G
    G --> H[数据层: 报告/指标/录像]

# 安装内核模块与工具
RUN apt-get update && apt-get install -y v4l2loopback-dkms ffmpeg pulseaudio-utils 
    && modprobe v4l2loopback devices=4 video_nr=10,11,12,13 card_label="VirtualCam1","VirtualCam2","VirtualCam3","VirtualCam4" exclusive_caps=1

# 启动时写入测试视频流至虚拟设备
# 示例：循环播放 1080p 色卡视频至 /dev/video10
CMD ffmpeg -re -stream_loop -1 -i /assets/test_1080p.yuv -f v4l2 -pix_fmt yuv420p /dev/video10

const context = await browser.newContext({
  // 强制使用虚拟设备，绕过权限弹窗
  permissions: ['camera', 'microphone'],
  // 指定设备 ID (需通过 navigator.mediaDevices.enumerateDevices() 预获取)
  // 或在测试前通过 CDP 设置强制设备选择策略
});

// 通过 CDP 绕过安全策略，强制指定设备 ID (适用于 Chromium 内核)
const client = await context.newCDPSession(page);
await client.send('Browser.grantPermissions', {
  origin: testUrl,
  permissions: ['camera', 'microphone'],
  // 结合浏览器启动参数 --use-fake-device-for-media-stream 可简化流程，但真实虚拟设备更贴近生产
});

// utils/signaling.ts
export class SignalingClient {
  private ws: WebSocket;
  private messageQueue: Map<string, (data: any) => void> = new Map();

  constructor(private roomId: string, private userId: string) {
    this.ws = new WebSocket(`wss://signal.example.com?room=${roomId}&user=${userId}`);
    this.ws.onmessage = (event) => this.handleMessage(JSON.parse(event.data));
  }

  // 发送信令并等待特定类型响应 (Promise 化)
  async send<T>(type: string, payload: any): Promise<T> {
    const msgId = uuidv4();
    this.ws.send(JSON.stringify({ id: msgId, type, payload }));
    return new Promise((resolve) => this.messageQueue.set(msgId, resolve));
  }

  // 主动发起呼叫流程
  async initiateCall(localDescription: RTCSessionDescriptionInit) {
    await this.send('offer', { sdp: localDescription.sdp, type: localDescription.type });
    // ICE Candidate 持续监听由 PeerConnection 事件驱动转发
  }
}

test('双向音视频通话建立与基础质量验证', async ({ page, browserName }) => {
  // 1. 启动主叫
  const callerPage = await setupUserPage(browser, 'caller', { video: '1080p', audio: 'opus' });
  // 2. 启动被叫
  const calleePage = await setupUserPage(browser, 'callee', { video: '720p', audio: 'opus' });

  // 3. 信令交互建立连接
  await Promise.all([
    callerPage.waitForEvent('peerconnection', pc => pc.connectionState === 'connected'),
    calleePage.waitForEvent('peerconnection', pc => pc.connectionState === 'connected'),
  ]);

  // 4. 核心断言：连接态、媒体轨道状态
  await expect(callerPage.locator('#localVideo')).toHaveAttribute('srcObject', /MediaStream/);
  await expect(calleePage.locator('#remoteVideo')).toHaveAttribute('srcObject', /MediaStream/);

  // 5. 质量采样 (持续 30s)
  const stats = await collectStats(callerPage, 30000);
  await assertQualityThresholds(stats);
});

// 模拟 4G 弱网环境: RTT 150ms, 下行 2Mbps, 上行 500kbps, 丢包 2%
await context.setNetworkConditions({
  offline: false,
  downloadThroughput: 2 * 1024 * 1024 / 8,
  uploadThroughput: 500 * 1024 / 8,
  latency: 150,
  // Playwright 原生不支持丢包率，需宿主机配合 tc 命令或使用网关代理
});

// 场景：通话中突发弱网 -> 恢复 -> 验证自适应码率恢复
await page.evaluate(() => window.simulateNetworkChange('poor'));
await page.waitForTimeout(10000);
// 断言：编码器目标码率下降，分辨率可能降级，但连接未中断
const stats = await getStats(page);
expect(stats.outboundRtp.targetBitrate).toBeLessThan(1_000_000); // 降至 1Mbps 以下
await page.evaluate(() => window.simulateNetworkChange('good'));
await expectPoll(() => getStats(page).then(s => s.outboundRtp.targetBitrate)).toBeGreaterThan(2_000_000);

{
  "thresholds": {
    "video": {
      "freezeRate": { "p95": 0.05 },      // 卡顿率 < 5%
      "avgDelayMs": { "p95": 400 },       // 端到端延迟 < 400ms
      "frameWidth": { "min": 1280 },      // 最低分辨率 720p
      "framesDecoded": { "min": 25 }      // 平均帧率 > 25fps
    },
    "audio": {
      "jitterMs": { "p95": 30 },
      "packetsLostRate": { "p95": 0.01 },
      "audioLevel": { "min": 0.01 }       // 排除静音故障
    }
  }
}

# .gitlab-ci.yml 片段
stages:
  - e2e_prepare
  - e2e_parallel
  - e2e_report

e2e_prepare:
  stage: e2e_prepare
  script:
    - docker-compose -f docker-compose.test.yml up -d virtual-media-server signaling-mock
  services:
    - name: docker:dind

e2e_chromium_1080p:
  stage: e2e_parallel
  parallel: 4  # 矩阵并行：分辨率 x 网络场景 x 浏览器
  variables:
    TEST_BROWSER: chromium
    TEST_RESOLUTION: 1080p
    NETWORK_PROFILE: "4g_good"
  script:
    - npx playwright test --project=chromium --grep "@regression"
  artifacts:
    when: always
    reports:
      junit: test-results/junit.xml
    paths:
      - test-results/
      - playwright-report/
    expire_in: 7d

e2e_aggregate_report:
  stage: e2e_report
  needs: [e2e_chromium_1080p, e2e_firefox_720p, ...]
  script:
    - npx ts-node scripts/merge-reports.ts
    - npx ts-node scripts/notify-feishu.ts

// test/scenarios/device-switch.spec.ts
test('通话中切换虚拟摄像头：前置->后置->屏幕共享->虚拟视频', async ({ page, context }) => {
  const caller = await setupCaller(page);
  
  // 1. 初始前置摄像头 (video10)
  await caller.startCall({ videoDeviceId: 'video10' });
  await expectVideoTrack(caller, { label: 'VirtualCam1', width: 1920 });

  // 2. 切换至后置摄像头 (video11) - 模拟用户点击切换按钮
  await caller.page.click('#switch-camera-btn');
  // 关键：等待 replaceTrack 完成重协商
  await caller.waitForNegotiationComplete(); 
  await expectVideoTrack(caller, { label: 'VirtualCam2', width: 1280 });

  // 3. 切换至屏幕共享流 (通过 getDisplayMedia 获取虚拟显示器)
  // CI 环境需配置 Xvfb + v4l2loopback 作为虚拟显示器源
  await caller.page.click('#screen-share-btn');
  const [shareStream] = await Promise.all([
    context.waitForEvent('page'), // 处理浏览器原生选择弹窗 (Playwright 自动处理)
    caller.page.click('#confirm-share-dialog')
  ]);
  // 验证远端收到屏幕共享轨道 (kind=video, contentHint=detail/motion)
  await expectRemoteTrack(caller.remotePeer, { contentHint: 'detail' });

  // 4. 停止共享，验证自动回退摄像头
  await caller.page.click('#stop-share-btn');
  await expectVideoTrack(caller, { label: 'VirtualCam2' }); // 保持最后摄像头状态
});

// configs/network-profiles/4g-commute.json
{
  "name": "4G_地铁通勤",
  "phases": [
    { "durationSec": 30, "profile": "good_4g" },      // 进站
    { "durationSec": 15, "profile": "tunnel_blackout" }, // 隧道断网 (RTT=inf, Loss=100%)
    { "durationSec": 45, "profile": "poor_4g_flapping" }, // 出站抖动 (RTT 200<->800ms, Loss 5%<->20%)
    { "durationSec": 20, "profile": "wifi_handover" }   // 切 WiFi (IP 变更，触发 ICE Restart)
  ]
}

// utils/telemetry.ts
import { metrics, DiagConsoleLogger, DiagLogLevel } from '@opentelemetry/api';
import { MeterProvider, PeriodicExportingMetricReader } from '@opentelemetry/sdk-metrics';
import { PrometheusExporter } from '@opentelemetry/exporter-prometheus';

// 定义 WebRTC 专属指标语义
export const RTC_METRICS = {
  ICE_CONNECT_DURATION: 'webrtc.ice.connect.duration.ms',
  FIRST_FRAME_RENDER: 'webrtc.video.first_frame_render.ms',
  BITRATE_ACTUAL: 'webrtc.bandwidth.actual.bps',
  BITRATE_TARGET: 'webrtc.bandwidth.target.bps',
  PACKET_LOSS_RATE: 'webrtc.packet.loss.rate',
  JITTER_BUFFER_DELAY: 'webrtc.jitter.buffer.delay.ms',
  CPU_USAGE_PROCESS: 'process.cpu.usage.percent', // 关联浏览器进程资源占用
};

// 采集器封装
export class RTCStatsExporter {
  private meter = metrics.getMeter('webrtc-e2e');
  private histograms: Map<string, any> = new Map();

  recordStats(peerId: string, stats: RTCStatsReport) {
    stats.forEach((stat) => {
      if (stat.type === 'outbound-rtp' && stat.kind === 'video') {
        this.record(peerId, RTC_METRICS.BITRATE_ACTUAL, stat.bytesSent * 8 / (stat.timestamp - this.lastTs));
        this.record(peerId, RTC_METRICS.PACKET_LOSS_RATE, stat.packetsLost / stat.packetsSent);
      }
      // ... 更多指标映射
    });
  }
}

# scripts/baseline_detection.py
import pandas as pd
from prophet import Prophet # 或使用统计学 EWMA (指数加权移动平均)

def detect_regression(current_run_id: str, metric_name: str, window: int = 14):
    # 1. 拉取近 14 次主干构建的该指标 P95 值
    history = query_vm(f'quantile_over_time(0.95, {metric_name}[1h])', lookback='14d')
    
    # 2. 训练基线模型 (考虑周末/节假日效应)
    model = Prophet(changepoint_prior_scale=0.05)
    model.fit(history)
    
    # 3. 预测当前构建的“正常区间” (yhat_lower, yhat_upper)
    forecast = model.predict(current_timestamp)
    
    # 4. 实时值对比
    current_val = query_latest(metric_name, current_run_id)
    if current_val > forecast.yhat_upper * 1.1: # 容忍 10% 抖动
        alert(f"【性能退化】{metric_name} 当前值 {current_val} 超过基线上限 {forecast.yhat_upper:.2f}")
        # 自动关联最近 5 个合并 MR，建议排查对象

// config/browser-capabilities.ts
export const BrowserCapabilities: Record<string, BrowserCap> = {
  chromium: {
    videoCodecs: ['VP8', 'VP9', 'H264', 'AV1'], // 硬编支持依赖操作系统库
    audioCodecs: ['OPUS', 'PCMU', 'G722'],
    simulcast: true,
    svc: true, // VP9 SVC / AV1 SVC
    getStats: 'standard', // 标准 Promise-based
    screenShareAudio: true, // 支持标签页音频共享
    // 规避策略
    quirks: {
      // Chromium 在无头模式下需显式开启硬编
      headlessFlags: ['--use-gl=angle', '--enable-features=VaapiVideoEncoder'],
      // 新版 Chrome 要求安全上下文才能 enumerateDevices
      requiresSecureContext: true,
    }
  },
  firefox: {
    videoCodecs: ['VP8', 'VP9', 'H264'], // 无 AV1 硬编
    audioCodecs: ['OPUS', 'PCMU'],
    simulcast: true,
    svc: false, // Firefox 暂不支持 SVC
    getStats: 'legacy_callback_based', // 需 Polyfill 适配
    screenShareAudio: false, // 仅支持系统音频共享，无标签页音频
    quirks: {
      // Firefox ICE 候选收集较慢，需延长超时
      iceGatheringTimeout: 15000,
      // Firefox 对 DTLS 指纹验证更严格，自签名证书需导入信任库
      dtlsFingerprintStrict: true,
    }
  },
  webkit: {
    videoCodecs: ['VP8', 'H264'], // 无 VP9/AV1
    audioCodecs: ['OPUS'],
    simulcast: false, // Safari 不支持 Simulcast (依赖 Plan B 语意或统一流)
    svc: false,
    getStats: 'standard',
    screenShareAudio: false,
    quirks: {
      // Safari 强制要求用户手势触发 getUserMedia
      requiresUserGesture: true,
      // Safari 14/15 某版本 H264 profile-level-id 协商 Bug
      h264ProfileNegotiationBug: ['14.0', '14.1', '15.0'],
    }
  }
};

// test/generate-matrix.ts
import { test, expect } from '@playwright/test';
import { BrowserCapabilities } from '../config/browser-capabilities';

// 为每个浏览器动态生成支持的编解码器测试用例
for (const [browserName, caps] of Object.entries(BrowserCapabilities)) {
  for (const vCodec of caps.videoCodecs) {
    for (const aCodec of caps.audioCodecs) {
      // 跳过不支持的组合 (如 Safari + VP9)
      if (!isSupportedCombo(browserName, vCodec, aCodec)) continue;

      test(`[${browserName}] 编解码协商: ${vCodec}/${aCodec}`, async ({ page, browserName: currentBrowser }) => {
        // 1. 强制 SDP Munging 指定编解码器 (通过 setCodecPreferences 或 SDP 修改)
        await forceCodecPreference(page, vCodec, aCodec);
        
        // 2. 建立通话
        await establishCall(page);
        
        // 3. 断言实际协商结果
        const stats = await getNegotiatedCodecs(page);
        expect(stats.video.codec).toBe(vCodec.toLowerCase());
        expect(stats.audio.codec).toBe(aCodec.toLowerCase());
        
        // 4. 质量基线断言 (不同编解码器基线不同)
        const baseline = QUALITY_BASELINES[`${vCodec}_${aCodec}`];
        await assertQuality(page, baseline);
      });
    }
  }
}

# Dockerfile.webkit
# 安装 WebKitGTK 依赖
RUN apt-get install -y libwebkit2gtk-4.0-dev libgstreamer-plugins-bad1.0-0 gstreamer1.0-libav

# 启动脚本入口
ENTRYPOINT ["xvfb-run", "-a", "-s", "-screen 0 1920x1080x24", "npx", "playwright", "test", "--project=webkit"]

// utils/webkit-gesture.ts
// Safari 必须在用户手势回调中调用 getUserMedia
await page.evaluate(() => {
  // 模拟可信点击事件
  const btn = document.createElement('button');
  btn.textContent = 'Start Call (Auto)';
  btn.onclick = async () => {
    const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
    window.__AUTO_STREAM__ = stream;
    document.body.removeChild(btn);
  };
  document.body.appendChild(btn);
  btn.click(); // 触发可信事件
});
await page.waitForFunction(() => !!window.__AUTO_STREAM__);

test('安全合规：权限最小化与加密强制', async ({ page, context }) => {
  // 1. 验证未授权时无法获取设备列表 (enumerateDevices 仅返回 default)
  await context.clearPermissions();
  const devices = await page.evaluate(() => navigator.mediaDevices.enumerateDevices());
  expect(devices.filter(d => d.kind !== 'audioinput' && d.kind !== 'videoinput').length).toBe(0);

  // 2. 验证非 HTTPS / localhost 环境下 getUserMedia 直接抛 SecurityError
  await page.goto('http://insecure.test.com');
  await expect(page.evaluate(() => navigator.mediaDevices.getUserMedia({video: true})))
    .rejects.toThrow('SecurityError');

  // 3. 验证 DTLS 版本强制 1.2+ (禁止 DTLS 1.0)
  // 通过 SDP Munging 注入 DTLS 1.0 fingerprint，预期连接建立失败
  await page.route('**/signaling', route => {
    const sdp = route.request().postData();
    const downgradedSdp = sdp.replace('a=fingerprint:sha-256', 'a=fingerprint:sha-1'); // 强制降级
    route.continue({ postData: downgradedSdp });
  });
  await expect(page.locator('#connection-state')).toHaveText('failed', { timeout: 10000 });
  
  // 4. 验证 SRTP 保护配置文件 (SAVPF) 协商成功
  const stats = await getStats(page);
  expect(stats.transport.dtlsCipher).toMatch(/AES_CM_128_HMAC_SHA1_80|AES_256_GCM/);
});