如何对 MediaStream 中视频轨道 dimension/size 的变化做出反应？

Question

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

我知道如何获取 MediaStream (as described here) 的尺寸。我现在想在维度更改时收到通知。某种 callback/event。

我已经尝试了 MediaStream.onaddtrack（猜测可能轨道被删除并以不同的大小重新添加）并且我还尝试在我显示的 <video> 元素上使用 MutationObserver流中的 None 有效。我还检查了 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);

如何对 MediaStream 中视频轨道 dimension/size 的变化做出反应？

How to react to changes in the dimension/size of a video track in a `MediaStream`?

javascript

mediastream