如何对“MediaStream”中视频轨道尺寸/大小的变化做出反应？

Question

在我的网络应用程序中，我获得了MediaStream一个 viagetUserMedia或getDisplayMedia. 在某些情况下，该流的视频轨道可以改变其大小。例如，如果getDisplayMedia跟踪特定窗口，该窗口可以改变大小。或者在移动设备上，当从横向模式切换到纵向模式时，相机图像将旋转 90°（即宽度和高度交换）。

我知道如何获取MediaStream(如此处所述)的尺寸。我现在想在尺寸发生变化时收到通知。某种回调/事件。

我已经尝试过MediaStream.onaddtrack（猜测可能轨道被删除并以不同的大小读取）并且我也尝试MutationObserver在<video>我显示流的元素上使用 a 。这些都不起作用。我还检查了 MDN 中可能对我有帮助的其他事件，但我没有找到任何有希望的事件。

有没有办法订阅视频轨道尺寸的变化？每次尺寸改变时都应该调用我的一个函数。如果不可能，我需要忙于轮询：有没有一种聪明的方法可以让轮询不那么忙？

Answer 1

您可以订阅resize视频元素的事件

const video = document.getElementById("video");

video.addEventListener("resize", (e) => {
  const { videoWidth, videoHeight } = video;
  // can do smth here
  // for example
  video.style.width = videoWidth;
  video.style.height = videoHeight;

}, false);