preset

advanced

advanced

<video>

preset

advanced

video

window.devicePixelRatio

video_bitrate

preset

<video>

devicePixelRatio

video_bitrate

<video>

participant_joined

track_subscribed

TrackSubscribed

Selecting spatial layer=2, temporal layer=... for subscriber=EGRESS_ID, track=...

Negotiated layers for track ...: spatial=2(High)

Starting Chrome session: width=1920, height=1080

video

keyFrameInterval: 1

roomComposite.stream

roomComposite.streamOutputs

keyFrameInterval

videoBitrate

participant_joined

track_subscribed

Selecting spatial layer=

Starting Chrome session: width=..., height=...

track_subscribed

Selecting spatial layer

sfu/downtrack.go:963	max subscribed layer processed	{"room": "c802059925854a94b8593cebc0732d01", "roomID": "RM_SJ6R9pg8n5wo", "participant": "EG_avyKYeYqJXxn", "pID": "PA_7SeNUT3s4MPt", "remote": false, "trackID": "TR_VSAoBpdqwoPrq5", "relayed": false, "subscriberID": "PA_7SeNUT3s4MPt:1766384872549859711", "layer": 2, "event": "max-subscribed"}
2025/12/22 14:27:52 2025-12-22T06:27:52.722Z	DEBUG	livekit.pub	rtc/participant.go:2703	sending max subscribed quality	{"room": "c802059925854a94b8593cebc0732d01", "roomID": "RM_SJ6R9pg8n5wo", "participant": "436256720b85410dafc4e04d0c489e41", "pID": "PA_LYKfgRyfyn49", "remote": false, "trackID": "TR_VSAoBpdqwoPrq5", "qualities": [{"codec":"h264","qualities":[{"enabled":true},{"quality":1,"enabled":true},{"quality":2,"enabled":true}]}], "max": [{"CodecMime":1,"Quality":2}]}
2025/12/22 14:27:52 2025-12-22T06:27:52.722Z	DEBUG	livekit.sub	sfu/downtrack.go:965	notifying max subscribed layer	{"room": "c802059925854a94b8593cebc0732d01", "roomID": "RM_SJ6R9pg8n5wo", "participant": "EG_avyKYeYqJXxn", "pID": "PA_7SeNUT3s4MPt", "remote": false, "trackID": "TR_VSAoBpdqwoPrq5", "relayed": false, "subscriberID": "PA_7SeNUT3s4MPt:1766384872549859711", "layer": 2, "event": "max-subscribed"}

layer: 2

max-subscribed

Starting Chrome session: width=1920, height=1080

advanced

<video>

keyFrameInterval

<video>

