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

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

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

Я уже пробовал MediaStream.onaddtrack (предполагая, что, возможно, дорожка удалена и прочитана с другим размером), а также пробовал использовать MutationObserver в элементе <video>, в котором я показываю поток. Ни один из этих способов не сработал. Я также проверил MDN на наличие других событий, которые могли бы мне помочь, но я не нашел многообещающих.

Есть ли способ подписаться на изменения размера видеодорожки? Моя функция должна вызываться каждый раз при изменении размера. И если это невозможно, и мне нужно будет провести опрос занятости: есть ли умный способ сделать опрос немного менее загруженным?


javascript mediastream
person Lukas Kalbertodt    schedule 25.02.2020    source источник
comment
Если речь идет об ориентации камеры, не могли бы вы использовать изменение ориентации< /а> событие?   -  person mvr    schedule 28.02.2020

Ответы (1)


arrow_upward
6
arrow_downward

Вы можете подписаться на 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);
person Firanolfind    schedule 28.02.2020
comment
Спасибо! Знаете ли вы, есть ли решение, которое не требует элемента <video>, то есть работает только с элементом MediaStream? - person Lukas Kalbertodt; 28.02.2020
comment
Он работает так же, как и с тегом видео. htmlVideoElement также имеет .videoHeightproperty. В любом случае вы получите элемент видео. const stream = new MediaStream(); const video = document.createElement('video'); video.srcObject = stream; - person Firanolfind; 02.03.2020