Index: ssts-web/src/main/webapp/disinfectsystem/test/videoAndImg.js =================================================================== diff -u -r33553 -r38847 --- ssts-web/src/main/webapp/disinfectsystem/test/videoAndImg.js (.../videoAndImg.js) (revision 33553) +++ ssts-web/src/main/webapp/disinfectsystem/test/videoAndImg.js (.../videoAndImg.js) (revision 38847) @@ -9,7 +9,7 @@ function getImageIds() { var imageIds = ""; - if(window.opener.document.getElementById("imageIds")){ + if(window.opener && window.opener.document.getElementById("imageIds")){ var imageIdsDom = window.opener.document.getElementById("imageIds"); imageIds = imageIdsDom.value; } @@ -21,7 +21,7 @@ function getVideoIds() { var videoIds = ""; - if(window.opener.document.getElementById("videoIds")){ + if(window.opener && window.opener.document.getElementById("videoIds")){ var videoIdsDom = window.opener.document.getElementById("videoIds"); videoIds = videoIdsDom.value; } @@ -47,7 +47,7 @@ }else { paramsData.objectId = objectId; } - if(window.opener.document.getElementById("imageIds")){ + if(window.opener && window.opener.document.getElementById("imageIds")){ window.opener.document.getElementById("imageIds").value = imageIdsData; window.opener.document.getElementById("videoIds").value = videoIdsData; } @@ -311,11 +311,11 @@ function imgAndVideoBtn(){ // 弹出窗口 - var pageUrl = WWWROOT + '/disinfectsystem/test/takeVideoAndImg.jsp?showVideo=true'; + var pageUrl = WWWROOT + '/disinfectsystem/test/takeVideoAndImg.jsp?showVideo=true&imageType='+imageType; if(imageType == '一次性物品图片' || imageType == '器械包图片' || imageType == '器械包说明书' || imageType == '清洗操作指引图片' || imageType == '器械包装配教学图片' || imageType == '材料图片'){ - pageUrl = WWWROOT + '/disinfectsystem/test/takeVideoAndImg.jsp?showVideo=false'; + pageUrl = WWWROOT + '/disinfectsystem/test/takeVideoAndImg.jsp?showVideo=false&imageType='+imageType; }else if(videoType == '配包教学视频'){ - pageUrl = WWWROOT + '/disinfectsystem/test/takeVideoAndImg.jsp?showVideo=true&hiddenImage=true'; + pageUrl = WWWROOT + '/disinfectsystem/test/takeVideoAndImg.jsp?showVideo=true&hiddenImage=true&imageType='+imageType; } popwin = openFullSizeWindowWithName(pageUrl,true,'拍摄视频图片'); if(popwin != null ){ @@ -395,8 +395,8 @@ } } //拆包 - if(window.opener.imageIdsArry && imageIds !== ''){ - if(window.opener.document.getElementById("imageIds")){ + if(window.opener && window.opener.imageIdsArry && imageIds !== ''){ + if(window.opener && window.opener.document.getElementById("imageIds")){ var value = window.opener.document.getElementById("imageIds").value; var arr = value.split(','); if(arr.indexOf(imageIds) == -1){ @@ -414,8 +414,8 @@ } } //拆包 - if(window.opener.videoIdsArry && videoIds !== ''){ - if(window.opener.document.getElementById("videoIds")){ + if(window.opener && window.opener.videoIdsArry && videoIds !== ''){ + if(window.opener && window.opener.document.getElementById("videoIds")){ var value = window.opener.document.getElementById("videoIds").value; var arr = value.split(','); if(arr.indexOf(videoIds) == -1){ @@ -447,22 +447,22 @@ } //传给上级页面用做提交的参数 - if(window.opener.document.getElementById("imageIdsAndGoodsName")){ + if(window.opener && window.opener.document.getElementById("imageIdsAndGoodsName")){ var imageIdsAndGoodsName = window.opener.document.getElementById("imageIdsAndGoodsName"); imageIdsAndGoodsName.value = JSON.stringify(goodsNameImageFile2); } - if(window.opener.document.getElementById("videoIdsAndGoodsName")){ + if(window.opener && window.opener.document.getElementById("videoIdsAndGoodsName")){ var videoIdsAndGoodsName = window.opener.document.getElementById("videoIdsAndGoodsName"); videoIdsAndGoodsName.value = JSON.stringify(goodsNameVideoeFile2); } - if(window.opener.document.getElementById("imageIds")){ + if(window.opener && window.opener.document.getElementById("imageIds")){ var imageIdsDom = window.opener.document.getElementById("imageIds"); imageIdsDom.value = imageIds; } - if(window.opener.document.getElementById("videoIds")){ + if(window.opener && window.opener.document.getElementById("videoIds")){ var videoIdsDom = window.opener.document.getElementById("videoIds"); videoIdsDom.value = videoIds; } Index: ssts-web/src/main/webapp/disinfectsystem/test/takeVideoAndImg.js =================================================================== diff -u -r37896 -r38847 --- ssts-web/src/main/webapp/disinfectsystem/test/takeVideoAndImg.js (.../takeVideoAndImg.js) (revision 37896) +++ ssts-web/src/main/webapp/disinfectsystem/test/takeVideoAndImg.js (.../takeVideoAndImg.js) (revision 38847) @@ -9,6 +9,11 @@ var times = null; var newStream = null; +var videoLeft = 0; +var videoTop = 0; +var videoRight = 0; +var videoBottom = 0; + //默认最高分辨率 var maxWidth = 2048; var maxHeight = 1152; @@ -108,13 +113,8 @@ function openCamera() { var cameraHeight = $(window).height() - $(".camera_footer").height() - 20; var cameraWidth = parseInt(cameraHeight / 480 * 640); - var video = document.getElementById('video'); var videoShow = document.getElementById('videoShow'); - video.controls = false; - video.muted = true; - video.width = cameraWidth; - video.height = cameraHeight; videoShow.controls = false; videoShow.muted = true; var videoObj = { @@ -137,8 +137,6 @@ // 通过 MediaRecorder 记录获取到的媒体流 mediaRecorder = new MediaRecorder(stream); var chunks = [], startTime = 0; - video.srcObject = stream; - video.play(); videoShow.srcObject = stream; videoShow.play(); mediaRecorder.ondataavailable = function (e) { @@ -194,14 +192,13 @@ }; function reloadUserMedia(width, height, isFirst) { - var video = document.getElementById("video"); var videoShow = document.getElementById("videoShow"); var videoObj = true; if (width && height) { videoObj = { width: width, height: height } } - if(newStream){ + if (newStream) { MediaUtils.closeStream(newStream) } MediaUtils.getUserMedia(videoObj, false, function (err, stream) { @@ -218,7 +215,7 @@ maxWidth = width || getCapabilities.width.max; maxHeight = height || getCapabilities.height.max; if (isFirst) { - reloadUserMedia(maxWidth,maxHeight); + reloadUserMedia(maxWidth, maxHeight); var html = ''; if (maxWidth > 4096) { html += ''; @@ -258,23 +255,34 @@ } html += ''; $('#changeResolution').html(html); - }else { - video.srcObject = stream; + } else { videoShow.srcObject = stream; var videoTrack = stream.getVideoTracks()[0]; // 获取摄像头的设置 var settings = videoTrack.getSettings(); var getCapabilities = videoTrack.getCapabilities(); maxWidth = width || getCapabilities.width.max; maxHeight = height || getCapabilities.height.max; - canvasBig.setAttribute('width', maxWidth); - canvasBig.setAttribute('height', maxHeight); - $('#video').css({ - width: maxWidth + 'px', - height: maxHeight + 'px', - display: 'none' + var cameraHeight = $(window).height() - $(".camera_footer").height() - 20; + var radio = maxHeight / cameraHeight; + var offsetWidth = 0; + var offsetHeight = 0; + if (videoLeft > 0) { + offsetWidth = parseInt(videoLeft * radio); + } else if (videoRight > 0) { + offsetWidth = parseInt(videoRight * radio); + } + if (videoTop > 0) { + offsetHeight = parseInt(videoTop * radio); + } else if (videoBottom > 0) { + offsetHeight = parseInt(videoBottom * radio); + } + canvasBig.setAttribute('width', maxWidth - offsetWidth); + canvasBig.setAttribute('height', maxHeight - offsetHeight); + $('#cameraContent').css({ + width: parseInt(maxWidth / radio) + 'px', + height: parseInt(cameraHeight) + 'px' }) - video.play(); videoShow.play(); } } @@ -306,11 +314,62 @@ // 这段代码主要是获取摄像头的视频流并显示在Video 签中 $(function () { + var videoShow = document.getElementById('videoShow'); var cameraHeight = $(window).height() - $(".camera_footer").height() - 20; - var cameraWidth = parseInt(cameraHeight / 480 * 640); $(".camera_wrapper").css({ "height": cameraHeight + "px" }); - var canvas = document.getElementById("canvas"); - var context = canvas.getContext("2d"); + videoTop = 0; + videoBottom = 0; + videoLeft = 0; + videoRight = 0; + + if (sstsConfig.setTheDisplayAreaOfPhotography) { + var setTheDisplayAreaOfPhotography = sstsConfig.setTheDisplayAreaOfPhotography; + for (var item in setTheDisplayAreaOfPhotography) { + if (item == 'recycle' && imageType == '回收采集图片') { + videoTop = setTheDisplayAreaOfPhotography[item]['top'] || 0; + videoBottom = setTheDisplayAreaOfPhotography[item]['bottom'] || 0; + videoLeft = setTheDisplayAreaOfPhotography[item]['left'] || 0; + videoRight = setTheDisplayAreaOfPhotography[item]['right'] || 0; + } + } + } + + if (videoTop >= 0 && videoBottom == 0) { + $('#videoShow').css({ + top: videoTop + 'px' + }) + + $('#cameraContent').css({ + top: - parseInt(videoTop / 2) + 'px' + }) + } else if (videoBottom >= 0) { + $('#videoShow').css({ + bottom: videoBottom + 'px' + }) + + $('#cameraContent').css({ + bottom: - parseInt(videoBottom / 2) + 'px' + }) + } + + if (videoLeft >= 0 && videoRight == 0) { + $('#videoShow').css({ + left: videoLeft + 'px' + }) + + $('#cameraContent').css({ + left: - parseInt(videoLeft / 2) + 'px' + }) + } else if (videoRight >= 0) { + $('#videoShow').css({ + right: videoRight + 'px' + }) + + $('#cameraContent').css({ + right: - parseInt(videoRight / 2) + 'px' + }) + } + if (showVideo == false || showVideo == 'false') { $('.toggle_btn').hide(); } @@ -347,14 +406,16 @@ return; } if ($("#takePhotos").prop("checked")) {//拍图片 - /*拍图片的下滑效果 */ - $("#canvas").removeClass("animate-bounce-up"); - $("#canvas").hide(0).slideDown("normal"); - $("#canvas").addClass("animate-bounce-up"); - context.drawImage(video, 0, 0, imgWidth, imgHeight); - contextBig.drawImage(video, 0, 0, maxWidth, maxHeight); - /* 显示在多图片页面 */ - var base64Data = canvas.toDataURL('image/jpeg', 1.0); + var radio = maxHeight / cameraHeight; + var canvasLeft = 0; + var canvasTop = 0; + if (videoRight > 0) { + canvasLeft = parseInt(videoRight * radio); + } + if (videoBottom > 0) { + canvasTop = parseInt(videoBottom * radio); + } + contextBig.drawImage(videoShow, canvasLeft, canvasTop, maxWidth, maxHeight, 0, 0, maxWidth, maxHeight); /* 预览大图 */ var base64DataBig = canvasBig.toDataURL('image/jpeg', 1.0); canvasBig.toBlob(function (blobObj) { @@ -366,7 +427,9 @@ list += "
"; list += "未上传"; list += ""; - $("#imgVideoBtn", window.opener.document).before(list);//子窗口给父窗口元素赋值 + $("#imgVideoBtn", window.opener.document).before(list);//子窗口给父窗口元素赋值 + var preImgDiv = ""; + $("#preImg").html(preImgDiv); updateParentImgVideoNum(); } else {//拍视频 if ($(this).hasClass('on')) { @@ -404,31 +467,27 @@ $("#cameraBtn").removeClass("stop"); $("#cameraBtn").addClass("on"); layer.msg("录制成功,视频录制不能超过30分钟!", { icon: 7 }); - $("#canvas").removeClass("animate-bounce-up"); - $("#canvas").hide(0).slideDown("normal"); - $("#canvas").addClass("animate-bounce-up"); - context.drawImage(video, 0, 0, imgWidth, imgHeight); - contextBig.drawImage(video, 0, 0, cameraWidth, cameraHeight); + contextBig.drawImage(videoShow, 0, 0, maxWidth, maxHeight); //预览大图 base64DataBig2 = canvasBig.toDataURL('image/jpeg', 1.0); + var preImgDiv = ""; + $("#preImg").html(preImgDiv); } }, 1000); } else { $("#cameraBtn").addClass("on"); $("#cameraBtn").removeClass("stop"); mediaRecorder.stop(); setTime('end'); - context.drawImage(video, 0, 0, imgWidth, imgHeight); - contextBig.drawImage(video, 0, 0, cameraWidth, cameraHeight); + contextBig.drawImage(videoShow, 0, 0, maxWidth, maxHeight); var endTime = new Date(); var duration = intervalTime(beginTime, endTime); durationTime = duration; //预览大图 base64DataBig2 = canvasBig.toDataURL('image/jpeg', 1.0); + var preImgDiv = ""; + $("#preImg").html(preImgDiv); layer.msg("录制成功!", { icon: 1 }); - $("#canvas").removeClass("animate-bounce-up"); - $("#canvas").hide(0).slideDown("normal"); - $("#canvas").addClass("animate-bounce-up"); } } Index: ssts-web/src/main/webapp/disinfectsystem/test/takeVideoAndImg.jsp =================================================================== diff -u -r37893 -r38847 --- ssts-web/src/main/webapp/disinfectsystem/test/takeVideoAndImg.jsp (.../takeVideoAndImg.jsp) (revision 37893) +++ ssts-web/src/main/webapp/disinfectsystem/test/takeVideoAndImg.jsp (.../takeVideoAndImg.jsp) (revision 38847) @@ -9,14 +9,14 @@ 视频图片拍摄 - - + + @@ -71,18 +71,13 @@ } -
-
- - +
+
+
-
- - +
+
选择分辨率：