Как скалировать video внутри тега?

Question

[pa5htet]

На сайте в мобильной версии встроена возможность сделать фотографию. Реализовано просто, классически:

video = document.getElementById('video');
canvas = document.getElementById('canvas');
photo = document.getElementById('photo');

camera = navigator.mediaDevices.getUserMedia(...
.then((stream) => {
video.srcObject = stream;
video.play();
}

При скалировании меняется размер всего сайта, а хотелось бы менять область сьемки (и фотографирования конечно).

Comments

[Модератор]

Фрагменты кода надо размещать в виде текста и оборачивать тэгом code для корректного отображения. Удобно делать кнопкой </>
Это обязательно, см.п.3.8 Регламента.
Сюда же относится traceback, ввод и вывод в консоли и другая структурированная текстовая инфа.

[Модератор]

Не надо ставить как можно больше тэгов. Лучше оставить один, но конкретный, с которым проблема.
См.п.3.1 Регламента. Также обратите внимание на п.3.4

Answer 1

[Антон Романков]

Для того чтобы изменить размер области сьемки (а также отображения) в мобильной версии сайта, необходимо произвести изменения размеров элементов , и . Вам придется задать им новые размеры с использованием JavaScript в зависимости от разрешения экрана устройства. Вот пример того, как вы можете это сделать:

const video = document.getElementById('video');
const canvas = document.getElementById('canvas');
const photo = document.getElementById('photo');

function adjustCameraSize() {
  const screenWidth = window.innerWidth;
  const screenHeight = window.innerHeight;

  // Задайте новые размеры элементам в зависимости от размеров экрана
  video.width = screenWidth; // Ширина видео
  video.height = screenHeight; // Высота видео

  canvas.width = screenWidth; // Ширина canvas
  canvas.height = screenHeight; // Высота canvas

  photo.style.width = `${screenWidth}px`; // Ширина блока с фотографией
  photo.style.height = `${screenHeight}px`; // Высота блока с фотографией
}

// Вызывайте функцию при загрузке страницы и при изменении размера окна
window.addEventListener('load', adjustCameraSize);
window.addEventListener('resize', adjustCameraSize);

// Затем настройте вашу камеру с учетом новых размеров
navigator.mediaDevices.getUserMedia({ video: true })
  .then((stream) => {
    video.srcObject = stream;
    video.play();
    adjustCameraSize(); // Вызовите функцию снова после получения потока
  });

Этот код будет изменять размеры элементов , и в зависимости от размеров экрана устройства, и камера будет адаптироваться к новым размерам. Помимо этого, функция adjustCameraSize() вызывается при загрузке страницы и при изменении размера окна, чтобы учесть все возможные изменения размеров окна.

Учтите, что при изменении размеров элементов, вы также, возможно, захотите обновить свой CSS, чтобы элементы отображались корректно в новых размерах.