Как реагировать на изменения в измерении / размере видео дорожки в MediaStream?

Question

В моем веб-приложении я получаю MediaStream через getUserMedia или getDisplayMedia. В определенных ситуациях видео дорожка этого потока может изменить свой размер. Например, если getDisplayMedia отслеживает указанное окно c, это окно может изменить размер. Или на мобильном устройстве при переключении из альбомного в портретный режим изображение с камеры будет поворачиваться на 90 ° (т. Е. Меняются ширина и высота).

Я знаю, как получить размеры MediaStream ( как описано здесь ). Теперь я хочу получать уведомления, когда размеры меняются . Обратный вызов / событие какого-то рода.

Я уже попытался 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);