Как исправить element.videoHeight в js с помощью WebRTC?

Question

Мне нужна серьезная помощь по поводу моего кода, который сводит меня с ума !!Я пытаюсь установить формат моего видео в соответствии с квадратным рендерингом, но мои js не будут устанавливать element.videoHeight в значение, которое я определил!

Мне кажется, что я все перепробовал: изменивvideo.height И video.videoHeight в нескольких местах, пробуя метод «загруженных метаданных», очищая все файлы cookie, кэши и т. д. *

Вот мой текущий код:

(function ()
{
    let width = 0;
    let height = 0;
    let streaming = false;
    let video = null;
    let canvas = null;

    function startup()
    {
        video = document.getElementById('webcam');
        canvas = document.getElementById('transit');

        width = video.offsetWidth;
        video.width = width;
        video.height = width;
        document.getElementById('transit').width = width;
        document.getElementById('result').width = width;

        navigator.mediaDevices.getUserMedia({ video: { width: width, height: width }, audio: false })
            .then(function(stream) {
                video.srcObject = stream;
                video.play();
            })
            .catch(function(err) {
                console.log("An error occured: " + err);
            });

        video.addEventListener('canplay', function(ev){
            if (!streaming) {
                height = width;

                video.setAttribute('width', width);
                video.setAttribute('height', width);
                canvas.setAttribute('width', width);
                canvas.setAttribute('height', height);
                streaming = true;
            }
        }, false);
window.addEventListener('load', startup, false);
})();

Я хочуvideo.videoWidth, чтобы быть равным video.videoHeight.Но если мне удастся изменить video.videoWidth в моем коде (согласно некоторым файлам console.log), video.videoHeight останется прежним!

Результат будет похож на то, если я положу div вокруг моего тега иdiv - это квадрат, но само видео все еще в каком-то формате 4/3!И как ни странно, он отлично работает на моем персональном компьютере, но не работает на каком-то другом, оба они Mac OSX ... И, очевидно, с той же версией js.

Помогите!: '(

Answer 1

На самом деле, спасибо за ваш ответ, но я нашел ошибку: причина в том, что определение видео не может превышать 720px в высоту !! Поэтому я просто добавил условие о том, что:

if (video.offsetHeight > 720)
    width = 720;
else
    width = video.offsetWidth;

Так что теперь у меня может быть квадратный рендеринг видео:)

Answer 2

videoHeight - свойство только для чтения, см. mdn .

Чтобы получить квадратную визуализацию (даже если видео 4: 3), используйте CSS 'cover' object-fit в сочетании с шириной и высотой.