现在的布局是这样的，左边的是video所在的位置，右边的是图片
我想把视频挪到中间然后覆盖图片，图片不用显示，登录功能不变，求大佬指点
```javascript
<%@ page contentType="text/html;charset=UTF-8" %>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<title>人脸识别</title>
<link rel="stylesheet" href="${basePath}static/lib/layui-v2.5.5/css/layui.css" media="all">
<script type="text/javascript" src="${basePath}static/lib/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="${basePath}static/lib/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="${basePath}static/lib/js/jquery.dataTables.min.js"></script>
<style type="text/css">
body {background: url("${basePath}static/images/bground.jpg");}
</style>
</head>
<body>
<video id="video" width="500px" height="500px" autoplay="autoplay"></video>
<canvas id="canvas" width="500px" height="500px" style="display: none"></canvas>
<img id="imgTag" src="" alt="..." width="500px" height="500px"><br>
<div style="text-align: center;">
<button type="button" class="layui-btn layui-btn-normal" onclick="openMedia()">开启摄像头</button>
<button type="button" class="layui-btn layui-btn-normal" onclick="closeMedia()">关闭摄像头</button>
<button type="button" class="layui-btn layui-btn-normal" onclick="takePhoto('login')">面部登录</button>
<button type="button" class="layui-btn layui-btn-normal" onclick="takePhoto('register')">注册面部</button>
</div>
<script type="text/javascript">
let mediaStreamTrack = null; // 视频对象(全局)
let video;
function openMedia() {
let constraints = {
video: {width: 500, height: 500 },
audio: false
};
//获得video摄像头
video = document.getElementById('video');
let promise = navigator.mediaDevices.getUserMedia(constraints);
promise.then((mediaStream) => {
// mediaStreamTrack = typeof mediaStream.stop === 'function' ? mediaStream : mediaStream.getTracks()[1];
mediaStreamTrack = mediaStream.getVideoTracks()
video.srcObject = mediaStream;
video.play();
});
}
// 拍照
function takePhoto(str) {
//获得Canvas对象
let video = document.getElementById('video');
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
ctx.drawImage(video, 0, 0, 500, 500);
// toDataURL --- 可传入'image/png'---默认, 'image/jpeg'
let img = document.getElementById('canvas').toDataURL();
// 这里的img就是得到的图片
console.log('img-----', img);
document.getElementById('imgTag').src = img;
//alert(img);
// alert(str);
//上传
let flagStr = "登录";
if (str === "register") {
flagStr = "注册";
}
$.ajax({
url: "/face/first",
type: "POST",
data: {"imgData": img, "type": str},
dataType: "json",
success: function (data) {
let flag = data.success;
if (flag) {
alert(flagStr + "成功");
window.location.href = "/face/Login.do"
} else {
alert(flagStr + "失败!");
}
}
, error: function () {
alert("服务器内部错误！" + flagStr + "失败")
}
});
}
// 关闭摄像头
function closeMedia() {
let stream = document.getElementById('video').srcObject;
let tracks = stream.getTracks();
tracks.forEach(function (track) {
track.stop();
});
document.getElementById('video').srcObject = null;
}
</script>
</body>
</html>
```
