javascript - 如何对 `MediaStream` 中视频轨道的尺寸/大小变化使用react？

Question

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

我知道如何获得 MediaStream 的尺寸(as described here)。我现在想在尺寸发生变化时得到通知。某种回调/事件。

我已经尝试过MediaStream.onaddtrack (猜测可能轨道被删除并以不同的大小读取)我也尝试使用 MutationObserver在 <video>我正在显示流的元素。这些都不起作用。我还检查了 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);