Question

我只是在用户的终端设备上录制视频。我在移动设备上的视频屏幕尺寸有问题。我有一个网站，该网站可以同时在台式机和移动设备上的浏览器上运行。这是它在桌面浏览器link上的工作方式的图像。一切正常，但现在在移动设备上运行时，屏幕显示为link。在我看来，只有一半的屏幕即将到来。我试图调整视频帧的宽度和高度，但是没有用。这是上述实现的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录制视频。

我的视频帧在移动浏览器上无法正常工作

0 个答案: