HarmonyOS 鸿蒙Next WebRTC: 鸿蒙折叠屏Fold自带浏览器使用WebRTC采集画面，当屏幕竖切横屏时，横屏看到的画面依然是竖屏角度，同时通过peerconnection传输给远端的画面依旧是竖屏方向。

HarmonyOS 鸿蒙Next WebRTC: 鸿蒙折叠屏Fold自带浏览器使用WebRTC采集画面，当屏幕竖切横屏时，横屏看到的画面依然是竖屏角度，同时通过peerconnection传输给远端的画面依旧是竖屏方向。

问题：

华为metabook fold 折叠屏设备横竖屏切换横屏时，浏览器下使用WebRTC API采集到的流都是竖屏状态流（看到的画面是颠倒的竖屏角度），没有自适应处理，可以基于下方的代码或者链接体验测试。

可以使用安卓/ios浏览器下的表现对比测试效果，可以自适应旋转流方向。

有类似问题，但是官方回复的不适用于推送出去的画面流，远端参会者看到的画面方向和角度依旧不对。并且这个明显是鸿蒙浏览器的问题，不应该让每个开发者自行去适配这个问题。

使用WebRTC采集摄像头流：

const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });

官方示例程序测试：

https://webrtc.github.io/samples/src/content/getusermedia/gum/

原型代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div>
      <input type="button" title="HTML5摄像头" value="开启摄像头" onclick="getMedia()" />
    </div>
    <div>
      <video id="video" width="400px" height="400px" autoplay="autoplay"></video>
    </div>
    <script>
      async function getMedia() {
        const video = document.getElementById("video");
        const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });

        video.srcObject = stream;
        await video.play();
      }
    </script>
  </body>
</html>

测试截图（没有权限上传视频）：使用metabool fold折叠屏和安卓与ios对比测试效果：

同样对比，使用meta x5折叠手机和鸿蒙直板手机均没有问题。

相似问题，官方回复过这个问题，但是是让开发者处理本地画面回显，画面流依旧是竖屏角度，远端看到的仍然有问题，这个回答不太合理，也不应该是开发者自行来适配。

https://developer.huawei.com/consumer/cn/forum/topic/0204182017816685938?fid=0109140870620153026


更多关于HarmonyOS 鸿蒙Next WebRTC: 鸿蒙折叠屏Fold自带浏览器使用WebRTC采集画面，当屏幕竖切横屏时，横屏看到的画面依然是竖屏角度，同时通过peerconnection传输给远端的画面依旧是竖屏方向。的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

鸿蒙Next WebRTC在折叠屏设备上存在屏幕旋转适配问题。当设备从竖屏切换至横屏时，浏览器未正确触发WebRTC视频轨道的onorientationchange事件，导致视频采集方向未更新。底层原因在于鸿蒙的屏幕旋转事件未与WebRTC的媒体管道同步，当前视频轨道仍保持初始竖屏的旋转矩阵参数。远端收到的视频流metadata中rotation字段仍为90度（竖屏模式），而非0度（横屏模式）。此问题需鸿蒙方在WebRTC HAL层实现屏幕旋转事件的动态响应机制。

更多关于HarmonyOS 鸿蒙Next WebRTC: 鸿蒙折叠屏Fold自带浏览器使用WebRTC采集画面，当屏幕竖切横屏时，横屏看到的画面依然是竖屏角度，同时通过peerconnection传输给远端的画面依旧是竖屏方向。的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的HarmonyOS Next浏览器在折叠屏设备上的WebRTC方向适配问题。当前版本中，浏览器未正确处理设备旋转时的视频流方向元数据，导致本地预览和远端传输都保持竖屏方向。

建议的临时解决方案：

  1. 监听设备方向变化事件：
window.addEventListener('orientationchange', handleOrientationChange);
  1. 在事件回调中重新获取媒体流并应用旋转：
function handleOrientationChange() {
  const video = document.getElementById('video');
  const stream = video.srcObject;
  const tracks = stream.getVideoTracks();
  
  tracks.forEach(track => {
    const settings = track.getSettings();
    // 根据当前方向调整约束
    const constraints = {
      width: settings.height,
      height: settings.width,
      facingMode: settings.facingMode
    };
    track.applyConstraints(constraints);
  });
}

这个问题确实应该由系统浏览器层自动处理，我们已将该问题反馈给HarmonyOS浏览器团队，预计在后续版本中会修复此方向适配问题。建议关注HarmonyOS的版本更新日志。

回到顶部