我想从我的设备的摄像头获得一个全屏实况提要,但要居中显示。因此,如果我的脸在中间,我希望在任何设备上,我的脸在中间(无论长宽比(横向-纵向))。
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Picture time!</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<video id="video" autoplay="autoplay" onclick="snapshot()"></video>
<canvas id="canvas" style="display: none"></canvas>
<script src="./jquery.min.js"></script>
<script src="./script.js"></script>
</body>
</html>
CSS:
body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
}
#video {
position: absolute;
}
执行重新缩放的JS函数:
function rescaleEverthing(){
var jqueryVideo = $("#video");
var body = $("body");
var videoWidth = jqueryVideo.width();
var videoHeight = jqueryVideo.height();
var bodyWidth = body.width();
var bodyHeight = body.height();
var videoRatio = videoWidth / videoHeight;
var bodyRatio = bodyWidth / bodyHeight;
if(vi)
if(videoRatio > bodyRatio){
jqueryVideo.css("height", "100%");
jqueryVideo.css("transform", "translateX(-" + (videoWidth-bodyWidth)/2 + "px)");
} else {
jqueryVideo.css("width", "100%");
jqueryVideo.css("transform", "translateY(-" + (videoHeight-bodyHeight)/2 + "px)");
}
}
但是当你运行这个时,我的视频中间不是在肖像模式的中间
有人能帮忙吗?谢谢!
