Видео в моем браузере не работает должным образом - PullRequest
Новая
       17

Видео в моем браузере не работает должным образом

0 голосов
/ 23 октября 2018

Я просто работаю над записью видео на конечное устройство пользователя.У меня проблема с размером экрана видео на мобильном устройстве.У меня есть веб-сайт, который должен работать как на браузере, так и на мобильных устройствах.Вот изображение того, как оно работает в настольном браузере, ссылка .Все работает нормально, но теперь, когда я запускаю его на мобильных устройствах, экран выглядит так: ссылка .Так что мне кажется только половина экрана идет.Я пытался отрегулировать ширину и высоту видеокадра, но не получилось.Вот код HTML и CSS для реализации выше.

Код HTML 

<div class="video-box">
    <img class="image-block__image image-block__image_camera" id='image' src="./images/box.png" alt="Place your face inside the square">
           <div id="video-box-video" class="">
                 <video id="myVideo" muted autoplay loop class="camera"></video>
                 <canvas id="faceCanvas" class=""></canvas>
           </div>    
</div>

Код CSS 

video {
    -moz-transform: scale(-1, 1);
    -webkit-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    transform: scale(-1, 1);
    filter: FlipH;
}

.video-box {
    /*position: absolute;*/
    min-height: 210px;
    width: auto;
    top: 0px;
    /*height: 100%;*/
    /*width: 100%;*/
    left: 0;
    /*border: thin solid yellow;*/
}

#video-box-video {
    position: absolute;
    min-height: 210px;
    top: 0px;
    height: 100%;
    width: 100%;
    left: 0;
}

#video-box-video #faceCanvas {
    /*position: absolute;*/
    top: 0px;
    height: 100%;
    width: 100%;
    left: 0;
    form: scale(-1, 1);
    -webkit-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    transform: scale(-1, 1);
    filter: FlipH;
}
#myVideo{
    /*width: 100%;*/
    /*height: 100%;*/
    position: absolute;
    top: 0px;
    left: 0;
}

В JavaScript

Я использую window.MediaRecorder для записи видео.

...