咨询：Chrome getDisplayMedia共享应用窗口resize时是否有监听事件

当然有办法监听这种尺寸变化！Chrome 完全支持相关的事件处理，下面是几种可靠的方案：

• 直接监听 MediaStreamTrack 的 resize 事件
  这是最直接的方式，当你通过 getDisplayMedia 获取到视频轨道后，它会在共享窗口/屏幕的尺寸发生变化时自动触发 resize 事件。你可以在事件回调里通过 getSettings() 获取最新的分辨率：

  const stream = await navigator.mediaDevices.getDisplayMedia({ video: true });
  const videoTrack = stream.getVideoTracks()[0];
  
  videoTrack.addEventListener('resize', () => {
    const { width, height } = videoTrack.getSettings();
    console.log(`共享内容尺寸更新：${width} × ${height}`);
  });
  

• 监听 settingschange 事件
  如果需要捕获轨道的任何配置变化（包括分辨率），可以用 settingschange 事件。它会在轨道的设置项（比如尺寸、帧率）发生改变时触发，同样可以通过 getSettings() 获取最新尺寸：

  videoTrack.addEventListener('settingschange', () => {
    const settings = videoTrack.getSettings();
    console.log(`轨道设置更新，当前尺寸：${settings.width} × ${settings.height}`);
  });
  

• 监听 Video 元素的 resize 事件
  如果你把共享流挂载到了页面的 <video> 元素上，也可以直接监听这个元素的 resize 事件，通过 videoWidth 和 videoHeight 属性获取实际视频尺寸：

  const videoElement = document.getElementById('your-video-element');
  videoElement.srcObject = stream;
  
  videoElement.addEventListener('resize', () => {
    console.log(`视频渲染尺寸变化：${videoElement.videoWidth} × ${videoElement.videoHeight}`);
  });
  

这些方案在 Chrome 里都是稳定可用的，推荐优先使用 resize 事件，因为它专门针对轨道尺寸变化场景，更精准。

内容的提问来源于stack exchange，提问作者Anthony