如何在Web端识别HLS直播流的横竖屏状态并监听分辨率变化

嘿，我刚好做过几个基于OpenTok的直播项目，和你的场景很像，下面给你详细说说怎么实现初始横竖屏识别，以及实时监听分辨率变化来调整Web页面布局：

当Web端成功订阅Android推送的直播流时，你可以通过OpenTok的Stream对象自带的videoDimensions属性获取流的宽高，以此判断是横屏还是竖屏：

// 订阅流时触发初始判断
session.subscribe(stream, 'your-player-container', {
  insertMode: 'append'
}, (error) => {
  if (!error) {
    // 调用工具函数判断横竖屏并调整布局
    adjustLayoutByStreamOrientation(stream);
  }
});

// 封装判断横竖屏的工具函数
function adjustLayoutByStreamOrientation(stream) {
  const { width, height } = stream.videoDimensions;
  const isLandscape = width > height;
  
  // 根据横竖屏切换页面布局类
  const body = document.body;
  if (isLandscape) {
    body.classList.add('landscape-layout');
    body.classList.remove('portrait-layout');
  } else {
    body.classList.add('portrait-layout');
    body.classList.remove('landscape-layout');
  }
  
  // 也可以直接调整播放器容器的尺寸适配
  const playerContainer = document.getElementById('your-player-container');
  playerContainer.style.aspectRatio = `${width}/${height}`;
}

OpenTok的Session对象提供了streamPropertyChanged事件，当Android端推送的流分辨率发生改变时，这个事件会被触发，你只需监听该事件并重新判断布局即可：

// 监听流属性变化事件
session.on('streamPropertyChanged', (event) => {
  // 只关注视频分辨率变化的情况
  if (event.changedProperty === 'videoDimensions') {
    const updatedStream = event.stream;
    // 重新调整布局
    adjustLayoutByStreamOrientation(updatedStream);
    
    // 可选：如果需要做更精细的分辨率适配，可以在这里处理
    console.log('流分辨率已更新：', updatedStream.videoDimensions);
  }
});

• 确保你使用的OpenTok JS SDK版本是v2.20及以上，这个版本开始正式支持videoDimensions属性和streamPropertyChanged事件
• 如果你是通过HLS协议播放流，上述逻辑同样适用——OpenTok会同步HLS流的分辨率信息到Stream对象中
• 测试时可以在Android端切换横竖屏推流，或者调整推流分辨率，Web端应该能实时响应布局变化

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