DEBUG	livekit.pub.pub.sfu	rtpstats/rtpstats_receiver.go:259	rtp receiver stream start	{"room": "c802059925854a94b8593cebc0732d01", "roomID": "RM_SJ6R9pg8n5wo", "participant": "436256720b85410dafc4e04d0c489e41", "pID": "PA_LYKfgRyfyn49", "remote": false, "trackID": "TR_VSAoBpdqwoPrq5", "relayed": false, "mime": "video/H264", "layer": 1, "ssrc": 354665129, "rtpStats": {"startTime": "2025-12-22T06:27:53.419Z", "endTime": "1970-01-01T00:00:00.000Z", "elapsed": "17.157µs", "packetsExpected": 1, "packetsExpectedRate": 58285.24800373026, "packetsSeenPrimary": 1, "packetsSeenPrimaryRate": 58285.24800373026, "bytes": 0, "bitrate": 0, "packetsOutOfOrder": 0, "packetsLost": 0, "packetsLostRate": 0, "packetLostPercentage": 0, "nacks": 0, "nackAcks": 0, "nackMisses": 0, "nackRepeated": 0, "plis": 0, "lastPli": "1970-01-01T00:00:00.000Z", "firstTime": "2025-12-22T06:27:53.418Z", "firstTimeAdjustment": "0s", "highestTime": "2025-12-22T06:27:53.418Z", "headerBytes": 0, "packetsDuplicate": 0, "packetsDuplicateRate": 0, "bytesDuplicate": 0, "bitrateDuplicate": 0, "headerBytesDuplicate": 0, "packetsPadding": 0, "packetsPaddingRate": 0, "bytesPadding": 0, "bitratePadding": 0, "headerBytesPadding": 0, "frames": 0, "frameRate": 0, "jitter": 0, "maxJitter": 0, "firs": 0, "lastFir": "0001-01-01T00:00:00.000Z", "keyFrames": 0, "lastKeyFrame": "0001-01-01T00:00:00.000Z", "rtt": 0, "maxRtt": 0, "srFirst": {}, "srNewest": {}, "packetDrift": {}, "ntpReportDrift": {}, "receivedReportDrift": {}, "rebasedReportDrift": {}, "extStartSN": 13026, "extHighestSN": 13026, "extStartTS": 1677218775, "extHighestTS": 1677218775, "propagationDelayEstimator": {"lastSenderClockTimeNs": "1970-01-01T00:00:00.000Z", "lastPropagationDelayNs": "0s", "lastDeltaPropagationDelayNs": "0s", "estimatedPropagationDelayNs": "0s", "longTermDeltaPropagationDelayNs": "0s", "propagationDelayDeltaHighCount": 0, "propagationDelayDeltaHighStartTime": "0001-01-01T00:00:00.000Z", "propagationDelaySpikeNs": "0s"}, "clockSkew
Count": 0, "clockSkewMediaPathCount": 0, "outOfOrderSenderReportCount": 0, "largeJumpCount": 0, "largeJumpNegativeCount": 0, "timeReversedCount": 0, "packetsDroppedPreStartTimestamp": 0, "packetsDroppedOldTimestamp": 0, "packetsDroppedPreStartSequenceNumber": 0, "packetsDroppedOldSequenceNumber": 0, "restartPackets": []}}
2025/12/22 14:27:53 2025-12-22T06:27:53.419Z	DEBUG	livekit.pub.pub.sfu	buffer/buffer.go:1403	video size changed	{"room": "c802059925854a94b8593cebc0732d01", "roomID": "RM_SJ6R9pg8n5wo", "participant": "436256720b85410dafc4e04d0c489e41", "pID": "PA_LYKfgRyfyn49", "remote": false, "trackID": "TR_VSAoBpdqwoPrq5", "relayed": false, "mime": "video/H264", "layer": 1, "ssrc": 354665129, "from": [{"Width":0,"Height":0},{"Width":0,"Height":0},{"Width":0,"Height":0}], "to": [{"Width":1920,"Height":994},{"Width":0,"Height":0},{"Width":0,"Height":0}]}

layer: 2

max-subscribed

<video>

video.videoWidth

video.videoHeight

videoBitrate

keyFrameInterval

<video>

<video>

<video>

video.videoWidth

video.videoHeight

videoWidth/videoHeight

advanced.width/height

videoBitrate

<video>

videoWidth/videoHeight/devicePixelRatio

<canvas>

<video>

canvas

<video>

<video>

<canvas>

document.body.querySelectorAll('canvas')

devicePixelRatio

canvas.width

canvas.height

video.videoWidth

video.videoHeight

<video>

<video>

canvas.width = cssWidth * devicePixelRatio; canvas.height = cssHeight * devicePixelRatio; ctx.scale(devicePixelRatio, devicePixelRatio);

<video>

custom_base_url

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>Room Composite - single video</title>
  <script src="https://cdn.jsdelivr.net/npm/livekit-client@latest/dist/livekit-client.umd.js"></script>
  <style>
    html,body { margin:0; padding:0; width:100%; height:100%; background:#000; overflow:hidden; }
    #container { width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
    /* 保持视频不被 CSS 非整数缩放；用固定像素（由 Egress 的 width/height 决定 viewport） */
    video {
      width:100%;
      height:100%;
      object-fit: contain; /* 或 cover，根据你需求 */
      -webkit-font-smoothing:antialiased;
    }
  </style>
</head>
<body>
  <div id="container">
    <video id="video" autoplay playsinline muted></video>
  </div>

  <script>
    (async () => {
      // LiveKit 会通过 URL query 注入 room URL 和 token，例如 ?url=<roomUrl>&token=<token>
      const params = new URLSearchParams(window.location.search);
      const roomUrl = params.get('url');
      const token = params.get('token');

      if (!roomUrl || !token) {
        console.error('缺少 room url 或 token');
        return;
      }

      const videoEl = document.getElementById('video');
      const room = new livekit.Room();

      // 当有参与者加入或已有参与者，尽量订阅并 attach 第一个可用的视频轨道
      function attachFirstVideoFromParticipant(participant) {
        for (const pub of participant.videoTracks.values()) {
          if (pub.track) {
            pub.track.attach(videoEl);
            console.log('attached track from', participant.identity);
            return true;
          }
        }
        return false;
      }

      room.on(livekit.RoomEvent.ParticipantConnected, (p) => {
        attachFirstVideoFromParticipant(p);
      });

      // 如果进房后已有参与者，先尝试 attach
      room.on(livekit.RoomEvent.Connected, () => {
        for (const p of room.participants.values()) {
          if (attachFirstVideoFromParticipant(p)) break;
        }
      });

      // 连接房间（作为 recorder 身份）
      await room.connect(roomUrl, token);
      console.log('recorder connected');

      // optional: 打印实际渲染像素，用于确认 DPR 与 video 原始像素
      function logSizes() {
        const rect = videoEl.getBoundingClientRect();
        console.log('video CSS size:', rect.width, rect.height);
        console.log('video intrinsic size:', videoEl.videoWidth, videoEl.videoHeight);
        console.log('devicePixelRatio:', window.devicePixelRatio);
      }
      setInterval(logSizes, 3000);

      // 通知 egress 开始（部分 template 期待）——打印 START_RECORDING 日志
      console.log('START_RECORDING');
    })();
  </script>
</body>
</html>

advanced.width/height

preset

video.videoWidth/video.videoHeight

devicePixelRatio

custom_base_url

START_RECORDING

video.videoWidth/video.videoHeight

window.devicePixelRatio

<script src="https://cdn.jsdelivr.net/npm/livekit-client@latest/dist/livekit-client.umd.js"></script>
<script>
  // 等脚本加载完成再使用
  if (typeof LiveKit === 'undefined') {
    console.error('LiveKit client 未加载');
  } else {
    const room = new LiveKit.Room();
    // ...
  }
</script>

LiveKit is not defined

custom_base_url

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>Room Composite - single video</title>
  <!-- LiveKit 客户端 UMD（全局对象为 LiveKit） -->
  <script src="https://cdn.jsdelivr.net/npm/livekit-client@latest/dist/livekit-client.umd.js"></script>
  <style>
    html,body { margin:0; padding:0; width:100%; height:100%; background:#000; overflow:hidden; }
    #container { width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
    video { width:100%; height:100%; object-fit:contain; -webkit-font-smoothing:antialiased; }
    #log { position: absolute; left:8px; top:8px; color:#0f0; font-size:12px; background:rgba(0,0,0,0.4); padding:4px 6px; border-radius:4px; }
  </style>
</head>
<body>
  <div id="container">
    <video id="video" autoplay playsinline muted></video>
  </div>
  <div id="log">loading...</div>

  <script>
    (async () => {
      const logEl = document.getElementById('log');
      function log(s){ console.log(s); logEl.textContent = s; }

      // 等待 LiveKit 脚本加载
      if (typeof LiveKit === 'undefined') {
        log('LiveKit 客户端未加载或全局名不正确');
        return;
      }
      log('LiveKit 客户端已加载');

      const params = new URLSearchParams(window.location.search);
      const roomUrl = params.get('url');
      const token = params.get('token');

      if (!roomUrl || !token) {
        log('缺少 url 或 token，请通过 query 参数传入');
        return;
      }

      const videoEl = document.getElementById('video');
      const room = new LiveKit.Room();

      // 订阅第一个可用的视频轨道并 attach 到 <video>
      function attachFirstVideoFromParticipant(participant) {
        for (const pub of participant.videoTracks.values()) {
          if (pub.track) {
            pub.track.attach(videoEl);
            log('attached track from ' + participant.identity);
            return true;
          }
        }
        return false;
      }

      room.on(LiveKit.RoomEvent.ParticipantConnected, (p) => {
        attachFirstVideoFromParticipant(p);
      });

      room.on(LiveKit.RoomEvent.Connected, () => {
        for (const p of room.participants.values()) {
          if (attachFirstVideoFromParticipant(p)) break;
        }
      });

      try {
        await room.connect(roomUrl, token);
        log('recorder connected');
      } catch (e) {
        console.error(e);
        log('连接房间失败: ' + (e.message || e));
        return;
      }

      // 周期打印尺寸用于调试 DPR / 缩放问题
      setInterval(() => {
        log('css:' + videoEl.getBoundingClientRect().width.toFixed(0) + 'x' + videoEl.getBoundingClientRect().height.toFixed(0)
          + ' intrinsic:' + videoEl.videoWidth + 'x' + videoEl.videoHeight
          + ' dpr:' + window.devicePixelRatio);
      }, 3000);

      console.log('START_RECORDING');
    })();
  </script>
</body>
</html>

LiveKit.Room()

<!-- 首选 CDN -->
<script src="https://cdn.jsdelivr.net/npm/livekit-client@latest/dist/livekit-client.umd.js"></script>
<!-- 本地回退（把 dist 文件保存为 /static/livekit-client.umd.js 并部署到同域） -->
<script>
  (function checkLiveKit(){
    if (typeof LiveKit === 'undefined') {
      // 如果 CDN 未加载成功，尝试动态加载本地回退文件
      var s = document.createElement('script');
      s.src = '/static/livekit-client.umd.js'; // 请把文件放到这个路径或修改为你实际路径
      s.onload = function(){ console.log('loaded local livekit-client fallback'); };
      s.onerror = function(){ console.error('failed to load livekit client from both CDN and local fallback'); };
      document.head.appendChild(s);
    } else {
      console.log('LiveKit from CDN loaded');
    }
  })();
</script>

if (typeof LiveKit === 'undefined') {
  console.error('LiveKit still not available — aborting connect');
  // 显示友好提示或重试逻辑
} else {
  const room = new LiveKit.Room();
  // ...
}

livekit-client.umd.js

custom_base_url

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>LiveKit Egress Template - single video</title>
  <style>
    html,body { margin:0; padding:0; width:100%; height:100%; background:#000; overflow:hidden; }
    #container { width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
    video { width:100%; height:100%; object-fit:contain; background:#000; }
    #status { position:absolute; left:8px; top:8px; color:#0f0; font-size:12px; background:rgba(0,0,0,0.5); padding:6px; border-radius:4px; }
  </style>
</head>
<body>
  <div id="container">
    <video id="video" autoplay playsinline muted></video>
  </div>
  <div id="status">加载中…</div>

  <!-- UMD 版 LiveKit 客户端（全局名为 LiveKit） -->
  <script src="https://unpkg.com/livekit-client@2.16.0/dist/livekit-client.umd.js"></script>

  <script>
    (async () => {
      const status = (s) => { console.log(s); document.getElementById('status').textContent = s; };

      // 检查 LiveKit 全局对象
      if (typeof LiveKit === 'undefined') {
        console.error('LiveKit 客户端未加载 — 请检查脚本是否可访问（CDN/网络/CSP）');
        document.getElementById('status').textContent = '错误：LiveKit 未加载';
        return;
      }
      status('LiveKit 已加载');

      const params = new URLSearchParams(window.location.search);
      const url = params.get('url');   // wss://... (LiveKit server WS URL)
      const token = params.get('token'); // JWT
      if (!url || !token) {
        status('缺少 url 或 token 参数');
        console.warn('示例：egress-template.html?url=<wss url>&token=<jwt>');
        return;
      }

      const videoEl = document.getElementById('video');
      const room = new LiveKit.Room({ autoSubscribe: true });

      // 当订阅到轨道时处理
      room.on(LiveKit.RoomEvent.TrackSubscribed, (track, publication, participant) => {
        if (track.kind === 'video') {
          try {
            const ms = new MediaStream();
            ms.addTrack(track.mediaStreamTrack);
            videoEl.srcObject = ms;
            videoEl.play().catch(e => console.warn('video play blocked', e));
            status('已播放视频：' + participant.identity);
          } catch (e) {
            console.error('attach video error', e);
            status('播放视频出错');
          }
        } else if (track.kind === 'audio') {
          const ms = new MediaStream();
          ms.addTrack(track.mediaStreamTrack);
          const audio = new Audio();
          audio.srcObject = ms;
          audio.play().catch(()=>{});
        }
      });

      room.on(LiveKit.RoomEvent.TrackUnsubscribed, (track) => {
        if (track.kind === 'video') {
          videoEl.srcObject = null;
          status('视频已取消订阅');
        }
      });

      room.on(LiveKit.RoomEvent.Connected, () => {
        status('已连接房间: ' + (room.name || 'unknown'));
        // 尝试 attach 已有参与者的第一个视频
        for (const p of room.participants.values()) {
          for (const pub of p.videoTracks.values()) {
            if (pub.track) {
              const ms = new MediaStream();
              ms.addTrack(pub.track.mediaStreamTrack);
              videoEl.srcObject = ms;
              videoEl.play().catch(()=>{});
              status('已播放已有参与者视频: ' + p.identity);
              break;
            }
          }
          if (videoEl.srcObject) break;
        }
      });

      room.on(LiveKit.RoomEvent.ParticipantConnected, (p) => {
        console.log('participant connected', p.identity);
      });
      room.on(LiveKit.RoomEvent.Disconnected, () => status('已断开'));

      try {
        await room.connect(url, token);
      } catch (err) {
        console.error('连接失败', err);
        status('连接失败: ' + (err.message || err));
        return;
      }

      // 输出 START_RECORDING 供 Egress 识别
      console.log('START_RECORDING');
      status('准备就绪，等待录制');

      // 周期打印尺寸用于调试 DPR / 缩放
      setInterval(() => {
        const rect = videoEl.getBoundingClientRect();
        console.log('css:', Math.round(rect.width), 'x', Math.round(rect.height),
                    'intrinsic:', videoEl.videoWidth, 'x', videoEl.videoHeight,
                    'dpr:', window.devicePixelRatio);
      }, 3000);
    })();
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>LiveKit Egress Template - inline client</title>
  <style>
    html,body { margin:0; padding:0; width:100%; height:100%; background:#000; overflow:hidden; }
    #container { width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
    video { width:100%; height:100%; object-fit:contain; background:#000; }
    #status { position:absolute; left:8px; top:8px; color:#0f0; font-size:12px; background:rgba(0,0,0,0.5); padding:6px; border-radius:4px; }
  </style>
</head>
<body>
  <div id="container"><video id="video" autoplay playsinline muted></video></div>
  <div id="status">加载中…</div>

  <!-- 内嵌 livekit-client UMD 开始 -->
  <script>
  /* START OF INLINED livekit-client UMD (truncated minimal shim for essential Room/Track behavior)
     NOTE: This is a lightweight shim to avoid external dependency failures.
     It implements only the minimal APIs used by the template: global LiveKit.Room,
     LiveKit.RoomEvent enum, and basic connect/track subscription hooks.
     For production, replace with full library or host the full UMD locally.
  */
  (function(global){
    // Minimal event emitter
    function Emitter(){ this.handlers = {}; }
    Emitter.prototype.on = function(name, h){ (this.handlers[name]||(this.handlers[name]=[])).push(h); };
    Emitter.prototype.emit = function(name, a,b,c){ const hs=this.handlers[name]||[]; hs.forEach(fn=>{try{fn(a,b,c)}catch(e){console.error(e)}}); };

    // Minimal Track wrapper
    function Track(kind, mediaTrack){ this.kind = kind; this.mediaStreamTrack = mediaTrack; }

    // Minimal Room stub that connects via native RTCPeerConnection to given url/token is NOT implemented.
    // Instead, this shim attempts to use Real LiveKit only when available. If not, it provides a placeholder that fails early.
    if (typeof window.__REAL_LIVEKIT__ !== 'undefined') {
      global.LiveKit = window.__REAL_LIVEKIT__;
      return;
    }

    function Room(opts){
      Emitter.call(this);
      this.opts = opts||{};
      this.participants = new Map();
      this.name = null;
    }
    Room.prototype = Object.create(Emitter.prototype);
    Room.prototype.connect = async function(url, token){
      // If real LiveKit exists on window (for safety), delegate.
      if (window.__REAL_LIVEKIT__){
        global.LiveKit = window.__REAL_LIVEKIT__;
        return global.LiveKit.Room.prototype.connect.call(this, url, token);
      }
      // Otherwise, we cannot implement full websocket connection here.
      // Throw an explicit error so template shows meaningful message.
      throw new Error('内联 shim 无法建立真实 LiveKit 连接；请部署完整 livekit-client 或允许 CDN 加载。');
    };

    // Expose minimal constants/events used by template
    const RoomEvent = {
      Connected: 'connected',
      TrackSubscribed: 'trackSubscribed',
      TrackUnsubscribed: 'trackUnsubscribed',
      ParticipantConnected: 'participantConnected',
      Disconnected: 'disconnected'
    };

    global.LiveKit = { Room: Room, RoomEvent: RoomEvent };
  })(window);
  /* END OF INLINED livekit-client UMD shim */
  </script>
  <!-- 内嵌 livekit-client UMD 结束 -->

  <script>
    (async () => {
      const statusEl = document.getElementById('status');
      const setStatus = s => { console.log(s); statusEl.textContent = s; };

      // If full real LiveKit loaded from CDN/local, assign to window.__REAL_LIVEKIT__ for shim to delegate.
      if (typeof window.__REAL_LIVEKIT__ === 'undefined' && typeof LiveKit !== 'undefined' && LiveKit.Room && LiveKit.Room.prototype.connect) {
        // if LiveKit seems full, mark real
        window.__REAL_LIVEKIT__ = LiveKit;
      }

      // If only the shim is present, attempting to connect will fail with clear message.
      if (typeof LiveKit === 'undefined') {
        setStatus('错误：LiveKit 客户端不可用');
        return;
      }
      setStatus('LiveKit 可用');

      const params = new URLSearchParams(window.location.search);
      const url = params.get('url');
      const token = params.get('token');
      if (!url || !token) {
        setStatus('缺少 url 或 token');
        return;
      }

      // If the environment has the real LiveKit (delegated), use it.
      if (window.__REAL_LIVEKIT__) {
        const videoEl = document.getElementById('video');
        const room = new LiveKit.Room({ autoSubscribe: true });

        room.on(LiveKit.RoomEvent.TrackSubscribed, (track, pub, participant) => {
          if (track.kind === 'video') {
            const ms = new MediaStream();
            ms.addTrack(track.mediaStreamTrack);
            videoEl.srcObject = ms;
            videoEl.play().catch(()=>{});
            setStatus('播放视频：' + (participant?.identity || 'unknown'));
          }
        });

        room.on(LiveKit.RoomEvent.Connected, () => {
          setStatus('已连接房间：' + (room.name || 'unknown'));
          console.log('START_RECORDING');
        });

        try {
          await room.connect(url, token);
        } catch (e) {
          console.error(e);
          setStatus('连接失败: ' + (e.message || e));
        }
        return;
      }

      // No real LiveKit available — inform clearly
      setStatus('当前模板未加载到完整 LiveKit 客户端，无法连接。请允许 CDN 或部署完整版 livekit-client。');
      console.error('No real LiveKit client available. To fix: host full UMD livekit-client or allow CDN.');
    })();
  </script>
</body>
</html>

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/></head>
<body style="margin:0;background:#000">
  <video id="video" autoplay playsinline muted style="width:100vw;height:100vh;object-fit:contain;"></video>
  <div id="status" style="position:fixed;left:8px;top:8px;color:#0f0"></div>

  <script src="https://unpkg.com/livekit-client@2.16.0/dist/livekit-client.umd.js"></script>

  <script>
  (async ()=> {
    const setStatus = s => { console.log(s); document.getElementById('status').textContent = s; };

    if (typeof LiveKit === 'undefined') { setStatus('LiveKit 未加载'); return; }
    setStatus('LiveKit 已加载');

    const params = new URLSearchParams(window.location.search);
    const url = params.get('url'), token = params.get('token');
    if (!url || !token) { setStatus('缺少 url 或 token'); return; }

    const room = new LiveKit.Room({ autoSubscribe: true });
    const video = document.getElementById('video');

    room.on(LiveKit.RoomEvent.TrackSubscribed, (track, pub, participant) => {
      if (track.kind === 'video') {
        const ms = new MediaStream(); ms.addTrack(track.mediaStreamTrack);
        video.srcObject = ms; video.play().catch(()=>{});
        setStatus('播放: ' + (participant?.identity||'unknown'));
      }
    });

    room.on(LiveKit.RoomEvent.Connected, ()=> setStatus('已连接: ' + (room.name||'unknown')));
    room.on(LiveKit.RoomEvent.Disconnected, ()=> setStatus('已断开'));

    try {
      await room.connect(url, token);
      console.log('START_RECORDING');
    } catch (e) {
      console.error(e);
      setStatus('连接失败: ' + (e.message||e));
    }
  })();
  </script>
</body>
</html>

<!doctype html>
<html>
<head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/></head>
<body style="margin:0;background:#000">
  <div id="status" style="position:fixed;left:8px;top:8px;color:#0f0"></div>
  <video id="video" autoplay playsinline muted style="width:100vw;height:100vh;object-fit:contain;"></video>

  <!-- 1) 首选从 CDN 加载 UMD -->
  <script src="https://unpkg.com/livekit-client@2.16.0/dist/livekit-client.umd.js"></script>

  <script>
  (async ()=>{
    const setStatus = s => { console.log(s); document.getElementById('status').textContent = s; };

    // 检查是否加载成功
    if (typeof LiveKit === 'undefined') {
      setStatus('LiveKit 未加载 (window.LiveKit undefined)');
      return;
    }
    setStatus('LiveKit 已加载');

    const params = new URLSearchParams(window.location.search);
    const url = params.get('url'), token = params.get('token');
    if (!url || !token) { setStatus('请在地址栏添加 ?url=<wss>&token=<jwt>'); return; }

    const room = new LiveKit.Room({ autoSubscribe: true });
    const video = document.getElementById('video');

    room.on(LiveKit.RoomEvent.TrackSubscribed, (track, pub, participant) => {
      if (track.kind === 'video') {
        const ms = new MediaStream(); ms.addTrack(track.mediaStreamTrack);
        video.srcObject = ms; video.play().catch(()=>{});
        setStatus('播放: ' + (participant?.identity||'unknown'));
      }
    });

    try {
      await room.connect(url, token);
      setStatus('已连接');
      console.log('START_RECORDING');
    } catch (e) {
      console.error(e);
      setStatus('连接失败: ' + (e.message||e));
    }
  })();
  </script>
</body>
</html>

livekit-client.umd.js

livekit-client.umd.js

npx http-server .

<!doctype html>
<html>
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width,initial-scale=1"/>
  <title>Local Egress Template</title>
  <style>
    html,body{margin:0;height:100%;background:#000}
    video{width:100vw;height:100vh;object-fit:contain}
    #status{position:fixed;left:8px;top:8px;color:#0f0;background:rgba(0,0,0,0.5);padding:6px;border-radius:4px}
  </style>
</head>
<body>
  <video id="video" autoplay playsinline muted></video>
  <div id="status">loading...</div>

  <!-- 本地引用 livekit-client UMD -->
  <script src="./livekit-client.umd.js"></script>

  <script>
  (async ()=>{
    const setStatus = s=>{console.log(s);document.getElementById('status').textContent=s;}

    if (typeof LiveKit === 'undefined') {
      setStatus('LiveKit 未加载 (请确认 livekit-client.umd.js 在同目录)');
      return;
    }
    setStatus('LiveKit 已加载');

    const params = new URLSearchParams(window.location.search);
    const url = params.get('url'), token = params.get('token');
    if (!url || !token) { setStatus('请在地址栏添加 ?url=<wss>&token=<jwt>'); return; }

    const room = new LiveKit.Room({ autoSubscribe: true });
    const video = document.getElementById('video');

    room.on(LiveKit.RoomEvent.TrackSubscribed, (track, pub, participant) => {
      if (track.kind === 'video') {
        const ms = new MediaStream(); ms.addTrack(track.mediaStreamTrack);
        video.srcObject = ms; video.play().catch(()=>{});
        setStatus('播放: ' + (participant?.identity||'unknown'));
      }
    });

    room.on(LiveKit.RoomEvent.Connected, () => { setStatus('已连接: ' + (room.name||'unknown')); console.log('START_RECORDING'); });
    room.on(LiveKit.RoomEvent.Disconnected, ()=> setStatus('已断开'));

    try {
      await room.connect(url, token);
    } catch (e) {
      console.error(e);
      setStatus('连接失败: ' + (e.message||e));
    }
  })();
  </script>
</body>
</html>

url

LiveKit

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width,initial-scale=1"/>
  <title>egress-template</title>
  <style>
    html,body{margin:0;height:100%;background:#000}
    video{width:100vw;height:100vh;object-fit:contain}
    #status{position:fixed;left:8px;top:8px;color:#0f0;background:rgba(0,0,0,0.5);padding:6px;border-radius:4px}
  </style>
</head>
<body>
  <video id="video" autoplay playsinline muted></video>
  <div id="status">loading...</div>

  <!-- 使用你提供的可访问 URL -->
  <script>
    // 动态插入脚本并在加载成功后执行主逻辑，避免顺序问题
    (function(){
      const LIB_URL = '<https://meetingin.hanweb.com/live_files/livekit-client.umd.js>';
      const statusEl = () => document.getElementById('status');

      function setStatus(s){ console.log(s); if (statusEl()) statusEl().textContent = s; }

      function loadScript(src, cb, errCb){
        const s = document.createElement('script');
        s.src = src;
        s.async = false;
        s.onload = () => cb && cb();
        s.onerror = (e) => errCb && errCb(e);
        document.head.appendChild(s);
      }

      // 先尝试加载库
      loadScript(LIB_URL, onLibLoaded, (e)=>{
        console.error('脚本加载失败', e);
        setStatus('脚本加载失败，请检查 URL/网络/CSP');
      });

      async function onLibLoaded(){
        setStatus('livekit-client 脚本已加载，验证全局对象...');
        // 小延迟确保浏览器执行全局变量注册
        await new Promise(r=>setTimeout(r, 50));

        if (typeof LiveKit === 'undefined') {
          // 进一步诊断：检查 script 标签与返回内容类型
          try {
            const scripts = Array.from(document.querySelectorAll('script')).map(s=>s.src || s.outerHTML).slice(-5);
            console.warn('当前页面最后几个 script 标签：', scripts);
            setStatus('加载了脚本但 LiveKit 未定义（检查返回内容或全局名）');
          } catch(e){ console.error(e); }
          return;
        }
        setStatus('LiveKit 已加载');

        // 下面是主逻辑，确保在库加载后运行
        const params = new URLSearchParams(window.location.search);
        const url = params.get('url'), token = params.get('token');
        if (!url || !token) {
          setStatus('缺少 url 或 token，请在地址栏添加 ?url=<wss>&token=<jwt>');
          return;
        }

        const videoEl = document.getElementById('video');
        const room = new LiveKit.Room({ autoSubscribe: true });

        room.on(LiveKit.RoomEvent.TrackSubscribed, (track, pub, participant) => {
          if (track.kind === 'video') {
            const ms = new MediaStream();
            ms.addTrack(track.mediaStreamTrack);
            videoEl.srcObject = ms;
            videoEl.play().catch(()=>{});
            setStatus('播放: ' + (participant?.identity||'unknown'));
          }
        });

        room.on(LiveKit.RoomEvent.Connected, ()=> {
          setStatus('已连接: ' + (room.name||'unknown'));
          console.log('START_RECORDING');
        });
        room.on(LiveKit.RoomEvent.Disconnected, ()=> setStatus('已断开'));

        try {
          await room.connect(url, token);
        } catch (e) {
          console.error(e);
          setStatus('连接失败: ' + (e.message || e));
        }
      }
    })();
  </script>
</body>
</html>

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).LivekitClient={})}(this,(function(e){"use strict";function t(e,t){return t.forEach((function(t){t&&"string"!=typeof t&&!Array.isArray(t)&&Object.keys(t).forEach((function(n){if("default"!==n&&!(n in e)){var i=Object.getOwnPropertyDescriptor(t,n);Object.defineProperty(e,n,i.get?i:{enumerable:!0,get:function(){return t[n]}})}}))})),Object.freeze(e)}var n=Object.defineProperty,i=(e,t,i)=>((e,t,i)=>t in e?n(e,t,{enumerable:!0,configurable:!0,writable:!0,value:i}):e[t]=i)(e,"symbol"!=typeof t?t+"":t,i);class

LiveKit

window.LivekitClient

LiveKit

const LK = window.LiveKit || window.LivekitClient;
    if (!LK) { /* 报错处理 */ }
    const room = new LK.Room(...);

livekit-client.umd.js

LivekitClient={}

LiveKit

<script>
      if (typeof window.LivekitClient !== 'undefined' && typeof window.LiveKit === 'undefined') {
        window.LiveKit = window.LivekitClient;
      }
    </script>

const LK = window.LiveKit || window.LivekitClient;

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width,initial-scale=1"/>
  <title>egress-template-compatible</title>
  <style>
    html,body{margin:0;height:100%;background:#000}
    video{width:100vw;height:100vh;object-fit:contain}
    #status{position:fixed;left:8px;top:8px;color:#0f0;background:rgba(0,0,0,0.5);padding:6px;border-radius:4px}
  </style>
</head>
<body>
  <video id="video" autoplay playsinline muted></video>
  <div id="status">loading...</div>

  <script>
    (function(){
      const UMD_URL = '<https://meetingin.hanweb.com/live_files/livekit-client.umd.js>'; // 你的 UMD 地址
      const statusEl = () => document.getElementById('status');
      const setStatus = s => { console.log(s); if (statusEl()) statusEl().textContent = s; };

      function loadScript(src) {
        return new Promise((resolve, reject) => {
          const s = document.createElement('script');
          s.src = src;
          s.async = false;
          s.onload = () => resolve();
          s.onerror = (e) => reject(e);
          document.head.appendChild(s);
        });
      }

      (async () => {
        try {
          await loadScript(UMD_URL);
        } catch (e) {
          console.error('脚本加载失败', e);
          setStatus('脚本加载失败，请检查 URL/网络/CSP');
          return;
        }

        // 等短暂时间确保脚本执行
        await new Promise(r => setTimeout(r, 50));

        // 兼容不同全局名
        const LK = window.LiveKit || window.LivekitClient || window.Livekitclient || window.Livekit || null;
        if (!LK) {
          console.error('LiveKit 全局对象未找到，已加载脚本但未导出期望全局名。');
          setStatus('已加载脚本但未找到 LiveKit 全局对象（检查 UMD 导出名）');
          return;
        }
        setStatus('LiveKit 已加载（兼容名）');

        // 使用 LK 作为客户端命名空间
        const params = new URLSearchParams(window.location.search);
        const url = params.get('url'), token = params.get('token');
        if (!url || !token) {
          setStatus('缺少 url 或 token，请在地址栏添加 ?url=<wss>&token=<jwt>');
          return;
        }

        const videoEl = document.getElementById('video');
        const room = new LK.Room({ autoSubscribe: true });

        room.on(LK.RoomEvent.TrackSubscribed, (track, pub, participant) => {
          if (track.kind === 'video') {
            const ms = new MediaStream();
            ms.addTrack(track.mediaStreamTrack);
            videoEl.srcObject = ms;
            videoEl.play().catch(()=>{});
            setStatus('播放: ' + (participant?.identity || 'unknown'));
          }
        });

        room.on(LK.RoomEvent.Connected, () => {
          setStatus('已连接: ' + (room.name || 'unknown'));
          console.log('START_RECORDING');
        });
        room.on(LK.RoomEvent.Disconnected, () => setStatus('已断开'));

        try {
          await room.connect(url, token);
        } catch (err) {
          console.error('连接失败', err);
          setStatus('连接失败: ' + (err.message || err));
        }
      })();
    })();
  </script>
</body>
</html>

advanced.width/height

Starting Chrome session: width=1920, height=1080

advanced.width/height

videoBitrate

video.videoHeight

window.devicePixelRatio

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width,initial-scale=1"/>
  <title>egress-debug-template</title>
  <style>
    html,body{margin:0;height:100%;background:#000;color:#fff;font-family:Arial,Helvetica,sans-serif}
    #wrap{position:relative;width:100vw;height:100vh}
    video{width:100%;height:100%;object-fit:contain;background:#000}
    #log {
      position: absolute; left:8px; top:8px; max-width:40%; max-height:90%;
      overflow:auto; background:rgba(0,0,0,0.6); padding:8px; border-radius:6px;
      font-size:12px; line-height:1.3; color:#0f0;
      white-space:pre-wrap;
    }
    #controls { position:absolute; right:8px; top:8px; background:rgba(0,0,0,0.6); padding:8px; border-radius:6px; font-size:12px; }
    button{margin:4px 0;padding:6px 8px}
  </style>
</head>
<body>
  <div id="wrap">
    <video id="video" autoplay playsinline muted></video>

    <div id="log">初始化…</div>

    <div id="controls">
      <div id="status">状态: loading</div>
      <button id="dump">马上打印一次</button>
      <button id="stats">抓取 webrtc stats</button>
    </div>
  </div>

  <script>
  (function(){
    const UMD_URL = '<https://meetingin.hanweb.com/live_files/livekit-client.umd.js>';
    const logEl = document.getElementById('log');
    const statusEl = document.getElementById('status');
    const videoEl = document.getElementById('video');
    const dumpBtn = document.getElementById('dump');
    const statsBtn = document.getElementById('stats');

    function appendLog(s){
      const t = new Date().toISOString();
      console.log(t, s);
      logEl.textContent = t + '  ' + s + '\n\n' + logEl.textContent;
    }
    function setStatus(s){ statusEl.textContent = '状态: ' + s; appendLog('[STATUS] ' + s); }

    // 动态加载 UMD
    function loadScript(src){ return new Promise((res, rej) => {
      const s = document.createElement('script'); s.src = src; s.async = false;
      s.onload = ()=>res(); s.onerror = (e)=>rej(e); document.head.appendChild(s);
    }); }

    // 打印当前视频/渲染/页面像素信息
    function dumpSizes(){
      try{
        const rect = videoEl.getBoundingClientRect();
        const intrinsicW = videoEl.videoWidth||0;
        const intrinsicH = videoEl.videoHeight||0;
        const dpr = window.devicePixelRatio || 1;
        appendLog(`[DUMP] CSS size: ${Math.round(rect.width)}x${Math.round(rect.height)}, intrinsic: ${intrinsicW}x${intrinsicH}, devicePixelRatio: ${dpr}`);
      }catch(e){ appendLog('[DUMP ERROR] ' + e); }
    }

    // 从 track 获取 receiver stats（若可用）
    async function fetchReceiverStats(track){
      try{
        if (!track || !track.mediaStreamTrack) { appendLog('[STATS] track 无效'); return; }
        const pc = track._pc || track._receiver?.peerConnection || null;
        // 尝试通过 track.mediaStreamTrack 获取关联的 RTCRtpReceiver stats - 此处兼容性有限
        // 优先查找 peer connection via window.__LIVEKIT_DEBUG_PC__ 或 track 库内部引用（可根据情况调整）
        appendLog('[STATS] 尝试读取 stats（若有）...');
        // If the track has a receiver with getStats:
        const receiver = track._receiver || null;
        if (receiver && receiver.getStats) {
          const stats = await receiver.getStats();
          appendLog('[STATS] receiver.getStats() 可用，条数: ' + stats.size);
          // 打印部分关键项
          stats.forEach(s=>{
            if (s.type === 'inbound-rtp' || s.type === 'track') {
              appendLog('  stat: ' + s.type + ' bitrate=' + (s.bitrate||s.bytesReceived||'') + ' frames=' + (s.framesDecoded||'') + ' packetLoss=' + (s.packetsLost||''));
            }
          });
          return;
        }
        // 否则尝试查找 RTCPeerConnection 全局（不一定存在）
        appendLog('[STATS] 无法读取 receiver stats（缺少 receiver.getStats），请抓取 webrtc internals 或 SFU 日志）');
      }catch(e){ appendLog('[STATS ERROR] ' + e); }
    }

    (async ()=>{
      setStatus('加载脚本...');
      try {
        await loadScript(UMD_URL);
      } catch (e) {
        appendLog('[ERROR] 脚本加载失败: ' + e);
        setStatus('脚本加载失败');
        return;
      }
      await new Promise(r=>setTimeout(r,50));
      // 兼容不同全局名
      const LK = window.LiveKit || window.LivekitClient || window.Livekit || window.Livekitclient || null;
      if (!LK) {
        appendLog('[ERROR] 已加载脚本但未导出 LiveKit 全局对象。window keys: ' + Object.keys(window).slice(-50).join(','));
        setStatus('脚本已载入但未找到 LiveKit 全局名');
        return;
      }
      appendLog('[INFO] LiveKit 可用，使用全局名: ' + (window.LiveKit ? 'LiveKit' : (window.LivekitClient ? 'LivekitClient' : 'unknown')));
      setStatus('LiveKit 已加载');

      const params = new URLSearchParams(window.location.search);
      const url = params.get('url'), token = params.get('token');
      if (!url || !token) { setStatus('缺少 url/token'); appendLog('[ERROR] 缺少 url 或 token'); return; }

      const room = new LK.Room({ autoSubscribe: true });
      appendLog('[INFO] 创建 Room 实例');

      // 当订阅到轨道时记录并 attach
      room.on(LK.RoomEvent.TrackSubscribed, async (track, pub, participant) => {
        appendLog(`[EVENT] TrackSubscribed kind=${track.kind} participant=${participant?.identity || 'unknown'} sid=${pub?.sid||pub?.trackSid||''}`);
        if (track.kind === 'video') {
          const ms = new MediaStream(); ms.addTrack(track.mediaStreamTrack);
          videoEl.srcObject = ms;
          videoEl.play().catch(()=>{});
          // 小延迟后打印尺寸
          setTimeout(dumpSizes, 300);
          // 尝试抓取 receiver stats（若可）
          fetchReceiverStats(track).catch(()=>{});
        }
      });

      room.on(LK.RoomEvent.TrackUnsubscribed, (track) => {
        appendLog(`[EVENT] TrackUnsubscribed kind=${track.kind}`);
        if (track.kind === 'video') videoEl.srcObject = null;
      });

      room.on(LK.RoomEvent.Connected, ()=> {
        appendLog('[EVENT] Room Connected name=' + (room.name||'unknown'));
        setStatus('已连接');
        console.log('START_RECORDING');
      });
      room.on(LK.RoomEvent.Disconnected, ()=> {
        appendLog('[EVENT] Room Disconnected'); setStatus('已断开');
      });

      // 尝试连接
      appendLog('[ACTION] 开始连接 room...');
      try {
        await room.connect(url, token);
        appendLog('[ACTION] connect() resolved');
      } catch (e) {
        appendLog('[ERROR] connect() failed: ' + (e && (e.message||e)));
        setStatus('连接失败');
      }

      // 周期打印
      setInterval(()=>{
        try {
          const rect = videoEl.getBoundingClientRect();
          appendLog(`[PERIODIC] css:${Math.round(rect.width)}x${Math.round(rect.height)} intrinsic:${videoEl.videoWidth}x${videoEl.videoHeight} dpr:${window.devicePixelRatio}`);
        } catch(e){ appendLog('[PERIODIC ERROR] ' + e); }
      }, 5000);
    })();

    // 按钮事件
    dumpBtn.addEventListener('click', dumpSizes);
    statsBtn.addEventListener('click', () => {
      // 尝试从 room participants 查找第一个 video track 并获取 stats
      try {
        const LK = window.LiveKit || window.LivekitClient || window.Livekit || window.Livekitclient;
        for (const p of (LK && LK.Room ? [] : [])) {} // noop
        appendLog('[STATS] 手动触发：若支持，stats 会在订阅回调自动尝试');
      } catch(e){ appendLog('[STATS CLICK ERROR] ' + e); }
    });
  })();
  </script>
</body>
</html>

videoWidth

muted

video.readyState

video.paused

videoBitrate

keyFrameInterval

H264_HIGH

H264_MAIN

bytesSent

bitrate

videoBitrate

H264_HIGH

<style>
  html,body{margin:0;height:100%;background:#000}
  #container{width:1920px;height:1080px;margin:0 auto;background:#000;display:flex;align-items:center;justify-content:center}
  video{
    width:100%;
    height:100%;
    object-fit:contain;
    image-rendering: pixelated; /* 减少浏览器插值 */
    transform: none;
    will-change: auto;
  }
</style>

<div id="container">
  <video id="video" autoplay playsinline muted></video>
</div>

<script>
  // attach 后按 DPR 强制设置实际像素（在订阅回调或 attach 后调用）
  function alignVideoPixels(videoEl){
    const rect = videoEl.getBoundingClientRect();
    const dpr = window.devicePixelRatio || 1;
    videoEl.width = Math.round(rect.width * dpr);
    videoEl.height = Math.round(rect.height * dpr);
    // optional: set styles to avoid transforms
    videoEl.style.transform = 'none';
  }

  // 在 TrackSubscribed 回调里：
  // videoEl.srcObject = ms; videoEl.play().then(()=> setTimeout(()=>alignVideoPixels(videoEl), 200)).catch(...)
</script>

[DUMP] CSS size: ${Math.round(rect.width)}x${Math.round(rect.height)}, intrinsic: ${intrinsicW}x${intrinsicH}, devicePixelRatio: ${dpr}

[EVENT] TrackSubscribed kind=${track.kind} participant=${participant?.identity || 'unknown'} sid=${pub?.sid||pub?.trackSid||''}

[EVENT] TrackUnsubscribed kind=${track.kind}

[PERIODIC] css:${Math.round(rect.width)}x${Math.round(rect.height)} intrinsic:${videoEl.videoWidth}x${videoEl.videoHeight} dpr:${window.devicePixelRatio}

video{
  width:100%;
  height:100%;
  object-fit:contain;
  image-rendering: pixelated;
  transform: none;
  backface-visibility: hidden;
}
#log, #controls { display:none; } /* 在正式录制时隐藏 */

async function attachWithRetry(track, videoEl, maxRetries = 5){
  const ms = new MediaStream(); ms.addTrack(track.mediaStreamTrack);
  let attempts = 0;
  videoEl.srcObject = ms;
  while(attempts < maxRetries){
    await new Promise(r => setTimeout(r, 300));
    const iw = videoEl.videoWidth || 0;
    const ih = videoEl.videoHeight || 0;
    if (iw > 0 && ih > 0){
      // 对齐像素
      const rect = videoEl.getBoundingClientRect();
      const dpr = window.devicePixelRatio || 1;
      videoEl.width = Math.round(rect.width * dpr);
      videoEl.height = Math.round(rect.height * dpr);
      console.log('attach ok intrinsic', iw, ih, 'set pixel size', videoEl.width, videoEl.height);
      return true;
    }
    attempts++;
    console.log('attach retry', attempts);
  }
  console.warn('attach failed after retries; intrinsic still 0');
  return false;
}

videoBitrate

keyFrameInterval

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width,initial-scale=1"/>
  <title>egress-optimized-template</title>
  <style>
    html,body{margin:0;height:100%;background:#000;color:#fff;font-family:Arial,Helvetica,sans-serif}
    #wrap{position:relative;width:100vw;height:100vh}
    /* 固定容器为目标像素（建议 egress advanced 指定为 1920x1080） */
    #container { width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:#000; }
    video{
      width:100%;
      height:100%;
      object-fit:contain;
      /* 降低浏览器平滑插值，尽量保持像素细节（对屏幕共享效果视场景） */
      image-rendering: pixelated;
      -webkit-font-smoothing:antialiased;
      transform:none;
      backface-visibility:hidden;
      will-change: auto;
    }
    /* 调试面板，录制时隐藏 */
    #log {
      position: absolute; left:8px; top:8px; max-width:40%; max-height:90%;
      overflow:auto; background:rgba(0,0,0,0.6); padding:8px; border-radius:6px;
      font-size:12px; line-height:1.3; color:#0f0; white-space:pre-wrap;
      z-index:1000;
    }
    #controls { position:absolute; right:8px; top:8px; background:rgba(0,0,0,0.6); padding:8px; border-radius:6px; font-size:12px; z-index:1000; }
    button{margin:4px 0;padding:6px 8px}
    /* 隐藏调试面板（录制时启用） */
    .hide-debug #log, .hide-debug #controls { display:none !important; }
  </style>
</head>
<body>
  <div id="wrap">
    <div id="container">
      <video id="video" autoplay playsinline muted></video>
    </div>

    <div id="log">初始化…</div>

    <div id="controls">
      <div id="status">状态: loading</div>
      <button id="dump">马上打印一次</button>
      <button id="stats">抓取 webrtc stats</button>
      <button id="hide">隐藏调试（进入录制模式）</button>
    </div>
  </div>

  <script>
  (function(){
    // 修改为你的 UMD 地址
    const UMD_URL = '<https://meetingin.hanweb.com/live_files/livekit-client.umd.js>';
    const logEl = document.getElementById('log');
    const statusEl = document.getElementById('status');
    const videoEl = document.getElementById('video');
    const dumpBtn = document.getElementById('dump');
    const statsBtn = document.getElementById('stats');
    const hideBtn = document.getElementById('hide');

    function appendLog(s){
      const t = new Date().toISOString();
      console.log(t, s);
      if (logEl) logEl.textContent = t + '  ' + s + '\n\n' + logEl.textContent;
    }
    function setStatus(s){ if (statusEl) statusEl.textContent = '状态: ' + s; appendLog('[STATUS] ' + s); }

    // 动态加载 UMD
    function loadScript(src){ return new Promise((res, rej) => {
      const s = document.createElement('script');
      s.src = src;
      s.async = false;
      s.onload = ()=>res();
      s.onerror = (e)=>rej(e);
      document.head.appendChild(s);
    }); }

    // 强制按 DPR 对齐 video 实际像素
    function alignVideoPixels(videoEl){
      try {
        const rect = videoEl.getBoundingClientRect();
        const dpr = window.devicePixelRatio || 1;
        videoEl.width = Math.round(rect.width * dpr);
        videoEl.height = Math.round(rect.height * dpr);
        appendLog(`[ALIGN] set video.width=${videoEl.width}, video.height=${videoEl.height}, dpr=${dpr}`);
      } catch (e) {
        appendLog('[ALIGN ERROR] ' + e);
      }
    }

    // attach 并重试直至 intrinsic 可用
    async function attachWithRetry(track, videoEl, maxRetries = 6, interval = 300){
      const ms = new MediaStream();
      ms.addTrack(track.mediaStreamTrack);
      videoEl.srcObject = ms;
      videoEl.play().catch(()=>{});
      let attempts = 0;
      while (attempts < maxRetries){
        await new Promise(r => setTimeout(r, interval));
        const iw = videoEl.videoWidth || 0;
        const ih = videoEl.videoHeight || 0;
        appendLog(`[ATTEMPT] try=${attempts+1} intrinsic=${iw}x${ih}`);
        if (iw > 0 && ih > 0){
          // 对齐像素并返回成功
          alignVideoPixels(videoEl);
          return true;
        }
        attempts++;
      }
      appendLog('[ATTACH WARN] intrinsic仍为0，attach 可能失败或轨道无帧');
      return false;
    }

    // 尝试从 track 获取 receiver stats（兼容性有限）
    async function fetchReceiverStats(track){
      try{
        if (!track || !track.mediaStreamTrack) { appendLog('[STATS] track 无效'); return; }
        appendLog('[STATS] 尝试读取 receiver stats...');
        const receiver = track._receiver || null;
        if (receiver && typeof receiver.getStats === 'function') {
          const stats = await receiver.getStats();
          appendLog('[STATS] receiver.getStats() 返回 ' + (Array.isArray(stats)?stats.length: (stats.size||'?')) );
          try {
            // 打印典型 inbound-rtp 项
            if (stats.forEach) {
              stats.forEach(s => {
                if (s.type === 'inbound-rtp' || s.type === 'track') {
                  appendLog(' stat: ' + s.type + ' bytesReceived=' + (s.bytesReceived||'') + ' framesDecoded=' + (s.framesDecoded||'') + ' packetsLost=' + (s.packetsLost||''));
                }
              });
            } else {
              // Map-like
              stats.forEach && stats.forEach((s)=>{ if (s.type) appendLog(' stat: ' + s.type + ' ' + JSON.stringify(s).slice(0,200)); });
            }
          } catch(e){ appendLog('[STATS PARSE ERROR] ' + e); }
          return;
        }
        appendLog('[STATS] 无法读取 receiver.getStats，需在 SFU/egress 侧获取 webrtc internals');
      } catch (e) { appendLog('[STATS ERROR] ' + e); }
    }

    // 主流程
    (async ()=>{
      setStatus('加载脚本...');
      try {
        await loadScript(UMD_URL);
      } catch (e) {
        appendLog('[ERROR] 脚本加载失败: ' + e);
        setStatus('脚本加载失败');
        return;
      }
      // 短延迟确保 UMD 注册全局
      await new Promise(r=>setTimeout(r, 50));

      const LK = window.LiveKit || window.LivekitClient || window.Livekit || window.Livekitclient || null;
      if (!LK) {
        appendLog('[ERROR] 已加载脚本但未导出 LiveKit 全局对象。window keys: ' + Object.keys(window).slice(-50).join(','));
        setStatus('脚本已载入但未找到 LiveKit 全局名');
        return;
      }
      appendLog('[INFO] LiveKit 可用，使用全局名: ' + (window.LiveKit ? 'LiveKit' : (window.LivekitClient ? 'LivekitClient' : 'unknown')));
      setStatus('LiveKit 已加载');

      const params = new URLSearchParams(window.location.search);
      const url = params.get('url'), token = params.get('token');
      if (!url || !token) { setStatus('缺少 url/token'); appendLog('[ERROR] 缺少 url 或 token'); return; }

      const room = new LK.Room({ autoSubscribe: true });
      appendLog('[INFO] 创建 Room 实例');

      room.on(LK.RoomEvent.TrackSubscribed, async (track, pub, participant) => {
        appendLog(`[EVENT] TrackSubscribed kind=${track.kind} participant=${participant?.identity || 'unknown'} sid=${pub?.sid||pub?.trackSid||''}`);
        if (track.kind === 'video') {
          await attachWithRetry(track, videoEl, 6, 300);
          fetchReceiverStats(track).catch(()=>{});
        }
      });

      room.on(LK.RoomEvent.TrackUnsubscribed, (track) => {
        appendLog(`[EVENT] TrackUnsubscribed kind=${track.kind}`);
        if (track.kind === 'video') {
          videoEl.srcObject = null;
        }
      });

      room.on(LK.RoomEvent.Connected, ()=> {
        appendLog('[EVENT] Room Connected name=' + (room.name||'unknown'));
        setStatus('已连接');
        console.log('START_RECORDING');
      });
      room.on(LK.RoomEvent.Disconnected, ()=> { appendLog('[EVENT] Room Disconnected'); setStatus('已断开'); });

      appendLog('[ACTION] 开始连接 room...');
      try {
        await room.connect(url, token);
        appendLog('[ACTION] connect() resolved');
      } catch (e) {
        appendLog('[ERROR] connect() failed: ' + (e && (e.message||e)));
        setStatus('连接失败');
      }

      // 周期打印用于诊断
      setInterval(()=>{
        try {
          const rect = videoEl.getBoundingClientRect();
          appendLog(`[PERIODIC] css:${Math.round(rect.width)}x${Math.round(rect.height)} intrinsic:${videoEl.videoWidth}x${videoEl.videoHeight} dpr:${window.devicePixelRatio}`);
        } catch(e){ appendLog('[PERIODIC ERROR] ' + e); }
      }, 5000);
    })();

    // 控件事件
    dumpBtn.addEventListener('click', ()=> {
      const rect = videoEl.getBoundingClientRect();
      appendLog(`[DUMP] css:${Math.round(rect.width)}x${Math.round(rect.height)} intrinsic:${videoEl.videoWidth}x${videoEl.videoHeight} dpr:${window.devicePixelRatio}`);
    });
    statsBtn.addEventListener('click', ()=> {
      appendLog('[STATS] 手动触发：若支持，订阅回调会自动尝试读取 receiver stats');
    });
    hideBtn.addEventListener('click', ()=> {
      document.documentElement.classList.add('hide-debug');
      appendLog('[ACTION] 已隐藏调试面板（录制模式）');
    });

  })();
  </script>
</body>
</html>

UMD_URL

videoBitrate

/* 在你的 video 样式中加入 */
video {
  filter: contrast(1.05) saturate(1.03) /* 轻微增强对比色彩 */
          drop-shadow(0 0 0 rgba(0,0,0,0)) /* 保持渲染链 */
          ; 
  /* 后续可通过 backdrop-filter / filter: blur(-x) 不支持，使用下面的 sharpen via SVG */
}

<svg style="position:absolute; width:0; height:0;">
  <filter id="sharpen">
    <feConvolveMatrix order="3" kernelMatrix="0 -1 0 -1 5 -1 0 -1 0" divisor="1"/>
  </filter>
</svg>

video { filter: none; -webkit-filter: none; }
.sharpened { filter: url(#sharpen); }

<video>

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width,initial-scale=1"/>
  <title>egress-sharpen-template</title>
  <style>
    html,body{margin:0;height:100%;background:#000;color:#fff;font-family:Arial,Helvetica,sans-serif}
    #wrap{position:relative;width:100vw;height:100vh}
    #container{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#000}
    /* video 基本样式 */
    video{
      width:100%;
      height:100%;
      object-fit:contain;
      transform:none;
      backface-visibility:hidden;
      will-change:auto;
      -webkit-font-smoothing:antialiased;
      /* 增强对比作为基础 */
      filter: contrast(1.05) saturate(1.03);
      /* 默认不直接引用 SVG 卷积（通过类控制是否启用 sharpen） */
    }
    /* 当启用 sharpen 时应用 SVG filter（兼容多数浏览器） */
    .sharpened { filter: url(#sharpen) contrast(1.05) saturate(1.03); }

    /* 调试面板（录制时可隐藏） */
    #log{position:absolute;left:8px;top:8px;max-width:40%;max-height:90%;overflow:auto;background:rgba(0,0,0,0.6);padding:8px;border-radius:6px;font-size:12px;line-height:1.3;color:#0f0;white-space:pre-wrap;z-index:1000}
    #controls{position:absolute;right:8px;top:8px;background:rgba(0,0,0,0.6);padding:8px;border-radius:6px;font-size:12px;z-index:1000}
    button{margin:4px 0;padding:6px 8px}
    .hide-debug #log, .hide-debug #controls { display:none !important; }
  </style>

  <!-- SVG 卷积滤镜定义（3x3 锐化核：center weight > neighbors） -->
  <svg width="0" height="0" style="position:absolute">
    <defs>
      <filter id="sharpen" x="-20%" y="-20%" width="140%" height="140%" color-interpolation-filters="sRGB">
        <!-- 卷积核：  0 -1  0
                      -1  5 -1
                       0 -1  0  -->
        <feConvolveMatrix order="3" kernelMatrix="0 -1 0 -1 5 -1 0 -1 0" divisor="1" bias="0" kernelUnitLength="1 1"/>
        <!-- 可选：稍微提升锐化对比 -->
        <feComponentTransfer>
          <feFuncR type="gamma" amplitude="1" exponent="1" offset="0"/>
          <feFuncG type="gamma" amplitude="1" exponent="1" offset="0"/>
          <feFuncB type="gamma" amplitude="1" exponent="1" offset="0"/>
        </feComponentTransfer>
      </filter>
    </defs>
  </svg>
</head>
<body>
  <div id="wrap">
    <div id="container">
      <video id="video" autoplay playsinline muted></video>
    </div>

    <div id="log">初始化…</div>
    <div id="controls">
      <div id="status">状态: loading</div>
      <button id="dump">马上打印一次</button>
      <button id="toggleSharpen">切换锐化</button>
      <button id="hide">隐藏调试（录制模式）</button>
    </div>
  </div>

  <script>
  (function(){
    const UMD_URL = '<https://meetingin.hanweb.com/live_files/livekit-client.umd.js>';
    const logEl = document.getElementById('log');
    const statusEl = document.getElementById('status');
    const videoEl = document.getElementById('video');
    const dumpBtn = document.getElementById('dump');
    const toggleSharpenBtn = document.getElementById('toggleSharpen');
    const hideBtn = document.getElementById('hide');

    function appendLog(s){
      const t = new Date().toISOString();
      console.log(t, s);
      if (logEl) logEl.textContent = t + '  ' + s + '\n\n' + logEl.textContent;
    }
    function setStatus(s){ if (statusEl) statusEl.textContent = '状态: ' + s; appendLog('[STATUS] ' + s); }

    function loadScript(src){ return new Promise((res, rej) => {
      const s = document.createElement('script'); s.src = src; s.async = false;
      s.onload = ()=>res(); s.onerror = (e)=>rej(e); document.head.appendChild(s);
    }); }

    function alignVideoPixels(videoEl){
      try {
        const rect = videoEl.getBoundingClientRect();
        const dpr = window.devicePixelRatio || 1;
        videoEl.width = Math.round(rect.width * dpr);
        videoEl.height = Math.round(rect.height * dpr);
        appendLog(`[ALIGN] set video.width=${videoEl.width}, video.height=${videoEl.height}, dpr=${dpr}`);
      } catch (e) {
        appendLog('[ALIGN ERROR] ' + e);
      }
    }

    async function attachWithRetry(track, videoEl, maxRetries = 6, interval = 300){
      const ms = new MediaStream(); ms.addTrack(track.mediaStreamTrack);
      videoEl.srcObject = ms;
      videoEl.play().catch(()=>{});
      let attempts = 0;
      while (attempts < maxRetries){
        await new Promise(r => setTimeout(r, interval));
        const iw = videoEl.videoWidth || 0;
        const ih = videoEl.videoHeight || 0;
        appendLog(`[ATTEMPT] try=${attempts+1} intrinsic=${iw}x${ih}`);
        if (iw > 0 && ih > 0){
          alignVideoPixels(videoEl);
          return true;
        }
        attempts++;
      }
      appendLog('[ATTACH WARN] intrinsic仍为0，attach 可能失败或轨道无帧');
      return false;
    }

    async function fetchReceiverStats(track){
      try{
        if (!track || !track.mediaStreamTrack) { appendLog('[STATS] track 无效'); return; }
        appendLog('[STATS] 尝试读取 receiver stats...');
        const receiver = track._receiver || null;
        if (receiver && typeof receiver.getStats === 'function') {
          const stats = await receiver.getStats();
          appendLog('[STATS] receiver.getStats() 返回 ' + (stats.size||'?'));
          try {
            stats.forEach(s => {
              if (s.type === 'inbound-rtp' || s.type === 'track') {
                appendLog(' stat: ' + s.type + ' bytesReceived=' + (s.bytesReceived||'') + ' framesDecoded=' + (s.framesDecoded||'') + ' packetsLost=' + (s.packetsLost||''));
              }
            });
          } catch(e){ appendLog('[STATS PARSE ERROR] ' + e); }
          return;
        }
        appendLog('[STATS] 无法读取 receiver.getStats，需在 SFU/egress 侧获取 webrtc internals');
      } catch (e) { appendLog('[STATS ERROR] ' + e); }
    }

    (async ()=>{
      setStatus('加载脚本...');
      try {
        await loadScript(UMD_URL);
      } catch (e) {
        appendLog('[ERROR] 脚本加载失败: ' + e);
        setStatus('脚本加载失败');
        return;
      }
      await new Promise(r=>setTimeout(r,50));

      const LK = window.LiveKit || window.LivekitClient || window.Livekit || window.Livekitclient || null;
      if (!LK) {
        appendLog('[ERROR] 已加载脚本但未导出 LiveKit 全局对象。window keys: ' + Object.keys(window).slice(-50).join(','));
        setStatus('脚本已载入但未找到 LiveKit 全局名');
        return;
      }
      appendLog('[INFO] LiveKit 可用，使用全局名: ' + (window.LiveKit ? 'LiveKit' : (window.LivekitClient ? 'LivekitClient' : 'unknown')));
      setStatus('LiveKit 已加载');

      const params = new URLSearchParams(window.location.search);
      const url = params.get('url'), token = params.get('token');
      if (!url || !token) { setStatus('缺少 url/token'); appendLog('[ERROR] 缺少 url 或 token'); return; }

      const room = new LK.Room({ autoSubscribe: true });
      appendLog('[INFO] 创建 Room 实例');

      room.on(LK.RoomEvent.TrackSubscribed, async (track, pub, participant) => {
        appendLog(`[EVENT] TrackSubscribed kind=${track.kind} participant=${participant?.identity || 'unknown'} sid=${pub?.sid||pub?.trackSid||''}`);
        if (track.kind === 'video') {
          await attachWithRetry(track, videoEl, 6, 300);
          fetchReceiverStats(track).catch(()=>{});
        }
      });

      room.on(LK.RoomEvent.TrackUnsubscribed, (track) => {
        appendLog(`[EVENT] TrackUnsubscribed kind=${track.kind}`);
        if (track.kind === 'video') {
          videoEl.srcObject = null;
        }
      });

      room.on(LK.RoomEvent.Connected, ()=> {
        appendLog('[EVENT] Room Connected name=' + (room.name||'unknown'));
        setStatus('已连接');
        console.log('START_RECORDING');
      });
      room.on(LK.RoomEvent.Disconnected, ()=> { appendLog('[EVENT] Room Disconnected'); setStatus('已断开'); });

      appendLog('[ACTION] 开始连接 room...');
      try {
        await room.connect(url, token);
        appendLog('[ACTION] connect() resolved');
      } catch (e) {
        appendLog('[ERROR] connect() failed: ' + (e && (e.message||e)));
        setStatus('连接失败');
      }

      setInterval(()=>{
        try {
          const rect = videoEl.getBoundingClientRect();
          appendLog(`[PERIODIC] css:${Math.round(rect.width)}x${Math.round(rect.height)} intrinsic:${videoEl.videoWidth}x${videoEl.videoHeight} dpr:${window.devicePixelRatio}`);
        } catch(e){ appendLog('[PERIODIC ERROR] ' + e); }
      }, 5000);
    })();

    // 控件事件
    dumpBtn.addEventListener('click', ()=> {
      const rect = videoEl.getBoundingClientRect();
      appendLog(`[DUMP] css:${Math.round(rect.width)}x${Math.round(rect.height)} intrinsic:${videoEl.videoWidth}x${videoEl.videoHeight} dpr:${window.devicePixelRatio}`);
    });
    toggleSharpenBtn.addEventListener('click', ()=> {
      videoEl.classList.toggle('sharpened');
      appendLog('[ACTION] 切换锐化 -> ' + (videoEl.classList.contains('sharpened') ? 'ON' : 'OFF'));
    });
    hideBtn.addEventListener('click', ()=> {
      document.documentElement.classList.add('hide-debug');
      appendLog('[ACTION] 已隐藏调试面板（录制模式）');
    });

  })();
  </script>
</body>
</html>

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width,initial-scale=1"/>
  <title>egress-sharpen-on</title>
  <style>
    html,body{margin:0;height:100%;background:#000;color:#fff;font-family:Arial,Helvetica,sans-serif}
    #wrap{position:relative;width:100vw;height:100vh}
    #container{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#000}
    video{
      width:100%;
      height:100%;
      object-fit:contain;
      transform:none;
      backface-visibility:hidden;
      will-change:auto;
      -webkit-font-smoothing:antialiased;
      /* 基础对比/饱和度微调 */
      filter: contrast(1.05) saturate(1.03);
      /* 默认直接启用 SVG 锐化 */
      filter: url(#sharpen) contrast(1.05) saturate(1.03);
    }
    /* 调试面板（录制时隐藏） */
    #log{position:absolute;left:8px;top:8px;max-width:40%;max-height:90%;overflow:auto;background:rgba(0,0,0,0.6);padding:8px;border-radius:6px;font-size:12px;line-height:1.3;color:#0f0;white-space:pre-wrap;z-index:1000}
    #controls{position:absolute;right:8px;top:8px;background:rgba(0,0,0,0.6);padding:8px;border-radius:6px;font-size:12px;z-index:1000}
    button{margin:4px 0;padding:6px 8px}
    .hide-debug #log, .hide-debug #controls { display:none !important; }
  </style>

  <!-- SVG 卷积滤镜定义（3x3 锐化核） -->
  <svg width="0" height="0" style="position:absolute">
    <defs>
      <filter id="sharpen" x="-20%" y="-20%" width="140%" height="140%" color-interpolation-filters="sRGB">
        <feConvolveMatrix order="3" kernelMatrix="0 -1 0 -1 5 -1 0 -1 0" divisor="1" bias="0" kernelUnitLength="1 1"/>
      </filter>
    </defs>
  </svg>
</head>
<body>
  <div id="wrap">
    <div id="container">
      <video id="video" autoplay playsinline muted></video>
    </div>

    <div id="log">初始化…</div>
    <div id="controls">
      <div id="status">状态: loading</div>
      <button id="dump">马上打印一次</button>
      <button id="hide">隐藏调试（录制模式）</button>
    </div>
  </div>

  <script>
  (function(){
    const UMD_URL = '<https://meetingin.hanweb.com/live_files/livekit-client.umd.js>';
    const logEl = document.getElementById('log');
    const statusEl = document.getElementById('status');
    const videoEl = document.getElementById('video');
    const dumpBtn = document.getElementById('dump');
    const hideBtn = document.getElementById('hide');

    function appendLog(s){
      const t = new Date().toISOString();
      console.log(t, s);
      if (logEl) logEl.textContent = t + '  ' + s + '\n\n' + logEl.textContent;
    }
    function setStatus(s){ if (statusEl) statusEl.textContent = '状态: ' + s; appendLog('[STATUS] ' + s); }

    function loadScript(src){ return new Promise((res, rej) => {
      const s = document.createElement('script'); s.src = src; s.async = false;
      s.onload = ()=>res(); s.onerror = (e)=>rej(e); document.head.appendChild(s);
    }); }

    function alignVideoPixels(videoEl){
      try {
        const rect = videoEl.getBoundingClientRect();
        const dpr = window.devicePixelRatio || 1;
        videoEl.width = Math.round(rect.width * dpr);
        videoEl.height = Math.round(rect.height * dpr);
        appendLog(`[ALIGN] set video.width=${videoEl.width}, video.height=${videoEl.height}, dpr=${dpr}`);
      } catch (e) {
        appendLog('[ALIGN ERROR] ' + e);
      }
    }

    async function attachWithRetry(track, videoEl, maxRetries = 6, interval = 300){
      const ms = new MediaStream(); ms.addTrack(track.mediaStreamTrack);
      videoEl.srcObject = ms;
      videoEl.play().catch(()=>{});
      let attempts = 0;
      while (attempts < maxRetries){
        await new Promise(r => setTimeout(r, interval));
        const iw = videoEl.videoWidth || 0;
        const ih = videoEl.videoHeight || 0;
        appendLog(`[ATTEMPT] try=${attempts+1} intrinsic=${iw}x${ih}`);
        if (iw > 0 && ih > 0){
          alignVideoPixels(videoEl);
          return true;
        }
        attempts++;
      }
      appendLog('[ATTACH WARN] intrinsic仍为0，attach 可能失败或轨道无帧');
      return false;
    }

    async function fetchReceiverStats(track){
      try{
        if (!track || !track.mediaStreamTrack) { appendLog('[STATS] track 无效'); return; }
        appendLog('[STATS] 尝试读取 receiver stats...');
        const receiver = track._receiver || null;
        if (receiver && typeof receiver.getStats === 'function') {
          const stats = await receiver.getStats();
          appendLog('[STATS] receiver.getStats() 返回 ' + (stats.size||'?'));
          try {
            stats.forEach(s => {
              if (s.type === 'inbound-rtp' || s.type === 'track') {
                appendLog(' stat: ' + s.type + ' bytesReceived=' + (s.bytesReceived||'') + ' framesDecoded=' + (s.framesDecoded||'') + ' packetsLost=' + (s.packetsLost||''));
              }
            });
          } catch(e){ appendLog('[STATS PARSE ERROR] ' + e); }
          return;
        }
        appendLog('[STATS] 无法读取 receiver.getStats，需在 SFU/egress 侧获取 webrtc internals');
      } catch (e) { appendLog('[STATS ERROR] ' + e); }
    }

    (async ()=>{
      setStatus('加载脚本...');
      try {
        await loadScript(UMD_URL);
      } catch (e) {
        appendLog('[ERROR] 脚本加载失败: ' + e);
        setStatus('脚本加载失败');
        return;
      }
      await new Promise(r=>setTimeout(r,50));

      const LK = window.LiveKit || window.LivekitClient || window.Livekit || window.Livekitclient || null;
      if (!LK) {
        appendLog('[ERROR] 已加载脚本但未导出 LiveKit 全局对象。window keys: ' + Object.keys(window).slice(-50).join(','));
        setStatus('脚本已载入但未找到 LiveKit 全局名');
        return;
      }
      appendLog('[INFO] LiveKit 可用，使用全局名: ' + (window.LiveKit ? 'LiveKit' : (window.LivekitClient ? 'LivekitClient' : 'unknown')));
      setStatus('LiveKit 已加载');

      const params = new URLSearchParams(window.location.search);
      const url = params.get('url'), token = params.get('token');
      if (!url || !token) { setStatus('缺少 url/token'); appendLog('[ERROR] 缺少 url 或 token'); return; }

      const room = new LK.Room({ autoSubscribe: true });
      appendLog('[INFO] 创建 Room 实例');

      room.on(LK.RoomEvent.TrackSubscribed, async (track, pub, participant) => {
        appendLog(`[EVENT] TrackSubscribed kind=${track.kind} participant=${participant?.identity || 'unknown'} sid=${pub?.sid||pub?.trackSid||''}`);
        if (track.kind === 'video') {
          await attachWithRetry(track, videoEl, 6, 300);
          fetchReceiverStats(track).catch(()=>{});
        }
      });

      room.on(LK.RoomEvent.TrackUnsubscribed, (track) => {
        appendLog(`[EVENT] TrackUnsubscribed kind=${track.kind}`);
        if (track.kind === 'video') {
          videoEl.srcObject = null;
        }
      });

      room.on(LK.RoomEvent.Connected, ()=> {
        appendLog('[EVENT] Room Connected name=' + (room.name||'unknown'));
        setStatus('已连接');
        console.log('START_RECORDING');
      });
      room.on(LK.RoomEvent.Disconnected, ()=> { appendLog('[EVENT] Room Disconnected'); setStatus('已断开'); });

      appendLog('[ACTION] 开始连接 room...');
      try {
        await room.connect(url, token);
        appendLog('[ACTION] connect() resolved');
      } catch (e) {
        appendLog('[ERROR] connect() failed: ' + (e && (e.message||e)));
        setStatus('连接失败');
      }

      setInterval(()=>{
        try {
          const rect = videoEl.getBoundingClientRect();
          appendLog(`[PERIODIC] css:${Math.round(rect.width)}x${Math.round(rect.height)} intrinsic:${videoEl.videoWidth}x${videoEl.videoHeight} dpr:${window.devicePixelRatio}`);
        } catch(e){ appendLog('[PERIODIC ERROR] ' + e); }
      }, 5000);
    })();

    dumpBtn.addEventListener('click', ()=> {
      const rect = videoEl.getBoundingClientRect();
      appendLog(`[DUMP] css:${Math.round(rect.width)}x${Math.round(rect.height)} intrinsic:${videoEl.videoWidth}x${videoEl.videoHeight} dpr:${window.devicePixelRatio}`);
    });
    hideBtn.addEventListener('click', ()=> {
      document.documentElement.classList.add('hide-debug');
      appendLog('[ACTION] 已隐藏调试面板（录制模式）');
    });

  })();
  </script>
</body>
</html>

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width,initial-scale=1"/>
  <title>egress-sharpen-soft</title>
  <style>
    html,body{margin:0;height:100%;background:#000;color:#fff;font-family:Arial,Helvetica,sans-serif}
    #wrap{position:relative;width:100vw;height:100vh}
    #container{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#000}
    video{
      width:100%;
      height:100%;
      object-fit:contain;
      transform:none;
      backface-visibility:hidden;
      will-change:auto;
      -webkit-font-smoothing:antialiased;
      /* 轻微提升对比度与饱和度 */
      filter: contrast(1.03) saturate(1.02);
      /* 默认启用轻微 SVG 锐化 */
      filter: url(#sharpen_soft) contrast(1.03) saturate(1.02);
    }
    #log{position:absolute;left:8px;top:8px;max-width:40%;max-height:90%;overflow:auto;background:rgba(0,0,0,0.6);padding:8px;border-radius:6px;font-size:12px;line-height:1.3;color:#0f0;white-space:pre-wrap;z-index:1000}
    #controls{position:absolute;right:8px;top:8px;background:rgba(0,0,0,0.6);padding:8px;border-radius:6px;font-size:12px;z-index:1000}
    button{margin:4px 0;padding:6px 8px}
    .hide-debug #log, .hide-debug #controls { display:none !important; }
  </style>

  <!-- 轻微锐化滤镜：邻位权重 -0.5，中心权重 3 -->
  <svg width="0" height="0" style="position:absolute">
    <defs>
      <filter id="sharpen_soft" x="-20%" y="-20%" width="140%" height="140%" color-interpolation-filters="sRGB">
        <!-- kernel:
             0  -0.5  0
            -0.5  3  -0.5
             0  -0.5  0 -->
        <feConvolveMatrix order="3" kernelMatrix="0 -0.5 0 -0.5 3 -0.5 0 -0.5 0" divisor="1" bias="0" kernelUnitLength="1 1"/>
      </filter>
    </defs>
  </svg>
</head>
<body>
  <div id="wrap">
    <div id="container">
      <video id="video" autoplay playsinline muted></video>
    </div>

    <div id="log">初始化…</div>
    <div id="controls">
      <div id="status">状态: loading</div>
      <button id="dump">马上打印一次</button>
      <button id="hide">隐藏调试（录制模式）</button>
    </div>
  </div>

  <script>
  (function(){
    const UMD_URL = '<https://meetingin.hanweb.com/live_files/livekit-client.umd.js>';
    const logEl = document.getElementById('log');
    const statusEl = document.getElementById('status');
    const videoEl = document.getElementById('video');
    const dumpBtn = document.getElementById('dump');
    const hideBtn = document.getElementById('hide');

    function appendLog(s){
      const t = new Date().toISOString();
      console.log(t, s);
      if (logEl) logEl.textContent = t + '  ' + s + '\n\n' + logEl.textContent;
    }
    function setStatus(s){ if (statusEl) statusEl.textContent = '状态: ' + s; appendLog('[STATUS] ' + s); }

    function loadScript(src){ return new Promise((res, rej) => {
      const s = document.createElement('script'); s.src = src; s.async = false;
      s.onload = ()=>res(); s.onerror = (e)=>rej(e); document.head.appendChild(s);
    }); }

    function alignVideoPixels(videoEl){
      try {
        const rect = videoEl.getBoundingClientRect();
        const dpr = window.devicePixelRatio || 1;
        videoEl.width = Math.round(rect.width * dpr);
        videoEl.height = Math.round(rect.height * dpr);
        appendLog(`[ALIGN] set video.width=${videoEl.width}, video.height=${videoEl.height}, dpr=${dpr}`);
      } catch (e) {
        appendLog('[ALIGN ERROR] ' + e);
      }
    }

    async function attachWithRetry(track, videoEl, maxRetries = 6, interval = 300){
      const ms = new MediaStream(); ms.addTrack(track.mediaStreamTrack);
      videoEl.srcObject = ms;
      videoEl.play().catch(()=>{});
      let attempts = 0;
      while (attempts < maxRetries){
        await new Promise(r => setTimeout(r, interval));
        const iw = videoEl.videoWidth || 0;
        const ih = videoEl.videoHeight || 0;
        appendLog(`[ATTEMPT] try=${attempts+1} intrinsic=${iw}x${ih}`);
        if (iw > 0 && ih > 0){
          alignVideoPixels(videoEl);
          return true;
        }
        attempts++;
      }
      appendLog('[ATTACH WARN] intrinsic仍为0，attach 可能失败或轨道无帧');
      return false;
    }

    async function fetchReceiverStats(track){
      try{
        if (!track || !track.mediaStreamTrack) { appendLog('[STATS] track 无效'); return; }
        appendLog('[STATS] 尝试读取 receiver stats...');
        const receiver = track._receiver || null;
        if (receiver && typeof receiver.getStats === 'function') {
          const stats = await receiver.getStats();
          appendLog('[STATS] receiver.getStats() 返回 ' + (stats.size||'?'));
          try {
            stats.forEach(s => {
              if (s.type === 'inbound-rtp' || s.type === 'track') {
                appendLog(' stat: ' + s.type + ' bytesReceived=' + (s.bytesReceived||'') + ' framesDecoded=' + (s.framesDecoded||'') + ' packetsLost=' + (s.packetsLost||''));
              }
            });
          } catch(e){ appendLog('[STATS PARSE ERROR] ' + e); }
          return;
        }
        appendLog('[STATS] 无法读取 receiver.getStats，需在 SFU/egress 侧获取 webrtc internals');
      } catch (e) { appendLog('[STATS ERROR] ' + e); }
    }

    (async ()=>{
      setStatus('加载脚本...');
      try {
        await loadScript(UMD_URL);
      } catch (e) {
        appendLog('[ERROR] 脚本加载失败: ' + e);
        setStatus('脚本加载失败');
        return;
      }
      await new Promise(r=>setTimeout(r,50));

      const LK = window.LiveKit || window.LivekitClient || window.Livekit || window.Livekitclient || null;
      if (!LK) {
        appendLog('[ERROR] 已加载脚本但未导出 LiveKit 全局对象。window keys: ' + Object.keys(window).slice(-50).join(','));
        setStatus('脚本已载入但未找到 LiveKit 全局名');
        return;
      }
      appendLog('[INFO] LiveKit 可用，使用全局名: ' + (window.LiveKit ? 'LiveKit' : (window.LivekitClient ? 'LivekitClient' : 'unknown')));
      setStatus('LiveKit 已加载');

      const params = new URLSearchParams(window.location.search);
      const url = params.get('url'), token = params.get('token');
      if (!url || !token) { setStatus('缺少 url/token'); appendLog('[ERROR] 缺少 url 或 token'); return; }

      const room = new LK.Room({ autoSubscribe: true });
      appendLog('[INFO] 创建 Room 实例');

      room.on(LK.RoomEvent.TrackSubscribed, async (track, pub, participant) => {
        appendLog(`[EVENT] TrackSubscribed kind=${track.kind} participant=${participant?.identity || 'unknown'} sid=${pub?.sid||pub?.trackSid||''}`);
        if (track.kind === 'video') {
          await attachWithRetry(track, videoEl, 6, 300);
          fetchReceiverStats(track).catch(()=>{});
        }
      });

      room.on(LK.RoomEvent.TrackUnsubscribed, (track) => {
        appendLog(`[EVENT] TrackUnsubscribed kind=${track.kind}`);
        if (track.kind === 'video') {
          videoEl.srcObject = null;
        }
      });

      room.on(LK.RoomEvent.Connected, ()=> {
        appendLog('[EVENT] Room Connected name=' + (room.name||'unknown'));
        setStatus('已连接');
        console.log('START_RECORDING');
      });
      room.on(LK.RoomEvent.Disconnected, ()=> { appendLog('[EVENT] Room Disconnected'); setStatus('已断开'); });

      appendLog('[ACTION] 开始连接 room...');
      try {
        await room.connect(url, token);
        appendLog('[ACTION] connect() resolved');
      } catch (e) {
        appendLog('[ERROR] connect() failed: ' + (e && (e.message||e)));
        setStatus('连接失败');
      }

      setInterval(()=>{
        try {
          const rect = videoEl.getBoundingClientRect();
          appendLog(`[PERIODIC] css:${Math.round(rect.width)}x${Math.round(rect.height)} intrinsic:${videoEl.videoWidth}x${videoEl.videoHeight} dpr:${window.devicePixelRatio}`);
        } catch(e){ appendLog('[PERIODIC ERROR] ' + e); }
      }, 5000);
    })();

    dumpBtn.addEventListener('click', ()=> {
      const rect = videoEl.getBoundingClientRect();
      appendLog(`[DUMP] css:${Math.round(rect.width)}x${Math.round(rect.height)} intrinsic:${videoEl.videoWidth}x${videoEl.videoHeight} dpr:${window.devicePixelRatio}`);
    });
    hideBtn.addEventListener('click', ()=> {
      document.documentElement.classList.add('hide-debug');
      appendLog('[ACTION] 已隐藏调试面板（录制模式）');
    });

  })();
  </script>
</body>
</html>

[ALIGN] set video.width=${videoEl.width}, video.height=${videoEl.height}, dpr=${dpr}

[ATTEMPT] try=${attempts+1} intrinsic=${iw}x${ih}

[EVENT] TrackSubscribed kind=${track.kind} participant=${participant?.identity || 'unknown'} sid=${pub?.sid||pub?.trackSid||''}

[EVENT] TrackUnsubscribed kind=${track.kind}

[PERIODIC] css:${Math.round(rect.width)}x${Math.round(rect.height)} intrinsic:${videoEl.videoWidth}x${videoEl.videoHeight} dpr:${window.devicePixelRatio}

[DUMP] css:${Math.round(rect.width)}x${Math.round(rect.height)} intrinsic:${videoEl.videoWidth}x${videoEl.videoHeight} dpr:${window.devicePixelRatio}

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width,initial-scale=1"/>
  <title>egress-sharpen-soft-minlog</title>
  <style>
    html,body{margin:0;height:100%;background:#000;color:#fff;font-family:Arial,Helvetica,sans-serif}
    #wrap{position:relative;width:100vw;height:100vh}
    #container{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#000}
    video{
      width:100%;
      height:100%;
      object-fit:contain;
      transform:none;
      backface-visibility:hidden;
      will-change:auto;
      -webkit-font-smoothing:antialiased;
      /* 轻微对比/饱和度调整 */
      filter: contrast(1.02) saturate(1.02);
      /* 轻微 SVG 锐化 */
      filter: url(#sharpen_soft) contrast(1.02) saturate(1.02);
    }
    #log{position:absolute;left:8px;top:8px;max-width:40%;max-height:90%;overflow:auto;background:rgba(0,0,0,0.6);padding:8px;border-radius:6px;font-size:12px;line-height:1.3;color:#0f0;white-space:pre-wrap;z-index:1000}
    #controls{position:absolute;right:8px;top:8px;background:rgba(0,0,0,0.6);padding:8px;border-radius:6px;font-size:12px;z-index:1000}
    button{margin:4px 0;padding:6px 8px}
    .hide-debug #log, .hide-debug #controls { display:none !important; }
  </style>

  <!-- 更轻微的锐化滤镜：邻位 -0.25，中心 2.5 -->
  <svg width="0" height="0" style="position:absolute">
    <defs>
      <filter id="sharpen_soft" x="-20%" y="-20%" width="140%" height="140%" color-interpolation-filters="sRGB">
        <!-- kernel:
             0  -0.25  0
            -0.25  2.5  -0.25
             0  -0.25  0 -->
        <feConvolveMatrix order="3" kernelMatrix="0 -0.25 0 -0.25 2.5 -0.25 0 -0.25 0" divisor="1" bias="0" kernelUnitLength="1 1"/>
      </filter>
    </defs>
  </svg>
</head>
<body>
  <div id="wrap">
    <div id="container">
      <video id="video" autoplay playsinline muted></video>
    </div>

    <div id="log">初始化…</div>
    <div id="controls">
      <div id="status">状态: loading</div>
      <button id="dump">打印当前尺寸</button>
      <button id="hide">隐藏调试（录制模式）</button>
    </div>
  </div>

  <script>
  (function(){
    const UMD_URL = '<https://meetingin.hanweb.com/live_files/livekit-client.umd.js>';
    const logEl = document.getElementById('log');
    const statusEl = document.getElementById('status');
    const videoEl = document.getElementById('video');
    const dumpBtn = document.getElementById('dump');
    const hideBtn = document.getElementById('hide');

    function appendLog(s){
      const t = new Date().toISOString();
      console.log(t, s);
      if (logEl) logEl.textContent = t + '  ' + s + '\n\n' + logEl.textContent;
    }
    function setStatus(s){ if (statusEl) statusEl.textContent = '状态: ' + s; appendLog('[STATUS] ' + s); }

    function loadScript(src){ return new Promise((res, rej) => {
      const s = document.createElement('script'); s.src = src; s.async = false;
      s.onload = ()=>res(); s.onerror = (e)=>rej(e); document.head.appendChild(s);
    }); }

    function alignVideoPixels(videoEl){
      try {
        const rect = videoEl.getBoundingClientRect();
        const dpr = window.devicePixelRatio || 1;
        videoEl.width = Math.round(rect.width * dpr);
        videoEl.height = Math.round(rect.height * dpr);
        appendLog(`[ALIGN] set video.width=${videoEl.width}, video.height=${videoEl.height}, dpr=${dpr}`);
      } catch (e) {
        appendLog('[ALIGN ERROR] ' + e);
      }
    }

    async function attachWithRetry(track, videoEl, maxRetries = 6, interval = 300){
      const ms = new MediaStream(); ms.addTrack(track.mediaStreamTrack);
      videoEl.srcObject = ms;
      videoEl.play().catch(()=>{});
      let attempts = 0;
      while (attempts < maxRetries){
        await new Promise(r => setTimeout(r, interval));
        const iw = videoEl.videoWidth || 0;
        const ih = videoEl.videoHeight || 0;
        appendLog(`[ATTEMPT] try=${attempts+1} intrinsic=${iw}x${ih}`);
        if (iw > 0 && ih > 0){
          alignVideoPixels(videoEl);
          return true;
        }
        attempts++;
      }
      appendLog('[ATTACH WARN] intrinsic仍为0，attach 可能失败或轨道无帧');
      return false;
    }

    (async ()=>{
      setStatus('加载脚本...');
      try {
        await loadScript(UMD_URL);
      } catch (e) {
        appendLog('[ERROR] 脚本加载失败: ' + e);
        setStatus('脚本加载失败');
        return;
      }
      await new Promise(r=>setTimeout(r,50));

      const LK = window.LiveKit || window.LivekitClient || window.Livekit || window.Livekitclient || null;
      if (!LK) {
        appendLog('[ERROR] 已加载脚本但未导出 LiveKit 全局对象。window keys: ' + Object.keys(window).slice(-50).join(','));
        setStatus('脚本已载入但未找到 LiveKit 全局名');
        return;
      }
      appendLog('[INFO] LiveKit 可用，使用全局名: ' + (window.LiveKit ? 'LiveKit' : (window.LivekitClient ? 'LivekitClient' : 'unknown')));
      setStatus('LiveKit 已加载');

      const params = new URLSearchParams(window.location.search);
      const url = params.get('url'), token = params.get('token');
      if (!url || !token) { setStatus('缺少 url/token'); appendLog('[ERROR] 缺少 url 或 token'); return; }

      const room = new LK.Room({ autoSubscribe: true });
      appendLog('[INFO] 创建 Room 实例');

      room.on(LK.RoomEvent.TrackSubscribed, async (track, pub, participant) => {
        appendLog(`[EVENT] TrackSubscribed kind=${track.kind} participant=${participant?.identity || 'unknown'} sid=${pub?.sid||pub?.trackSid||''}`);
        if (track.kind === 'video') {
          await attachWithRetry(track, videoEl, 6, 300);
        }
      });

      room.on(LK.RoomEvent.TrackUnsubscribed, (track) => {
        appendLog(`[EVENT] TrackUnsubscribed kind=${track.kind}`);
        if (track.kind === 'video') {
          videoEl.srcObject = null;
        }
      });

      room.on(LK.RoomEvent.Connected, ()=> {
        appendLog('[EVENT] Room Connected name=' + (room.name||'unknown'));
        setStatus('已连接');
        console.log('START_RECORDING');
      });
      room.on(LK.RoomEvent.Disconnected, ()=> { appendLog('[EVENT] Room Disconnected'); setStatus('已断开'); });

      appendLog('[ACTION] 开始连接 room...');
      try {
        await room.connect(url, token);
        appendLog('[ACTION] connect() resolved');
      } catch (e) {
        appendLog('[ERROR] connect() failed: ' + (e && (e.message||e)));
        setStatus('连接失败');
      }

      // 移除周期性日志：仅在用户手动打印时输出尺寸
    })();

    dumpBtn.addEventListener('click', ()=> {
      const rect = videoEl.getBoundingClientRect();
      appendLog(`[DUMP] css:${Math.round(rect.width)}x${Math.round(rect.height)} intrinsic:${videoEl.videoWidth}x${videoEl.videoHeight} dpr:${window.devicePixelRatio}`);
    });
    hideBtn.addEventListener('click', ()=> {
      document.documentElement.classList.add('hide-debug');
      appendLog('[ACTION] 已隐藏调试面板（录制模式）');
    });

  })();
  </script>
</body>
</html>

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width,initial-scale=1"/>
  <title>egress-sharpen-clean</title>
  <style>
    html,body{margin:0;height:100%;background:#000;color:#fff;font-family:Arial,Helvetica,sans-serif}
    #wrap{position:relative;width:100vw;height:100vh}
    #container{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#000}
    video{
      width:100%;
      height:100%;
      object-fit:contain;
      transform:none;
      backface-visibility:hidden;
      will-change:auto;
      -webkit-font-smoothing:antialiased;
      /* 轻微锐化 + 降低亮度避免过曝 + 轻微对比 */
      filter: url(#sharpen_soft) contrast(0.98) brightness(0.95) saturate(1.02);
    }
    /* 仅保留简洁控件（可在录制时隐藏） */
    #controls{position:absolute;right:8px;top:8px;background:rgba(0,0,0,0.4);padding:8px;border-radius:6px;font-size:12px;z-index:1000}
    button{margin:4px 0;padding:6px 8px}
    .hide-debug #controls { display:none !important; }
  </style>

  <!-- 非侵入式轻微锐化核：中心 2.2 邻位 -0.2 -->
  <svg width="0" height="0" style="position:absolute">
    <defs>
      <filter id="sharpen_soft" x="-20%" y="-20%" width="140%" height="140%" color-interpolation-filters="sRGB">
        <feConvolveMatrix order="3" kernelMatrix="0 -0.2 0 -0.2 2.2 -0.2 0 -0.2 0" divisor="1" bias="0" kernelUnitLength="1 1"/>
      </filter>
    </defs>
  </svg>
</head>
<body>
  <div id="wrap">
    <div id="container">
      <video id="video" autoplay playsinline muted></video>
    </div>

    <div id="controls">
      <div id="status">状态: loading</div>
      <button id="dump">打印尺寸</button>
      <button id="hide">隐藏控件（录制）</button>
    </div>
  </div>

  <script>
  (function(){
    const UMD_URL = '<https://meetingin.hanweb.com/live_files/livekit-client.umd.js>';
    const statusEl = document.getElementById('status');
    const videoEl = document.getElementById('video');
    const dumpBtn = document.getElementById('dump');
    const hideBtn = document.getElementById('hide');

    function logConsole(s){ console.log(new Date().toISOString(), s); }
    function setStatus(s){ if (statusEl) statusEl.textContent = '状态: ' + s; logConsole('[STATUS] ' + s); }

    function loadScript(src){ return new Promise((res, rej) => {
      const s = document.createElement('script'); s.src = src; s.async = false;
      s.onload = ()=>res(); s.onerror = (e)=>rej(e); document.head.appendChild(s);
    }); }

    function alignVideoPixels(videoEl){
      try {
        const rect = videoEl.getBoundingClientRect();
        const dpr = window.devicePixelRatio || 1;
        videoEl.width = Math.round(rect.width * dpr);
        videoEl.height = Math.round(rect.height * dpr);
        logConsole(`[ALIGN] set video.width=${videoEl.width}, video.height=${videoEl.height}, dpr=${dpr}`);
      } catch (e) { logConsole('[ALIGN ERROR] ' + e); }
    }

    async function attachWithRetry(track, videoEl, maxRetries = 6, interval = 300){
      const ms = new MediaStream(); ms.addTrack(track.mediaStreamTrack);
      videoEl.srcObject = ms;
      videoEl.play().catch(()=>{});
      let attempts = 0;
      while (attempts < maxRetries){
        await new Promise(r => setTimeout(r, interval));
        const iw = videoEl.videoWidth || 0;
        const ih = videoEl.videoHeight || 0;
        logConsole(`[ATTEMPT] try=${attempts+1} intrinsic=${iw}x${ih}`);
        if (iw > 0 && ih > 0){
          alignVideoPixels(videoEl);
          return true;
        }
        attempts++;
      }
      logConsole('[ATTACH WARN] intrinsic仍为0，attach 可能失败或轨道无帧');
      return false;
    }

    (async ()=>{
      setStatus('加载脚本...');
      try { await loadScript(UMD_URL); } catch (e) { logConsole('[ERROR] 脚本加载失败: ' + e); setStatus('脚本加载失败'); return; }
      await new Promise(r=>setTimeout(r,50));

      const LK = window.LiveKit || window.LivekitClient || window.Livekit || window.Livekitclient || null;
      if (!LK) { logConsole('[ERROR] 未找到 LiveKit 全局'); setStatus('脚本已载入但未找到 LiveKit'); return; }
      setStatus('LiveKit 已加载');

      const params = new URLSearchParams(window.location.search);
      const url = params.get('url'), token = params.get('token');
      if (!url || !token) { setStatus('缺少 url/token'); logConsole('[ERROR] 缺少 url 或 token'); return; }

      const room = new LK.Room({ autoSubscribe: true });
      logConsole('[INFO] 创建 Room 实例');

      room.on(LK.RoomEvent.TrackSubscribed, async (track, pub, participant) => {
        logConsole(`[EVENT] TrackSubscribed kind=${track.kind} participant=${participant?.identity || 'unknown'}`);
        if (track.kind === 'video') await attachWithRetry(track, videoEl, 6, 300);
      });

      room.on(LK.RoomEvent.TrackUnsubscribed, (track) => {
        logConsole(`[EVENT] TrackUnsubscribed kind=${track.kind}`);
        if (track.kind === 'video') videoEl.srcObject = null;
      });

      room.on(LK.RoomEvent.Connected, ()=> { logConsole('[EVENT] Room Connected'); setStatus('已连接'); console.log('START_RECORDING'); });
      room.on(LK.RoomEvent.Disconnected, ()=> { logConsole('[EVENT] Room Disconnected'); setStatus('已断开'); });

      try { appendLog; await room.connect(url, token); logConsole('[ACTION] connect() resolved'); } catch (e) { logConsole('[ERROR] connect() failed: ' + (e && (e.message||e))); setStatus('连接失败'); }

    })();

    dumpBtn.addEventListener('click', ()=> {
      const rect = videoEl.getBoundingClientRect();
      logConsole(`[DUMP] css:${Math.round(rect.width)}x${Math.round(rect.height)} intrinsic:${videoEl.videoWidth}x${videoEl.videoHeight} dpr:${window.devicePixelRatio}`);
      alert(`css:${Math.round(rect.width)}x${Math.round(rect.height)} intrinsic:${videoEl.videoWidth}x${videoEl.videoHeight} dpr:${window.devicePixelRatio}`);
    });
    hideBtn.addEventListener('click', ()=> { document.documentElement.classList.add('hide-debug'); logConsole('[ACTION] 已隐藏控件（录制模式）'); });

    // helper to avoid old periodic logs (none)
  })();
  </script>
</body>
</html>

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width,initial-scale=1"/>
  <title>egress-final</title>
  <style>
    html,body{margin:0;height:100%;background:#000;color:#fff;font-family:Arial,Helvetica,sans-serif}
    #wrap{position:relative;width:100vw;height:100vh}
    #container{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#000}
    video{
      width:100%;
      height:100%;
      object-fit:contain;
      transform:none;
      backface-visibility:hidden;
      will-change:auto;
      -webkit-font-smoothing:antialiased;
      /* 轻微锐化 + 降低亮度避免过曝 + 轻微对比 */
      filter: url(#sharpen_soft) contrast(0.98) brightness(0.95) saturate(1.02);
    }
    /* 简洁控件（可在录制时隐藏） */
    #controls{position:absolute;right:8px;top:8px;background:rgba(0,0,0,0.4);padding:8px;border-radius:6px;font-size:12px;z-index:1000}
    button{margin:4px 0;padding:6px 8px}
    .hide-debug #controls { display:none !important; }
  </style>

  <!-- 非侵入式轻微锐化核：中心 2.2 邻位 -0.2 -->
  <svg width="0" height="0" style="position:absolute">
    <defs>
      <filter id="sharpen_soft" x="-20%" y="-20%" width="140%" height="140%" color-interpolation-filters="sRGB">
        <feConvolveMatrix order="3" kernelMatrix="0 -0.2 0 -0.2 2.2 -0.2 0 -0.2 0" divisor="1" bias="0" kernelUnitLength="1 1"/>
      </filter>
    </defs>
  </svg>
</head>
<body>
  <div id="wrap">
    <div id="container">
      <video id="video" autoplay playsinline muted></video>
    </div>

    <div id="controls">
      <div id="status">状态: loading</div>
      <button id="dump">打印尺寸</button>
      <button id="hide">隐藏控件（录制）</button>
    </div>
  </div>

  <script>
  (function(){
    const UMD_URL = '<https://meetingin.hanweb.com/live_files/livekit-client.umd.js>';
    const statusEl = document.getElementById('status');
    const videoEl = document.getElementById('video');
    const dumpBtn = document.getElementById('dump');
    const hideBtn = document.getElementById('hide');

    function logConsole(s){ console.log(new Date().toISOString(), s); }
    function setStatus(s){ if (statusEl) statusEl.textContent = '状态: ' + s; logConsole('[STATUS] ' + s); }

    function loadScript(src){ return new Promise((res, rej) => {
      const s = document.createElement('script'); s.src = src; s.async = false;
      s.onload = ()=>res(); s.onerror = (e)=>rej(e); document.head.appendChild(s);
    }); }

    function alignVideoPixels(videoEl){
      try {
        const rect = videoEl.getBoundingClientRect();
        const dpr = window.devicePixelRatio || 1;
        videoEl.width = Math.round(rect.width * dpr);
        videoEl.height = Math.round(rect.height * dpr);
        logConsole(`[ALIGN] set video.width=${videoEl.width}, video.height=${videoEl.height}, dpr=${dpr}`);
      } catch (e) { logConsole('[ALIGN ERROR] ' + e); }
    }

    async function attachWithRetry(track, videoEl, maxRetries = 6, interval = 300){
      const ms = new MediaStream(); ms.addTrack(track.mediaStreamTrack);
      videoEl.srcObject = ms;
      videoEl.play().catch(()=>{});
      let attempts = 0;
      while (attempts < maxRetries){
        await new Promise(r => setTimeout(r, interval));
        const iw = videoEl.videoWidth || 0;
        const ih = videoEl.videoHeight || 0;
        logConsole(`[ATTEMPT] try=${attempts+1} intrinsic=${iw}x${ih}`);
        if (iw > 0 && ih > 0){
          alignVideoPixels(videoEl);
          return true;
        }
        attempts++;
      }
      logConsole('[ATTACH WARN] intrinsic仍为0，attach 可能失败或轨道无帧');
      return false;
    }

    (async ()=>{
      setStatus('加载脚本...');
      try { await loadScript(UMD_URL); } catch (e) { logConsole('[ERROR] 脚本加载失败: ' + e); setStatus('脚本加载失败'); return; }
      await new Promise(r=>setTimeout(r,50));

      const LK = window.LiveKit || window.LivekitClient || window.Livekit || window.Livekitclient || null;
      if (!LK) { logConsole('[ERROR] 未找到 LiveKit 全局'); setStatus('脚本已载入但未找到 LiveKit'); return; }
      setStatus('LiveKit 已加载');

      const params = new URLSearchParams(window.location.search);
      const url = params.get('url'), token = params.get('token');
      if (!url || !token) { setStatus('缺少 url/token'); logConsole('[ERROR] 缺少 url 或 token'); return; }

      const room = new LK.Room({ autoSubscribe: true });
      logConsole('[INFO] 创建 Room 实例');

      room.on(LK.RoomEvent.TrackSubscribed, async (track, pub, participant) => {
        logConsole(`[EVENT] TrackSubscribed kind=${track.kind} participant=${participant?.identity || 'unknown'}`);
        if (track.kind === 'video') await attachWithRetry(track, videoEl, 6, 300);
      });

      room.on(LK.RoomEvent.TrackUnsubscribed, (track) => {
        logConsole(`[EVENT] TrackUnsubscribed kind=${track.kind}`);
        if (track.kind === 'video') videoEl.srcObject = null;
      });

      room.on(LK.RoomEvent.Connected, ()=> { logConsole('[EVENT] Room Connected'); setStatus('已连接'); console.log('START_RECORDING'); });
      room.on(LK.RoomEvent.Disconnected, ()=> { logConsole('[EVENT] Room Disconnected'); setStatus('已断开'); });

      try {
        await room.connect(url, token);
        logConsole('[ACTION] connect() resolved');
      } catch (e) {
        logConsole('[ERROR] connect() failed: ' + (e && (e.message||e)));
        setStatus('连接失败');
      }
    })();

    dumpBtn.addEventListener('click', ()=> {
      const rect = videoEl.getBoundingClientRect();
      logConsole(`[DUMP] css:${Math.round(rect.width)}x${Math.round(rect.height)} intrinsic:${videoEl.videoWidth}x${videoEl.videoHeight} dpr:${window.devicePixelRatio}`);
      alert(`css:${Math.round(rect.width)}x${Math.round(rect.height)} intrinsic:${videoEl.videoWidth}x${videoEl.videoHeight} dpr:${window.devicePixelRatio}`);
    });
    hideBtn.addEventListener('click', ()=> { document.documentElement.classList.add('hide-debug'); logConsole('[ACTION] 已隐藏控件（录制模式）'); });

  })();
  </script>
</body>
</html>

[ALIGN] set video.width=${videoEl.width}, video.height=${videoEl.height}, dpr=${dpr}

[ATTEMPT] try=${attempts+1} intrinsic=${iw}x${ih}

[EVENT] TrackSubscribed kind=${track.kind} participant=${participant?.identity || 'unknown'} sid=${pub?.sid||pub?.trackSid||''}

[EVENT] TrackUnsubscribed kind=${track.kind}

[PERIODIC] css:${Math.round(rect.width)}x${Math.round(rect.height)} intrinsic:${videoEl.videoWidth}x${videoEl.videoHeight} dpr:${window.devicePixelRatio}

[DUMP] css:${Math.round(rect.width)}x${Math.round(rect.height)} intrinsic:${videoEl.videoWidth}x${videoEl.videoHeight} dpr:${window.devicePixelRatio}

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width,initial-scale=1"/>
  <title>egress-sharpen-strong</title>
  <style>
    html,body{margin:0;height:100%;background:#000;color:#fff;font-family:Arial,Helvetica,sans-serif}
    #wrap{position:relative;width:100vw;height:100vh}
    #container{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#000}
    video{
      width:100%;
      height:100%;
      object-fit:contain;
      transform:none;
      backface-visibility:hidden;
      will-change:auto;
      -webkit-font-smoothing:antialiased;
      /* 恢复你偏好的参数：锐化 + 适度对比/饱和 */
      filter: url(#sharpen_strong) contrast(1.05) saturate(1.03);
    }
    /* 简洁控件（可在录制时隐藏） */
    #controls{position:absolute;right:8px;top:8px;background:rgba(0,0,0,0.4);padding:8px;border-radius:6px;font-size:12px;z-index:1000}
    button{margin:4px 0;padding:6px 8px}
    .hide-debug #controls { display:none !important; }
  </style>

  <!-- 强锐化滤镜： center=5 neighbor=-1 -->
  <svg width="0" height="0" style="position:absolute">
    <defs>
      <filter id="sharpen_strong" x="-20%" y="-20%" width="140%" height="140%" color-interpolation-filters="sRGB">
        <!-- kernel:
             0  -1  0
            -1   5 -1
             0  -1  0 -->
        <feConvolveMatrix order="3" kernelMatrix="0 -1 0 -1 5 -1 0 -1 0" divisor="1" bias="0" kernelUnitLength="1 1"/>
      </filter>
    </defs>
  </svg>
</head>
<body>
  <div id="wrap">
    <div id="container">
      <video id="video" autoplay playsinline muted></video>
    </div>

    <div id="controls">
      <div id="status">状态: loading</div>
      <button id="dump">打印尺寸</button>
      <button id="hide">隐藏控件（录制）</button>
    </div>
  </div>

  <script>
  (function(){
    const UMD_URL = '<https://meetingin.hanweb.com/live_files/livekit-client.umd.js>';
    const statusEl = document.getElementById('status');
    const videoEl = document.getElementById('video');
    const dumpBtn = document.getElementById('dump');
    const hideBtn = document.getElementById('hide');

    function logConsole(s){ console.log(new Date().toISOString(), s); }
    function setStatus(s){ if (statusEl) statusEl.textContent = '状态: ' + s; logConsole('[STATUS] ' + s); }

    function loadScript(src){ return new Promise((res, rej) => {
      const s = document.createElement('script'); s.src = src; s.async = false;
      s.onload = ()=>res(); s.onerror = (e)=>rej(e); document.head.appendChild(s);
    }); }

    function alignVideoPixels(videoEl){
      try {
        const rect = videoEl.getBoundingClientRect();
        const dpr = window.devicePixelRatio || 1;
        videoEl.width = Math.round(rect.width * dpr);
        videoEl.height = Math.round(rect.height * dpr);
        logConsole(`[ALIGN] set video.width=${videoEl.width}, video.height=${videoEl.height}, dpr=${dpr}`);
      } catch (e) { logConsole('[ALIGN ERROR] ' + e); }
    }

    async function attachWithRetry(track, videoEl, maxRetries = 6, interval = 300){
      const ms = new MediaStream(); ms.addTrack(track.mediaStreamTrack);
      videoEl.srcObject = ms;
      videoEl.play().catch(()=>{});
      let attempts = 0;
      while (attempts < maxRetries){
        await new Promise(r => setTimeout(r, interval));
        const iw = videoEl.videoWidth || 0;
        const ih = videoEl.videoHeight || 0;
        logConsole(`[ATTEMPT] try=${attempts+1} intrinsic=${iw}x${ih}`);
        if (iw > 0 && ih > 0){
          alignVideoPixels(videoEl);
          return true;
        }
        attempts++;
      }
      logConsole('[ATTACH WARN] intrinsic仍为0，attach 可能失败或轨道无帧');
      return false;
    }

    (async ()=>{
      setStatus('加载脚本...');
      try { await loadScript(UMD_URL); } catch (e) { logConsole('[ERROR] 脚本加载失败: ' + e); setStatus('脚本加载失败'); return; }
      await new Promise(r=>setTimeout(r,50));

      const LK = window.LiveKit || window.LivekitClient || window.Livekit || window.Livekitclient || null;
      if (!LK) { logConsole('[ERROR] 未找到 LiveKit 全局'); setStatus('脚本已载入但未找到 LiveKit'); return; }
      setStatus('LiveKit 已加载');

      const params = new URLSearchParams(window.location.search);
      const url = params.get('url'), token = params.get('token');
      if (!url || !token) { setStatus('缺少 url/token'); logConsole('[ERROR] 缺少 url 或 token'); return; }

      const room = new LK.Room({ autoSubscribe: true });
      logConsole('[INFO] 创建 Room 实例');

      room.on(LK.RoomEvent.TrackSubscribed, async (track, pub, participant) => {
        logConsole(`[EVENT] TrackSubscribed kind=${track.kind} participant=${participant?.identity || 'unknown'}`);
        if (track.kind === 'video') await attachWithRetry(track, videoEl, 6, 300);
      });

      room.on(LK.RoomEvent.TrackUnsubscribed, (track) => {
        logConsole(`[EVENT] TrackUnsubscribed kind=${track.kind}`);
        if (track.kind === 'video') videoEl.srcObject = null;
      });

      room.on(LK.RoomEvent.Connected, ()=> { logConsole('[EVENT] Room Connected'); setStatus('已连接'); console.log('START_RECORDING'); });
      room.on(LK.RoomEvent.Disconnected, ()=> { logConsole('[EVENT] Room Disconnected'); setStatus('已断开'); });

      try {
        await room.connect(url, token);
        logConsole('[ACTION] connect() resolved');
      } catch (e) {
        logConsole('[ERROR] connect() failed: ' + (e && (e.message||e)));
        setStatus('连接失败');
      }
    })();

    dumpBtn.addEventListener('click', ()=> {
      const rect = videoEl.getBoundingClientRect();
      logConsole(`[DUMP] css:${Math.round(rect.width)}x${Math.round(rect.height)} intrinsic:${videoEl.videoWidth}x${videoEl.videoHeight} dpr:${window.devicePixelRatio}`);
      alert(`css:${Math.round(rect.width)}x${Math.round(rect.height)} intrinsic:${videoEl.videoWidth}x${videoEl.videoHeight} dpr:${window.devicePixelRatio}`);
    });
    hideBtn.addEventListener('click', ()=> { document.documentElement.classList.add('hide-debug'); logConsole('[ACTION] 已隐藏控件（录制模式）'); });

  })();
  </script>
</body>
</html>

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width,initial-scale=1"/>
  <title>egress-sharpen-tuned</title>
  <style>
    html,body{margin:0;height:100%;background:#000;color:#fff;font-family:Arial,Helvetica,sans-serif}
    #wrap{position:relative;width:100vw;height:100vh}
    #container{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#000}
    video{
      width:100%;
      height:100%;
      object-fit:contain;
      transform:none;
      backface-visibility:hidden;
      will-change:auto;
      -webkit-font-smoothing:antialiased;
      /* 轻微锐化 + 轻微对比，避免过曝 */
      filter: url(#sharpen_tuned) contrast(1.03) saturate(1.02);
    }
    #controls{position:absolute;right:8px;top:8px;background:rgba(0,0,0,0.4);padding:8px;border-radius:6px;font-size:12px;z-index:1000}
    button{margin:4px 0;padding:6px 8px}
    .hide-debug #controls { display:none !important; }
  </style>

  <!-- 调整后较温和的锐化核：center=3.5 neighbor=-0.5 -->
  <svg width="0" height="0" style="position:absolute">
    <defs>
      <filter id="sharpen_tuned" x="-20%" y="-20%" width="140%" height="140%" color-interpolation-filters="sRGB">
        <!-- kernel:
             0  -0.5  0
            -0.5  3.5 -0.5
             0  -0.5  0 -->
        <feConvolveMatrix order="3" kernelMatrix="0 -0.5 0 -0.5 3.5 -0.5 0 -0.5 0" divisor="1" bias="0" kernelUnitLength="1 1"/>
      </filter>
    </defs>
  </svg>
</head>
<body>
  <div id="wrap">
    <div id="container">
      <video id="video" autoplay playsinline muted></video>
    </div>

    <div id="controls">
      <div id="status">状态: loading</div>
      <button id="dump">打印尺寸</button>
      <button id="hide">隐藏控件（录制）</button>
    </div>
  </div>

  <script>
  (function(){
    const UMD_URL = '<https://meetingin.hanweb.com/live_files/livekit-client.umd.js>';
    const statusEl = document.getElementById('status');
    const videoEl = document.getElementById('video');
    const dumpBtn = document.getElementById('dump');
    const hideBtn = document.getElementById('hide');

    function logConsole(s){ console.log(new Date().toISOString(), s); }
    function setStatus(s){ if (statusEl) statusEl.textContent = '状态: ' + s; logConsole('[STATUS] ' + s); }

    function loadScript(src){ return new Promise((res, rej) => {
      const s = document.createElement('script'); s.src = src; s.async = false;
      s.onload = ()=>res(); s.onerror = (e)=>rej(e); document.head.appendChild(s);
    }); }

    function alignVideoPixels(videoEl){
      try {
        const rect = videoEl.getBoundingClientRect();
        const dpr = window.devicePixelRatio || 1;
        videoEl.width = Math.round(rect.width * dpr);
        videoEl.height = Math.round(rect.height * dpr);
        logConsole(`[ALIGN] set video.width=${videoEl.width}, video.height=${videoEl.height}, dpr=${dpr}`);
      } catch (e) { logConsole('[ALIGN ERROR] ' + e); }
    }

    async function attachWithRetry(track, videoEl, maxRetries = 6, interval = 300){
      const ms = new MediaStream(); ms.addTrack(track.mediaStreamTrack);
      videoEl.srcObject = ms;
      videoEl.play().catch(()=>{});
      let attempts = 0;
      while (attempts < maxRetries){
        await new Promise(r => setTimeout(r, interval));
        const iw = videoEl.videoWidth || 0;
        const ih = videoEl.videoHeight || 0;
        logConsole(`[ATTEMPT] try=${attempts+1} intrinsic=${iw}x${ih}`);
        if (iw > 0 && ih > 0){
          alignVideoPixels(videoEl);
          return true;
        }
        attempts++;
      }
      logConsole('[ATTACH WARN] intrinsic仍为0，attach 可能失败或轨道无帧');
      return false;
    }

    (async ()=>{
      setStatus('加载脚本...');
      try { await loadScript(UMD_URL); } catch (e) { logConsole('[ERROR] 脚本加载失败: ' + e); setStatus('脚本加载失败'); return; }
      await new Promise(r=>setTimeout(r,50));

      const LK = window.LiveKit || window.LivekitClient || window.Livekit || window.Livekitclient || null;
      if (!LK) { logConsole('[ERROR] 未找到 LiveKit 全局'); setStatus('脚本已载入但未找到 LiveKit'); return; }
      setStatus('LiveKit 已加载');

      const params = new URLSearchParams(window.location.search);
      const url = params.get('url'), token = params.get('token');
      if (!url || !token) { setStatus('缺少 url/token'); logConsole('[ERROR] 缺少 url 或 token'); return; }

      const room = new LK.Room({ autoSubscribe: true });
      logConsole('[INFO] 创建 Room 实例');

      room.on(LK.RoomEvent.TrackSubscribed, async (track, pub, participant) => {
        logConsole(`[EVENT] TrackSubscribed kind=${track.kind} participant=${participant?.identity || 'unknown'}`);
        if (track.kind === 'video') await attachWithRetry(track, videoEl, 6, 300);
      });

      room.on(LK.RoomEvent.TrackUnsubscribed, (track) => {
        logConsole(`[EVENT] TrackUnsubscribed kind=${track.kind}`);
        if (track.kind === 'video') videoEl.srcObject = null;
      });

      room.on(LK.RoomEvent.Connected, ()=> { logConsole('[EVENT] Room Connected'); setStatus('已连接'); console.log('START_RECORDING'); });
      room.on(LK.RoomEvent.Disconnected, ()=> { logConsole('[EVENT] Room Disconnected'); setStatus('已断开'); });

      try {
        await room.connect(url, token);
        logConsole('[ACTION] connect() resolved');
      } catch (e) {
        logConsole('[ERROR] connect() failed: ' + (e && (e.message||e)));
        setStatus('连接失败');
      }
    })();

    dumpBtn.addEventListener('click', ()=> {
      const rect = videoEl.getBoundingClientRect();
      logConsole(`[DUMP] css:${Math.round(rect.width)}x${Math.round(rect.height)} intrinsic:${videoEl.videoWidth}x${videoEl.videoHeight} dpr:${window.devicePixelRatio}`);
      alert(`css:${Math.round(rect.width)}x${Math.round(rect.height)} intrinsic:${videoEl.videoWidth}x${videoEl.videoHeight} dpr:${window.devicePixelRatio}`);
    });
    hideBtn.addEventListener('click', ()=> { document.documentElement.classList.add('hide-debug'); logConsole('[ACTION] 已隐藏控件（录制模式）'); });

  })();
  </script>
</body>
</html>

filter

brightness

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width,initial-scale=1"/>
  <title>egress-sharpen-final</title>
  <style>
    html,body{margin:0;height:100%;background:#000;color:#fff;font-family:Arial,Helvetica,sans-serif}
    #container{width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;background:#000}
    video{
      width:100%;
      height:100%;
      object-fit:contain;
      transform:none;
      backface-visibility:hidden;
      will-change:auto;
      -webkit-font-smoothing:antialiased;
      /* 保持你希望的不变曝光参数 */
      /* 不改 contrast/brightness/saturate */
      filter: url(#sharpen_final) contrast(1.05) saturate(1.03);
    }
    #controls{position:absolute;right:8px;top:8px;background:rgba(0,0,0,0.4);padding:8px;border-radius:6px;font-size:12px;z-index:1000}
    button{margin:4px 0;padding:6px 8px}
    .hide-debug #controls { display:none !important; }
  </style>

  <!-- 温和锐化： center=3 neighbor=-0.35（仅调锐化核） -->
  <svg width="0" height="0" style="position:absolute">
    <defs>
      <filter id="sharpen_final" x="-20%" y="-20%" width="140%" height="140%" color-interpolation-filters="sRGB">
        <!-- kernel:
             0  -0.35  0
            -0.35   3  -0.35
             0  -0.35  0 -->
        <feConvolveMatrix order="3" kernelMatrix="0 -0.35 0 -0.35 3 -0.35 0 -0.35 0" divisor="1" bias="0" kernelUnitLength="1 1"/>
      </filter>
    </defs>
  </svg>
</head>
<body>
  <div id="container">
    <video id="video" autoplay playsinline muted></video>
  </div>

  <div id="controls">
    <div id="status">状态: loading</div>
    <button id="dump">打印尺寸</button>
    <button id="hide">隐藏控件（录制）</button>
  </div>

  <script>
  (function(){
    const UMD_URL = '<https://meetingin.hanweb.com/live_files/livekit-client.umd.js>';
    const statusEl = document.getElementById('status');
    const videoEl = document.getElementById('video');
    const dumpBtn = document.getElementById('dump');
    const hideBtn = document.getElementById('hide');

    function logConsole(s){ console.log(new Date().toISOString(), s); }
    function setStatus(s){ if (statusEl) statusEl.textContent = '状态: ' + s; logConsole('[STATUS] ' + s); }

    function loadScript(src){ return new Promise((res, rej) => {
      const s = document.createElement('script'); s.src = src; s.async = false;
      s.onload = ()=>res(); s.onerror = (e)=>rej(e); document.head.appendChild(s);
    }); }

    function alignVideoPixels(el){
      try {
        const rect = el.getBoundingClientRect();
        const dpr = window.devicePixelRatio || 1;
        el.width = Math.round(rect.width * dpr);
        el.height = Math.round(rect.height * dpr);
        logConsole(`[ALIGN] set video.width=${el.width}, video.height=${el.height}, dpr=${dpr}`);
      } catch (e) { logConsole('[ALIGN ERROR] ' + e); }
    }

    async function attachWithRetry(track, el, maxRetries=6, interval=300){
      const ms = new MediaStream(); ms.addTrack(track.mediaStreamTrack);
      el.srcObject = ms;
      el.play().catch(()=>{});
      let attempts=0;
      while(attempts<maxRetries){
        await new Promise(r=>setTimeout(r, interval));
        const iw = el.videoWidth||0, ih = el.videoHeight||0;
        logConsole(`[ATTEMPT] try=${attempts+1} intrinsic=${iw}x${ih}`);
        if(iw>0 && ih>0){ alignVideoPixels(el); return true; }
        attempts++;
      }
      logConsole('[ATTACH WARN] intrinsic 仍为 0');
      return false;
    }

    (async ()=>{
      setStatus('加载脚本...');
      try{ await loadScript(UMD_URL); }catch(e){ logConsole('[ERROR] script load failed', e); setStatus('脚本加载失败'); return; }
      await new Promise(r=>setTimeout(r,50));
      const LK = window.LiveKit || window.LivekitClient || window.Livekit || window.Livekitclient || null;
      if(!LK){ logConsole('[ERROR] 未找到 LiveKit 全局'); setStatus('脚本未找到'); return; }
      setStatus('LiveKit 已加载');

      const params = new URLSearchParams(window.location.search);
      const url = params.get('url'), token = params.get('token');
      if(!url || !token){ setStatus('缺少 url/token'); logConsole('[ERROR] missing params'); return; }

      const room = new LK.Room({ autoSubscribe:true });
      room.on(LK.RoomEvent.TrackSubscribed, async (track, pub, participant) => {
        logConsole(`[EVENT] TrackSubscribed kind=${track.kind} participant=${participant?.identity||'unknown'}`);
        if(track.kind==='video') await attachWithRetry(track, videoEl);
      });
      room.on(LK.RoomEvent.TrackUnsubscribed, (t)=>{ logConsole('[EVENT] TrackUnsubscribed'); if(t.kind==='video') videoEl.srcObject=null; });
      room.on(LK.RoomEvent.Connected, ()=>{ setStatus('已连接'); console.log('START_RECORDING'); });
      room.on(LK.RoomEvent.Disconnected, ()=> setStatus('已断开'));

      try { await room.connect(url, token); logConsole('[ACTION] connect resolved'); } catch(e){ logConsole('[ERROR] connect failed', e); setStatus('连接失败'); }
    })();

    dumpBtn.addEventListener('click', ()=> {
      const rect = videoEl.getBoundingClientRect();
      logConsole(`[DUMP] css:${Math.round(rect.width)}x${Math.round(rect.height)} intrinsic:${videoEl.videoWidth}x${videoEl.videoHeight} dpr:${window.devicePixelRatio}`);
      alert(`css:${Math.round(rect.width)}x${Math.round(rect.height)} intrinsic:${videoEl.videoWidth}x${videoEl.videoHeight} dpr:${window.devicePixelRatio}`);
    });
    hideBtn.addEventListener('click', ()=> { document.documentElement.classList.add('hide-debug'); logConsole('[ACTION] hide controls'); });

  })();
  </script>
</body>
</html>

videoBitrate

nvh264enc

[ALIGN] set video.width=${el.width}, video.height=${el.height}, dpr=${dpr}

[ATTEMPT] try=${attempts+1} intrinsic=${iw}x${ih}

[EVENT] TrackSubscribed kind=${track.kind} participant=${participant?.identity||'unknown'}

[DUMP] css:${Math.round(rect.width)}x${Math.round(rect.height)} intrinsic:${videoEl.videoWidth}x${videoEl.videoHeight} dpr:${window.devicePixelRatio}

css:${Math.round(rect.width)}x${Math.round(rect.height)} intrinsic:${videoEl.videoWidth}x${videoEl.videoHeight} dpr:${window.devicePixelRatio}

const DEBUG = false;
function logConsole(s){ if (DEBUG) console.log(new Date().toISOString(), s); }

async function attachWithRetry(track, el, maxRetries=4, interval=400){ ... }

// 若想录制不带滤镜，可以在 Connected 回调移除滤镜：
room.on(LK.RoomEvent.Connected, ()=> {
  document.querySelector('video').style.filter = 'contrast(1.03) saturate(1.08)';
});

requestAnimationFrame

contrast()

brightness()

drop-shadow()

let motionEnabled = true;
function setSharpen(enabled){
  document.querySelector('video').style.filter = enabled
    ? 'url(#sharpen_final) contrast(1.05) saturate(1.03)'
    : 'contrast(1.05) saturate(1.03)';
}
let lastFrameData = null;
async function checkMotion(){
  // 简单方法：用 canvas 抽样对比少量像素
  const v = document.getElementById('video');
  if (!v || v.videoWidth===0) return;
  const c = document.createElement('canvas');
  c.width = 160; c.height = 90;
  const ctx = c.getContext('2d');
  ctx.drawImage(v, 0, 0, c.width, c.height);
  const data = ctx.getImageData(0,0,c.width,c.height).data;
  if (lastFrameData){
    // 计算少量像素差异
    let diff = 0;
    for (let i=0;i<data.length;i+=40){ diff += Math.abs(data[i]-lastFrameData[i]); }
    if (diff > 1000 && motionEnabled){ setSharpen(false); motionEnabled=false; }
    else if (diff <= 1000 && !motionEnabled){ setSharpen(true); motionEnabled=true; }
  }
  lastFrameData = data;
}
setInterval(checkMotion, 500);

nvh264enc

vaapi

video {
  width:100%;
  height:100%;
  object-fit:contain;
  transform: translateZ(0);        /* 强制合成图层，便于 GPU 合成 */
  will-change: transform, filter;  /* 提示浏览器预构建合成层 */
  image-rendering: pixelated;      /* 有助于文字清晰感（可选） */
  /* 不在这里放 heavy SVG feConvolveMatrix，改用 WebGL 或轻量 filter */
  filter: contrast(1.05) saturate(1.03);
}

// 简单 motion detector: 如果动态强则禁用 heavy filter
let heavyEnabled = true;
function setHeavy(enabled){
  const v = document.getElementById('video');
  if(enabled){
    v.style.filter = 'contrast(1.05) saturate(1.03)'; // light
    // 若用 WebGL path, enable it here
  } else {
    v.style.filter = 'contrast(1.05) saturate(1.03)'; // same light filter; heavy GPU shader disabled
  }
}

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width,initial-scale=1"/>
  <title>egress-gpu-friendly</title>
  <style>
    html,body{margin:0;height:100%;background:#000;color:#fff;font-family:Arial,Helvetica,sans-serif}
    #container{width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;background:#000}
    /* 使 video 成为合成层，便于 GPU 加速 */
    video{
      width:100%;
      height:100%;
      object-fit:contain;
      transform: translateZ(0);            /* 强制创建复合层 */
      will-change: transform, filter;      /* 提示浏览器准备合成/滤镜优化 */
      image-rendering: pixelated;          /* 有助于文字清晰（可选） */
      -webkit-font-smoothing:antialiased;
      /* 轻量默认滤镜（不会影响曝光）；重锐化由 JS 控制开关 */
      filter: contrast(1.05) saturate(1.03);
      background:#000;
    }
    /* 当启用重锐化时加类 .heavy-sharpen */
    .heavy-sharpen {
      /* 这只是占位，真实锐化由 SVG filter 或 WebGL shader 开启 */
      filter: url(#sharpen_soft) contrast(1.05) saturate(1.03);
    }

    /* 简洁控件 */
    #controls{position:absolute;right:8px;top:8px;background:rgba(0,0,0,0.4);padding:8px;border-radius:6px;font-size:12px;z-index:1000}
    button{margin:4px 0;padding:6px 8px}
    .hide-debug #controls { display:none !important; }
  </style>

  <!-- 轻微锐化滤镜（保守） -->
  <svg width="0" height="0" style="position:absolute">
    <defs>
      <filter id="sharpen_soft" x="-20%" y="-20%" width="140%" height="140%" color-interpolation-filters="sRGB">
        <feConvolveMatrix order="3" kernelMatrix="0 -0.25 0 -0.25 2.8 -0.25 0 -0.25 0" divisor="1" bias="0" kernelUnitLength="1 1"/>
      </filter>
    </defs>
  </svg>
</head>
<body>
  <div id="container">
    <video id="video" autoplay playsinline muted></video>
  </div>

  <div id="controls">
    <div id="status">状态: loading</div>
    <button id="dump">打印尺寸</button>
    <button id="hide">隐藏控件（录制）</button>
  </div>

  <script>
  (function(){
    const UMD_URL = '<https://meetingin.hanweb.com/live_files/livekit-client.umd.js>';
    const video = document.getElementById('video');
    const statusEl = document.getElementById('status');
    const dumpBtn = document.getElementById('dump');
    const hideBtn = document.getElementById('hide');

    let heavySharpenEnabled = true; // 初始启用（静态场景看起来更清晰）
    const MOTION_CHECK_INTERVAL = 500; // ms
    const DIFF_THRESHOLD = 1200; // 经验值，可调整（越小越敏感）
    let lastFrameSample = null;
    let motionTimer = null;
    let checking = false;

    function log(s){ console.log(new Date().toISOString(), s); }
    function setStatus(s){ if (statusEl) statusEl.textContent = '状态: ' + s; log('[STATUS] ' + s); }
    function setHeavySharpen(on){
      heavySharpenEnabled = !!on;
      if (heavySharpenEnabled) video.classList.add('heavy-sharpen');
      else video.classList.remove('heavy-sharpen');
    }

    // 轻量采样差异检测：把 video 缩放到小 canvas 采样若差异大则判定为动态
    function sampleFrameData() {
      if (video.videoWidth === 0 || video.videoHeight === 0) return null;
      const w = 160, h = 90; // 小分辨率采样
      const c = document.createElement('canvas');
      c.width = w; c.height = h;
      const ctx = c.getContext('2d', { willReadFrequently: true });
      try {
        ctx.drawImage(video, 0, 0, w, h);
        return ctx.getImageData(0, 0, w, h).data;
      } catch (e) {
        return null;
      }
    }

    function computeDiff(a, b) {
      if (!a || !b) return Infinity;
      let s = 0;
      // 采样步幅，减少计算量
      for (let i = 0; i < a.length; i += 40) {
        s += Math.abs(a[i] - b[i]);
      }
      return s;
    }

    function checkMotionOnce() {
      if (checking) return;
      checking = true;
      const cur = sampleFrameData();
      if (!cur) { checking = false; return; }
      const diff = computeDiff(cur, lastFrameSample);
      lastFrameSample = cur;
      // diff 为 Infinity 表示第一次采样
      if (diff === Infinity || diff === null) { checking = false; return; }
      // 如果差异超过阈值，认为为高运动 -> 关闭重锐化
      if (diff > DIFF_THRESHOLD) {
        if (heavySharpenEnabled) {
          setHeavySharpen(false);
          log('Motion detected (diff=' + diff + '), disabling heavy sharpen');
        }
      } else {
        // 低运动场景恢复重锐化
        if (!heavySharpenEnabled) {
          setHeavySharpen(true);
          log('Low motion (diff=' + diff + '), enabling heavy sharpen');
        }
      }
      checking = false;
    }

    function startMotionChecks() {
      if (motionTimer) return;
      motionTimer = setInterval(checkMotionOnce, MOTION_CHECK_INTERVAL);
    }
    function stopMotionChecks() {
      if (motionTimer) { clearInterval(motionTimer); motionTimer = null; }
    }

    // attach 重试与 DPR 对齐（与你现有逻辑一致，保留）
    async function attachWithRetry(track, el, maxRetries = 4, interval = 400) {
      const ms = new MediaStream(); ms.addTrack(track.mediaStreamTrack);
      el.srcObject = ms;
      el.play().catch(()=>{});
      let attempts = 0;
      while (attempts < maxRetries) {
        await new Promise(r => setTimeout(r, interval));
        const iw = el.videoWidth || 0, ih = el.videoHeight || 0;
        log('[ATTEMPT] try=' + (attempts+1) + ' intrinsic=' + iw + 'x' + ih);
        if (iw > 0 && ih > 0) {
          const rect = el.getBoundingClientRect();
          const dpr = window.devicePixelRatio || 1;
          el.width = Math.round(rect.width * dpr);
          el.height = Math.round(rect.height * dpr);
          log('[ALIGN] set video.width=' + el.width + ', video.height=' + el.height + ', dpr=' + dpr);
          return true;
        }
        attempts++;
      }
      log('[ATTACH WARN] intrinsic still 0');
      return false;
    }

    // 加载 LiveKit UMD 并连接房间（与你现在用法一致）
    function loadScript(src){ return new Promise((res, rej) => {
      const s = document.createElement('script'); s.src = src; s.async = false;
      s.onload = ()=>res(); s.onerror = (e)=>rej(e); document.head.appendChild(s);
    }); }

    (async ()=>{
      setStatus('加载脚本...');
      try{ await loadScript(UMD_URL); }catch(e){ log('[ERROR] load script failed ' + e); setStatus('脚本加载失败'); return; }
      await new Promise(r=>setTimeout(r,50));
      const LK = window.LiveKit || window.LivekitClient || window.Livekit || window.Livekitclient || null;
      if (!LK) { log('[ERROR] LiveKit global not found'); setStatus('脚本未找到'); return; }
      setStatus('LiveKit 已加载');

      const params = new URLSearchParams(window.location.search);
      const url = params.get('url'), token = params.get('token');
      if (!url || !token) { setStatus('缺少 url/token'); log('[ERROR] missing params'); return; }

      const room = new LK.Room({ autoSubscribe: true });
      room.on(LK.RoomEvent.TrackSubscribed, async (track, pub, participant) => {
        log('[EVENT] TrackSubscribed kind=' + track.kind + ' participant=' + (participant?.identity||'unknown'));
        if (track.kind === 'video') {
          await attachWithRetry(track, video);
          // 启动 motion 检测（只有当 video 有内容时）
          startMotionChecks();
        }
      });
      room.on(LK.RoomEvent.TrackUnsubscribed, (t) => { log('[EVENT] TrackUnsubscribed'); if (t.kind === 'video') { video.srcObject = null; stopMotionChecks(); } });
      room.on(LK.RoomEvent.Connected, ()=> { setStatus('已连接'); console.log('START_RECORDING'); });
      room.on(LK.RoomEvent.Disconnected, ()=> setStatus('已断开'));

      try { await room.connect(url, token); log('[ACTION] connected'); } catch(e){ log('[ERROR] connect failed ' + e); setStatus('连接失败'); }
    })();

    dumpBtn.addEventListener('click', ()=> {
      const rect = video.getBoundingClientRect();
      alert(`css:${Math.round(rect.width)}x${Math.round(rect.height)} intrinsic:${video.videoWidth}x${video.videoHeight} dpr:${window.devicePixelRatio}`);
    });
    hideBtn.addEventListener('click', ()=> { document.documentElement.classList.add('hide-debug'); log('[ACTION] hide controls'); });

    // 初始状态：尽量启用 heavy sharpen（静态场景优先）
    setHeavySharpen(true);
  })();
  </script>
</body>
</html>