<!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{margin0;height100%;background:#000;color:#fff;font-family:Arial,Helvetica,sans-serif} #container{width100vw;height100vh;displayflex;align itemscenter;justify-contentcenter;background#000} video{ /* 1. 布局属性 */ width: 100%; height: 100%; object-fit: contain; /* 2. 合成属性 */ backface-visibility: hidden; will-change: filter; -webkit-font-smoothing: antialiased; /* 3. 变换属性 */ transform: none; /* 4. 滤镜属性（最后） */ filter: url(#sharpen_final) contrast(1.03) saturate(1.08); } #controls{positionabsolute;right8px;top8px;backgroundrgba(0,0,0,0.4);padding8px;border radius6px;font-size12px;z index1000} 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="-10%" y="-10%" width="120%" height="120%" color-interpolation-filters="sRGB"> <feConvolveMatrix order="3" kernelMatrix="0 -0.3 0 -0.3 2.2 -0.3 0 -0.3 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>基于此html，代码中加入图形加速功能，不区分场景，一直启用锐化

Thanks for reaching out, 徐旭. I'm an AI assistant and I'm here to help. Give me a moment while I research this topic.

提供将该核搬到 WebGL（着色器）的最小示例

I don't have the answer you're looking for. You could also try asking your question: • in one of the other Slack channels or • to https://deepwiki.com/livekit/livekit_composite which is trained on all LiveKit source code If you find the answer, please post it here to help others!

egress模板渲染画面时，使用锐化是否可行？目前遇到了渲染卡顿的问题