<%@ page import="java.util.*" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>管理员</title>
    <link rel="stylesheet" href="<%=request.getContextPath()%>/static/css/mainTemplate.css">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/static/css/enterScanStyle.css">
</head>
<body>
<div class="top-bar">
    <div class="top-bar-logo">
        <a  href="<%=request.getContextPath()%>/mall/AllTask"><img id="logo" src="<%=request.getContextPath()%>/static/images/logo.jpg" alt="" ></a>
        <a id="logo-text" href="<%=request.getContextPath()%>">山东科技大学 作为小组停车场管理系统 <span>门禁系统</span></a>
    </div>
    <div class="top-bar-btn">
    </div>
    <div class="top-bar-right">
        <div class="drop-menu">
            <div class="top-bar-account">
            </div>
        </div>
    </div>
</div>
<div class="container">
    <div class="tasks-content">
        <div id="title">
            <span>请将车牌对准摄像头进行识别</span>
            <p style="font-size: 20px;">正在识别中...</p>
        </div>
        <div id="contentHolder">
            <video id="video" autoplay></video>
            <canvas style="display:none;" id="canvas"></canvas>
            <img id="imgXX" src="" />
        </div>
    </div>
</div>
</body>
</html>
<script>
    const cvs = document.getElementById('canvas')
    const video = document.getElementById('video')
    cvs.width = video.width = 1000;
    cvs.height = video.height = 600;
    const {width, height} = cvs
    const ctx = cvs.getContext('2d')

    const constraints = {
        video: {
            width,
            height
        }
    }
    navigator.mediaDevices.getUserMedia({
        video: {
            width,
            height
        }
    }).then((stream) => {
        video.srcObject = stream
        video.onloadedmetadata = () => video.play()
    })

    video.addEventListener('loadeddata', function() {
        setInterval(function() {
            // 将当前视频帧绘制到画布上
            ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

            // 将图像数据发送到 Servlet
            const dataURL = canvas.toDataURL('image/png');
            sendDataToServlet(dataURL);
        }, 2000); // 0.5s 进行一次识别
    });

    function sendDataToServlet(dataURL) {
        // 创建 XMLHttpRequest 对象
        const xhr = new XMLHttpRequest();

        // 定义处理响应的函数
        xhr.onreadystatechange = function() {
            if (xhr.readyState === XMLHttpRequest.DONE) {
                if (xhr.status === 200) {
                    // 假设URL在响应体中返回
                    let url = xhr.responseText; // 这里获取到的是Servlet响应的内容，即URL
                    if(url.trim() !== "") { // 检查URL是否不为空
                        window.location.href = url; // 跳转到该URL
                    }
                } else {
                    console.error('Failed to save image on server.');
                }
            }
        };
        // 发送 POST 请求到 Servlet
        xhr.open('POST', '/ParkingLotManagementSystem/main/recoPlate', true);
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=UTF-8');
        xhr.send('image=' + encodeURIComponent(dataURL));
    }
</script>
