Принудительные пропорции изображения

[pnzdevelop]

Вебкамера отдаёт изображение 704x576, а оно явно искажено по пропорциям. Есть ли возможность его "растянуть" ?

 

[Max]

Сейчас сделано так.WCS сервер определяет и присылает браузеру действительное разрешение потока, например 704x576 в stream.videoResolution().
За получение разрешения отвечает listener 'resize'
https://github.com/flashphoner/flas...examples/demo/streaming/player/player.js#L141

video.addEventListener('resize', function(event){
            var streamResolution = stream.videoResolution();
            if (Object.keys(streamResolution).length === 0) {
                resizeVideo(event.target);
            } else {
                // Change aspect ratio to prevent video stretching
                var ratio = streamResolution.width / streamResolution.height;
                var newHeight = Math.floor(options.playWidth / ratio);
                resizeVideo(event.target, options.playWidth, newHeight);
            }

Далее вызывается функция resizeVideo, которая адаптирует ширину и высоту video-элемента к размеру div-элемента.
https://github.com/flashphoner/flas...0/examples/demo/dependencies/js/utils.js#L188

function resizeVideo(video, width, height) {
    if (!video.parentNode) {
        return;
    }
    if (video instanceof HTMLCanvasElement) {
        video.videoWidth = video.width;
        video.videoHeight = video.height;
    }
    var display = video.parentNode;
    var parentSize = {
        w: display.parentNode.clientWidth,
        h: display.parentNode.clientHeight
    };
    var newSize;
    if (width && height) {
        newSize = downScaleToFitSize(width, height, parentSize.w, parentSize.h);
    } else {
        newSize = downScaleToFitSize(video.videoWidth, video.videoHeight, parentSize.w, parentSize.h);
    }
    display.style.width = newSize.w + "px";
    display.style.height = newSize.h + "px";

    //vertical align
    var margin = 0;
    if (parentSize.h - newSize.h > 1) {
        margin = Math.floor((parentSize.h - newSize.h) / 2);
    }
    display.style.margin = margin + "px auto";
    console.log("Resize from " + video.videoWidth + "x" + video.videoHeight + " to " + display.offsetWidth + "x" + display.offsetHeight);
}

Поэтому если у вас 704x576, оно будет адаптировано пропорционально.
Так как вы видите, что видео деформировано, вы можете расчитать высоту немного по другому и вызвать resizeVideo с другими параметрами:

var ratio = streamResolution.width / streamResolution.height;
var newHeight = Math.floor(options.playWidth / ratio);
resizeVideo(event.target, options.playWidth, newHeight);

 

[pnzdevelop]

Понял, только в этом месте options.playWidth = undefined

 

[Max]

Вам нужен какой-то кастомный ресайз, т.к. вам заранее известно, что картинка с камеры растянута.
Здесь получаете актуальные размеры:

var ratio = streamResolution.width / streamResolution.height;

Здесь подгоняете под ваши:

resizeVideo(event.target, yourWidth, yourHeight);

Значения yourWidth, yourHeight нужно высчитать в зависимости от вашего требуемого соотношения.

 

[pnzdevelop]

Если так делаю, то запускается транскодинг, что совсем не нужно. А средствами "браузера" изменить пропорции видео можно?

 

[pnzdevelop]

Нашёл! Можно у тэга video сделать transform: scaleX(1.393); и всё шикарно растягивается