<!DOCTYPE html>
|
<html lang="en">
|
<head>
|
<meta charset="UTF-8">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<style>
|
body {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
height: 100vh;
|
margin: 0;
|
background-color: #f5f5f5;
|
font-family: Arial, sans-serif;
|
}
|
|
.container {
|
position:absolute;
|
top: 0;
|
text-align: left;
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
|
padding: 20px;
|
max-width: 1280px;
|
width: 100%;
|
}
|
.dplayer-container {
|
display: flex;
|
}
|
|
.box {
|
width: 50%;
|
padding: 5px;
|
padding-bottom: 20px;
|
border: 1px solid #ccc;
|
width: 640px;
|
height: 510px;
|
margin-bottom: 5px;
|
text-align: center;
|
}
|
.box_title {
|
color: blue;
|
}
|
|
img {
|
width: 200px;
|
height: 100px;
|
margin: 2px;
|
}
|
|
table {
|
font-family: Arial, sans-serif;
|
border-collapse: collapse;
|
width: 100%;
|
}
|
|
th, td {
|
border: 1px solid #dddddd;
|
text-align: left;
|
padding: 8px;
|
}
|
|
th {
|
background-color: #f2f2f2;
|
}
|
</style>
|
<title>License Plate Recognize(short as LPR) Sample</title>
|
</head>
|
<body>
|
<div class="container">
|
<h2>License Plate Recognize(short as LPR) Camera Based On VideoPipe</h2>
|
<div class="dplayer-container">
|
<div class="box">
|
<div id="dplayer-container-0"></div>
|
<div class="box_title">【Channel 0】{{live_stream_0}}</div>
|
</div>
|
</div>
|
<p class="centered-text">There are <span style="color:red">{{total_records}} License Plate records</span>. You can filter them by properties:</p>
|
<p>
|
<form action="/" method="post">
|
<label for="ba_type">Select Time Period:</label>
|
<input type="datetime-local" id="start_time" name="select_start_time" value="{{select_start_time}}">
|
<input type="datetime-local" id="end_time" name="select_end_time" value="{{select_end_time}}">
|
<button type="submit">Search</button>
|
</form>
|
</p>
|
<table>
|
<thead>
|
<tr>
|
<th>uid</th>
|
<th>time</th>
|
<th>color</th>
|
<th>text</th>
|
<th>cropped image</th>
|
<th>whole image</th>
|
</tr>
|
</thead>
|
<tbody>
|
{% for result in plate_results: %}
|
<tr>
|
<td>{{result['uid']}}</td>
|
<td>{{result['time']}}</td>
|
<td>{{result['color']}}</td>
|
<td>{{result['text']}}</td>
|
{% if result['cropped_image'] != '' %}
|
<td><a href="{{result['cropped_image']}}"><img src="{{result['cropped_image']}}" title="click to load image"></a></td>
|
{% endif %}
|
{% if result['ba_image'] == '' %}
|
<td>no cropped image recorded</td>
|
{% endif %}
|
|
{% if result['whole_image'] != '' %}
|
<td><a href="{{result['whole_image']}}"><img src="{{result['whole_image']}}" title="click to load image"></a></td>
|
{% endif %}
|
{% if result['whole_image'] == '' %}
|
<td>no whole image recorded</td>
|
{% endif %}
|
</tr>
|
{% endfor%}
|
</tbody>
|
</table>
|
</div>
|
<script src="../static/dist/flv.min.js"></script>
|
<script src="../static/dist/DPlayer.min.js"></script>
|
<script>
|
// live stream of channel 0
|
const dp_0= new DPlayer({
|
container: document.getElementById('dplayer-container-0'),
|
live: true,
|
autoplay: true,
|
mutex: false,
|
volume:0,
|
video: {
|
url: '{{live_stream_0 | safe}}',
|
type: 'auto',
|
},
|
});
|
</script>
|
</body>
|
</html>
|
