You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
218 lines
7.1 KiB
Plaintext
218 lines
7.1 KiB
Plaintext
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" session="false"%>
|
|
<%@ include file="/WEB-INF/jsp/include/taglib.jsp"%>
|
|
<!DOCTYPE html>
|
|
<html
|
|
lang="kr"
|
|
class="light-style layout-navbar-fixed layout-menu-fixed"
|
|
dir="ltr"
|
|
data-theme="theme-default"
|
|
data-assets-path="<c:url value="/webjars/"/>"
|
|
data-template="vertical-menu-template-starter">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>북촌 통행제한 관리 시스템</title>
|
|
|
|
<!-- Favicon -->
|
|
<link rel="icon" type="image/x-icon" href="<c:url value="/webjars/image/favicon.ico"/>" />
|
|
<!-- Fonts -->
|
|
<link rel="stylesheet" href="<c:url value="/webjars/applib/font/notoSansKr/fontface.css"/>" />
|
|
<!-- Icons. Uncomment required icon fonts -->
|
|
<link rel="stylesheet" href="<c:url value="/webjars/3rd-party/sneat/fonts/boxicons.css"/>" />
|
|
<link rel="stylesheet" href="<c:url value="/webjars/3rd-party/sneat/fonts/fontawesome.css"/>" />
|
|
<link rel="stylesheet" href="<c:url value="/webjars/applib/font/bootstrap-icons.css"/>" />
|
|
<link rel="stylesheet" href="<c:url value="/webjars/applib/font/material-icons.css"/>" />
|
|
<link rel="stylesheet" href="<c:url value="/resources/fonts/xit-icon.css"/>" />
|
|
<!-- Core CSS -->
|
|
<link rel="stylesheet" href="<c:url value="/webjars/3rd-party/sneat/css/rtl/core.css"/>" class="template-customizer-core-css" />
|
|
<link rel="stylesheet" href="<c:url value="/webjars/3rd-party/sneat/css/rtl/theme-default.css"/>" class="template-customizer-theme-css" />
|
|
<link rel="stylesheet" href="<c:url value="/webjars/css/styles.css"/>" />
|
|
|
|
<link rel="stylesheet" href="<c:url value="/webjars/applib/css/overwrite.css?${ver}"/>" />
|
|
<link rel="stylesheet" href="<c:url value="/webjars/applib/css/applib.css?${ver}"/>" />
|
|
|
|
<link rel="stylesheet" href="<c:url value="/resources/css/fims.css?${ver}"/>" />
|
|
|
|
<!-- Vendors CSS -->
|
|
<link rel="stylesheet" href="<c:url value="/webjars/3rd-party/sneat/libs/perfect-scrollbar/perfect-scrollbar.css"/>" />
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<c:set var="pageKorName" scope="request">동영상 재생</c:set>
|
|
<input type="file" id="file" name="file" hidden accept="video/*" />
|
|
|
|
<div class="container-page-btn px-5 bg-program-title green cleanparking w-100 h-px-75">
|
|
|
|
<h2 class="text-white modal-title">동영상 캡쳐</h2>
|
|
<span class="container-window-btn-right">
|
|
<button id="btnLoad" class="btn p-0 d-block w-px-100 h-px-70">
|
|
<i class='bx bx-lg bx-folder-open' ></i><br/><span class="text-black">동영상 오픈</span>
|
|
</button>
|
|
<button id="btnCapture" class="btn p-0 d-block w-px-100 h-px-70">
|
|
<i class='bx bx-lg bxs-camera'></i><br/><span class="text-black">캡처</span>
|
|
</button>
|
|
<button id="btnSave" class="btn p-0 d-block w-px-100 h-px-70">
|
|
<i class='bx bx-lg bxs-save'></i><br/><span class="text-black">캡처 이미지 저장</span>
|
|
</button>
|
|
</span>
|
|
|
|
</div>
|
|
|
|
<div class="d-flex justify-content-center">
|
|
<div class="card d-inline-flex w-px-1400 h-px-850 p-2 border-card bg-bordergray">
|
|
<div class="d-flex justify-content-center align-items-center w-100 h-100 border-label-dark">
|
|
<video id="video" class="mh-px-700 mw-px-1200" controls="true" hidden>
|
|
</video>
|
|
</div>
|
|
</div>
|
|
<div class="card d-inline-flex align-items-center ms-1 min-w-px-300 w-px-300 h-px-850 p-2">
|
|
<div class="card m-1 bg-program-popup cleanparking capture-output align-items-center w-100 h-px-150">
|
|
|
|
</div>
|
|
<div class="card m-1 bg-program-popup cleanparking capture-output align-items-center w-100 h-px-150">
|
|
|
|
</div>
|
|
<div class="card m-1 bg-program-popup cleanparking capture-output align-items-center w-100 h-px-150">
|
|
|
|
</div>
|
|
<div class="card m-1 bg-program-popup cleanparking capture-output align-items-center w-100 h-px-150">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Core JS -->
|
|
<script src="<c:url value="/webjars/3rd-party/sneat/libs/popper/popper.js"/>"></script>
|
|
<script src="<c:url value="/webjars/3rd-party/sneat/js/bootstrap.js"/>"></script>
|
|
<script src="<c:url value="/webjars/3rd-party/sneat/libs/jquery/jquery.js"/>"></script>
|
|
|
|
<script src="<c:url value="/webjars/3rd-party/sneat/js/config.js"/>"></script>
|
|
<script src="<c:url value="/webjars/3rd-party/sneat/libs/perfect-scrollbar/perfect-scrollbar.js"/>"></script>
|
|
<script src="<c:url value="/webjars/3rd-party/sneat/js/helpers.js"/>"></script>
|
|
<script src="<c:url value="/webjars/3rd-party/sneat/js/menu.js"/>"></script>
|
|
|
|
<!-- base -->
|
|
<script src="<c:url value="/webjars/js/base/base.js"/>"></script>
|
|
|
|
<script>
|
|
var openerPageName = "${openerPageName}";
|
|
|
|
var snapshots = [];
|
|
|
|
document.getElementById("file").addEventListener('change', function () {
|
|
document.getElementById("video").focus();
|
|
});
|
|
|
|
document.getElementById("video").addEventListener('play', function () {
|
|
document.getElementById("btnCapture").focus();
|
|
});
|
|
|
|
|
|
function capture(video, scaleForCanvasStyle) {
|
|
|
|
var originalW = video.videoWidth;
|
|
var originalH = video.videoHeight;
|
|
|
|
var canvas = document.createElement('canvas');
|
|
|
|
canvas.width = originalW;
|
|
canvas.height = originalH;
|
|
|
|
canvas.style = "width:"+($(video).width() * scaleForCanvasStyle)+"px;"+ "height:"+($(video).height() * scaleForCanvasStyle)+"px;";
|
|
|
|
|
|
var ctx = canvas.getContext('2d');
|
|
ctx.drawImage(video, 0, 0, originalW, originalH);
|
|
return canvas;
|
|
}
|
|
|
|
|
|
$("#btnLoad").on("click",function(){
|
|
$("#file").trigger("click");
|
|
});
|
|
$("#file").on("change", function(){
|
|
|
|
var files = this.files,
|
|
length = files.length;
|
|
|
|
snapshots = [];
|
|
$(".capture-output").html = "";
|
|
|
|
if(files.length > 0){
|
|
var file = files[0];
|
|
file.url = (window.URL || window.webkitURL).createObjectURL(file);
|
|
|
|
$("#video").removeAttr("hidden");
|
|
$("#video").html("<source src='"+file.url+"'>");
|
|
} else {
|
|
$("#video").attr("hidden","hidden");
|
|
$("#video").html("");
|
|
}
|
|
|
|
});
|
|
|
|
$("#btnCapture").on("click",function(){
|
|
if($("#video").is(":hidden")) return;
|
|
|
|
var video = document.getElementById("video");
|
|
var videoStyleW = $(video).width();
|
|
var videoStyleH = $(video).height();
|
|
|
|
var scaleForCanvasStyleW = 1;
|
|
if(videoStyleW > 259){
|
|
scaleForCanvasStyleW = 259/videoStyleW;
|
|
}
|
|
var scaleForCanvasStyleH = 1;
|
|
if(videoStyleH > 142){
|
|
scaleForCanvasStyleH = 142/videoStyleH;
|
|
}
|
|
|
|
var scaleForCanvasStyle = scaleForCanvasStyleW < scaleForCanvasStyleH ? scaleForCanvasStyleW : scaleForCanvasStyleH;
|
|
|
|
var canvas = capture(video, scaleForCanvasStyle);
|
|
canvas.ondblclick = function(){
|
|
window.open(this.toDataURL());
|
|
};
|
|
if(snapshots.length >= 4) return;
|
|
|
|
snapshots.push(canvas);
|
|
|
|
$(".capture-output").html = "";
|
|
var outputs = $(".capture-output");
|
|
for(var i=0; i<snapshots.length; i++){
|
|
outputs[i].appendChild(snapshots[i]);
|
|
}
|
|
});
|
|
|
|
$("#btnSave").on("click",function(){
|
|
if(snapshots.length > 0){
|
|
|
|
window.opener.pageObject[openerPageName].videoCallback(snapshots);
|
|
window.close();
|
|
}
|
|
});
|
|
|
|
|
|
$(document).ready(function(){
|
|
if(openerPageName == "cvlc01020"){
|
|
$("#btnLoad").removeClass("d-block");
|
|
$("#btnLoad").addClass("d-none");
|
|
|
|
var fileInfo = [${fileInfo}];
|
|
|
|
if(fileInfo.length > 0){
|
|
var fileUrl = fileInfo[0].URL;
|
|
|
|
$("#video").removeAttr("hidden");
|
|
|
|
$("#video").html("<source src='" + "${pageContext.request.contextPath}" + "/" + fileUrl +"'>");
|
|
|
|
} else {
|
|
alert("동영상 파일이 없습니다.");
|
|
}
|
|
}
|
|
});
|
|
|
|
</script>
|
|
</body>
|
|
</html> |