html - 视频 I 帧在移动浏览器上无法正常工作

Question

我只是在用户的终端设备上录制视频。我在移动设备上遇到视频屏幕尺寸问题。我有一个网站，假设可以在台式机和移动设备上的浏览器上运行。这是它如何在桌面浏览器上工作的图像，链接。一切正常，但现在当我在移动设备上运行它时，屏幕就像这样，链接。所以在我看来只有一半的屏幕来了。我试图调整视频帧的宽度和高度，但没有奏效。以下是上述实现的 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 来录制视频。

标签： htmlcssresponsive-designhtml5-video