ilswebテスト

html {
height: 100%;
}

body {
height: 100%;
margin: 0 auto;
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", HelveticaNeue, "Segoe UI", "游ゴシック体", YuGothic, "Yu Gothic M", "游ゴシック Medium", "Yu Gothic Medium", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.wrapper {
width: 100%;
height: auto;
min-height: 100%;
position: relative;
overflow: hidden;
}
.content {
width: 100%;
max-width: 800px;
background: #000;

margin: 0 auto;
padding-top: 15px;
}

.main {
width: 100%;
position: relative;
}

.video {
max-width: 100%;
display: block;
margin: 0 auto;

}

.overlay {
max-width: 100%;
display: block;
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.button {
width: 100px;
display: block;
padding: 10px;
border-radius: 2px;
font-weight: bold;
margin: 30px auto 0;
font-size: 16px;
color: #000;
border: none;
background: transparent;
}
.gallary {
max-width: 100%;
/* object-fit: fill; */
display: block;
margin: 0 auto;
}

var video = document.getElementById('video');
var canvas = document.getElementById('overlay');
var context = canvas.getContext('2d');
var button = document.getElementById('button');
var gallary = document.getElementById('gallary');
var sadText = document.getElementById('sadText');
var happyText = document.getElementById('happyText');
var area = document.getElementById('videoarea');
var photo = document.getElementById('photo');
var ocrForm = document.getElementById('ocrForm');
var isTracking = false;
var isHappy = false;
var isSad = false;
var isPortrait = true;
var happyLevel;
var imageData;
var mosaicSize;
var contextPath = "${pageContext.request.contextPath}";
var token = $("meta[name='csrf']").attr("content");
var header = $("meta[name='csrf_header']").attr("content");

var constraints = {
audio: false,
video: {
facingMode: 'environment'
}
};
function successFunc (stream) {
if ('srcObject' in video) {
video.srcObject = stream;
} else {
window.URL = window.URL || window.webkitURL;
video.src = (window.URL && window.URL.createObjectURL(stream));
}
// 動画のメタ情報のロードが完了したら実行
video.onloadedmetadata = function() {
adjustProportions();
startTracking();
};

video.onresize = function() {
adjustProportions();
if (isTracking) {
//track.stop();
//track.reset();
startTracking();
}

};

};

function startTracking() {
// トラッキング開始
//track.start(video);
drawLoop();
isTracking = true;
}

function adjustProportions() {
var ratio = video.videoWidth / video.videoHeight;

if (ratio < 1) {
// 画面縦長フラグ
isPortrait = false;
}
video.width = Math.round(video.height * ratio);
canvas.width = video.width;
canvas.height = video.height;
}

function drawLoop() {
// 描画をクリア
context.clearRect(0, 0, canvas.width, canvas.height);
// videoをcanvasにトレース
context.drawImage(video, 0, 0, canvas.width, canvas.height);
// canvasの情報を取得
imageData = context.getImageData(0, 0, canvas.width, canvas.height);

requestAnimationFrame(drawLoop);
}

// カメラから映像を取得
if (navigator.mediaDevices) {
navigator.mediaDevices.getUserMedia(constraints)
.then(successFunc)
.catch((err) => {
window.alert(err.name + ': ' + err.message);
});
} else {
window.alert('非対応ブラウザ！');
}
//スナップショット
function displaySnapshot() {
var snapshot = new Image();
snapshot.src = canvas.toDataURL('image/png');
snapshot.onload = function(){
//snapshot.width = snapshot.width / 2;
//snapshot.height = snapshot.height / 2 ;
//area.style.display="none";
document.getElementById("videoarea").style.display="none";
document.getElementById("confirm").style.display="block";
document.getElementById("photo").style.display="none";
document.getElementById("rephoto").style.display="block";
document.getElementById("next").style.display="block";
gallary.appendChild(snapshot);
postForm(snapshot);
}
}
function back() {
window.location.href = '/ils-web/resources/app/html/photograph.html';
}
function postForm(value) {
var form = document.createElement('form');
var request = document.createElement('input');
form.method = 'POST';
form.action = '/ils-web/ocr';
//request.type = 'hidden'; //入力フォームが表示されないように;
request.setAttribute('type', 'hidden');
request.setAttribute('name', 'base64');
request.setAttribute('value', "aaa");

form.appendChild(request);
request = request.cloneNode(false);
request.setAttribute('type', 'hidden');
request.setAttribute('name', 'csrf');
request.setAttribute('value', token);

form.appendChild(request);
document.body.appendChild(form);
form.submit();
}
function postForm2(value) {
var f = document.forms["ocrForm"];
// エレメントを作成
var ele = document.createElement('input');
// データを設定
ele.setAttribute('type', 'hidden');
ele.setAttribute('name', 'csrf');
ele.setAttribute('value', token);
// 要素を追加
f.appendChild(ele);
f.submit();
}

    window.addEventListener("load", function(){
            window.open('/ils-web/ocr', null, 'top=100,left=100,width=600,height=700');
            }, false)   



<Connector port="8443" protocol="org.apache.coyote.http11.Http11NioProtocol"
           maxThreads="150"
           SSLEnabled="true"
>
    <SSLHostConfig>
        <Certificate
        certificateKeystoreFile="./ssl/demo.keystore"
        certificateKeystorePassword="sicP@ssw0rd"
        certificateKeyAlias="tomcat"
        certificateKeystoreProvider="SUN"
        certificateKeystoreType="JKS"
        type="RSA" />
    </SSLHostConfig>
</Connector>