동영상 재생 화면 추가
parent
048dded1b2
commit
5a5bd291f6
@ -0,0 +1,20 @@
|
||||
package cokr.xit.fims.crdn.web;
|
||||
|
||||
import org.springframework.web.servlet.ModelAndView;
|
||||
|
||||
import cokr.xit.base.web.ApplicationController;
|
||||
|
||||
public class Crdn09Controller extends ApplicationController {
|
||||
|
||||
/** 동영상 재생 메인화면을 연다.
|
||||
* @return fims/crdn/crdn09010-main
|
||||
*/
|
||||
public ModelAndView videoMain(String openerPageName) {
|
||||
ModelAndView mav = new ModelAndView();
|
||||
mav.setViewName("fims/crdn/crdn09010-main");
|
||||
mav.addObject("openerPageName", openerPageName);
|
||||
|
||||
return mav;
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,3 +1,185 @@
|
||||
<%@ 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="/resources/"/>"
|
||||
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="/resources/image/favicon.ico"/>" />
|
||||
|
||||
<!-- Fonts -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" >
|
||||
|
||||
<!-- Icons. Uncomment required icon fonts -->
|
||||
<link rel="stylesheet" href="<c:url value="/resources/3rd-party/sneat/fonts/boxicons.css"/>" />
|
||||
<link rel="stylesheet" href="<c:url value="/resources/3rd-party/sneat/fonts/fontawesome.css"/>" />
|
||||
<link rel="stylesheet" href="<c:url value="/resources/3rd-party/sneat/fonts/flag-icons.css"/>" />
|
||||
<link rel="stylesheet" href="<c:url value="/resources/css/fims/framework/common/xit-icon.css"/>" />
|
||||
<!-- Core CSS -->
|
||||
<link rel="stylesheet" href="<c:url value="/resources/css/fims/framework/common/xit-core.css"/>" />
|
||||
<link rel="stylesheet" href="<c:url value="/resources/3rd-party/sneat/css/theme-default.css"/>" />
|
||||
<link rel="stylesheet" href="<c:url value="/resources/3rd-party/sneat/css/docs.css"/>" />
|
||||
<link rel="stylesheet" href="<c:url value="/resources/css/fims/framework/common/xit-core-extend.css"/>" />
|
||||
|
||||
<!-- Vendors CSS -->
|
||||
<link rel="stylesheet" href="<c:url value="/resources/3rd-party/sneat/libs/perfect-scrollbar/perfect-scrollbar.css"/>" />
|
||||
<link rel="stylesheet" href="<c:url value="/resources/css/styles.css"/>" />
|
||||
|
||||
<link rel="stylesheet" href="<c:url value="/resources/css/fims/framework/common/common.css"/>"/>
|
||||
<link rel="stylesheet" href="<c:url value="/resources/3rd-party/jquery-ui/1.13.2/themes/redmond/jquery-ui.css"/>" />
|
||||
<link rel="stylesheet" href="<c:url value="/resources/lib/fims/framework/datepicker/datepicker.css"/>" />
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<c:set var="prefixName" 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" style="width:100%;height:75px;">
|
||||
|
||||
<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" style="height:70px;">
|
||||
<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" style="height:70px;">
|
||||
<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" style="height:70px;">
|
||||
<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"
|
||||
style="width:1400px;height:850px;padding: 10px;background-color: #E2E6E9;border: solid 1px #ccc;">
|
||||
<div class="d-flex justify-content-center align-items-center" style="border-style: solid;width:100%;height: 100%">
|
||||
<video id="video" width="1200" controls="true" hidden>
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card d-inline-flex ms-1" style="width:290px;height:850px;padding: 10px;">
|
||||
<div class="card m-1 bg-program-popup cleanparking capture-output" style="height:144px;">
|
||||
|
||||
</div>
|
||||
<div class="card m-1 bg-program-popup cleanparking capture-output" style="height:144px;">
|
||||
|
||||
</div>
|
||||
<div class="card m-1 bg-program-popup cleanparking capture-output" style="height:144px;">
|
||||
|
||||
</div>
|
||||
<div class="card m-1 bg-program-popup cleanparking capture-output" style="height:144px;">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="<c:url value="/resources/3rd-party/sneat/js/helpers.js"/>"></script>
|
||||
<script src="<c:url value="/resources/3rd-party/sneat/libs/jquery/jquery.js"/>"></script>
|
||||
<script src="<c:url value="/resources/3rd-party/jquery-ui/1.13.2/jquery-ui.js"/>"></script>
|
||||
<script src="<c:url value="/resources/3rd-party/sneat/libs/popper/popper.js"/>"></script>
|
||||
<script src="<c:url value="/resources/3rd-party/sneat/js/bootstrap.js"/>"></script>
|
||||
<script src="<c:url value="/resources/3rd-party/sneat/libs/perfect-scrollbar/perfect-scrollbar.js"/>"></script>
|
||||
<script src="<c:url value="/resources/3rd-party/sneat/libs/hammer/hammer.js"/>"></script>
|
||||
<script src="<c:url value="/resources/3rd-party/sneat/libs/i18n/i18n.js"/>"></script>
|
||||
<script src="<c:url value="/resources/3rd-party/sneat/js/menu.js"/>"></script>
|
||||
<script src="<c:url value="/resources/3rd-party/sneat/libs/jstree/jstree.js"/>"></script>
|
||||
<script src="<c:url value="/resources/3rd-party/jstree/jstree-support.js"/>"></script>
|
||||
<script src="<c:url value='/resources/3rd-party/sneat/js/config.js'/>"></script>
|
||||
<script src="<c:url value='/resources/3rd-party/sneat/libs/chartjs/chartjs.js'/>"></script>
|
||||
|
||||
<script>
|
||||
var openerPageName = "${openerPageName}";
|
||||
|
||||
var scaleFactor = 0.25;
|
||||
var snapshots = [];
|
||||
|
||||
document.getElementById("video").addEventListener('play', function () {
|
||||
document.getElementById("btnCapture").focus();
|
||||
});
|
||||
|
||||
|
||||
function capture(video, scaleFactor) {
|
||||
if(scaleFactor == null){
|
||||
scaleFactor = 1;
|
||||
}
|
||||
var w = video.videoWidth * scaleFactor;
|
||||
var h = video.videoHeight * scaleFactor;
|
||||
var canvas = document.createElement('canvas');
|
||||
canvas.width = w;
|
||||
canvas.height = h;
|
||||
var ctx = canvas.getContext('2d');
|
||||
ctx.drawImage(video, 0, 0, w, h);
|
||||
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 canvas = capture(video, scaleFactor);
|
||||
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();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue