视频图片拍摄

- + + \ No newline at end of file Index: ssts-web/src/main/webapp/disinfectsystem/test/takeVideoAndImg.js =================================================================== diff -u -r27172 -r27463 --- ssts-web/src/main/webapp/disinfectsystem/test/takeVideoAndImg.js (.../takeVideoAndImg.js) (revision 27172) +++ ssts-web/src/main/webapp/disinfectsystem/test/takeVideoAndImg.js (.../takeVideoAndImg.js) (revision 27463) @@ -9,266 +9,311 @@ var times = null; //js 获取当前时间 -function getCurTime(){ - var date=new Date(); - var year=date.getFullYear();//当前年份 - var month=date.getMonth();//当前月份 - var data=date.getDate();//天 - var hours=date.getHours();//小时 - var minute=date.getMinutes();//分 - var second=date.getSeconds();//秒 - var time = year+"-"+formatTime((month+1))+"-"+formatTime(data)+" "+formatTime(hours)+":"+formatTime(minute)+":"+formatTime(second); +function getCurTime() { + var date = new Date(); + var year = date.getFullYear();//当前年份 + var month = date.getMonth();//当前月份 + var data = date.getDate();//天 + var hours = date.getHours();//小时 + var minute = date.getMinutes();//分 + var second = date.getSeconds();//秒 + var time = year + "-" + formatTime((month + 1)) + "-" + formatTime(data) + " " + formatTime(hours) + ":" + formatTime(minute) + ":" + formatTime(second); var timeAll = new Date(time).getTime(); return timeAll; } +//计时 +var second = 0; +var minute = 0; +var getTime = ''; + +function setTime(status) { + if (status == 'start') { + getTime = setTimeout(function () { + second++; + if (second == 60) { + minute++; + second = 0; + } + + var secondStr = (second > 9) ? second : '0' + second; + var minuteStr = (minute > 9) ? minute : '0' + minute; + + $('#cameraTime').html(minuteStr + ':' + secondStr); + + setTime('start'); + }, 1000); + } else { + clearTimeout(getTime); + second = 0; + minute = 0; + } +} + //补位当某个字段不是两位数时补0 -function formatTime(str){ - var num; - str>=10?num=str:num="0"+str; - return num; -} +function formatTime(str) { + var num; + str >= 10 ? num = str : num = "0" + str; + return num; +} /* 更新数量 */ -function updateParentImgVideoNum(){ - var lens = $(".spotlight_parent",window.opener.document).length;//子窗口给父窗口元素赋值 - $("#videImgNum",window.opener.document).html(lens); +function updateParentImgVideoNum() { + var lens = $(".spotlight_parent", window.opener.document).length;//子窗口给父窗口元素赋值 + $("#videImgNum", window.opener.document).html(lens); } -function videoListShow(base64DataBig2,durationTime,num){ +function videoListShow(base64DataBig2, durationTime, num) { /* 显示在多图片页面 */ - var list = "

"; - list += "

"; - list += ""; - list += "

"; + var list = "

"; + list += "

"; + list += ""; + list += "

"; // list += ""; - list += "未上传"; - list += ""+durationTime+""; - list += "

"; - $("#imgVideoBtn",window.opener.document).before(list);//子窗口给父窗口元素赋值 + list += "未上传"; + list += "" + durationTime + ""; + list += "

"; + $("#imgVideoBtn", window.opener.document).before(list);//子窗口给父窗口元素赋值 updateParentImgVideoNum(); } -//计时器 -function intervalTime(startTime,endTime){ - var date3 = endTime.getTime() - startTime.getTime(); //时间差的毫秒数 - //计算出相差天数 - var days = Math.floor(date3 / (24 * 3600 * 1000)); - //计算出小时数 - - var leave1 = date3 % (24 * 3600 * 1000); //计算天数后剩余的毫秒数 - var hours = Math.floor(leave1 / (3600 * 1000)); - //计算相差分钟数 - var leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数 - var minutes = Math.floor(leave2 / (60 * 1000)); - - //计算相差秒数 - var leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数 - var seconds = Math.round(leave3 / 1000); - - minutes = minutes > 9 ? minutes : "0"+minutes; - seconds = seconds > 9 ? seconds : "0"+seconds; +//计时器 +function intervalTime(startTime, endTime) { + var date3 = endTime.getTime() - startTime.getTime(); //时间差的毫秒数 + //计算出相差天数 + var days = Math.floor(date3 / (24 * 3600 * 1000)); + //计算出小时数 + + var leave1 = date3 % (24 * 3600 * 1000); //计算天数后剩余的毫秒数 + var hours = Math.floor(leave1 / (3600 * 1000)); + //计算相差分钟数 + var leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数 + var minutes = Math.floor(leave2 / (60 * 1000)); + + //计算相差秒数 + var leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数 + var seconds = Math.round(leave3 / 1000); + + minutes = minutes > 9 ? minutes : "0" + minutes; + seconds = seconds > 9 ? seconds : "0" + seconds; //var duration = days+":"+hours+":"+minutes+":"+seconds; - var duration = minutes+":"+seconds; - return duration; -} + var duration = minutes + ":" + seconds; + return duration; +} - function openCamera(){ - var video = document.getElementById('video'); - var videoWidth = 1024; - var videoHeight = 650; - - video.controls = false; - video.muted = true; - video.width = videoWidth; - video.height = videoHeight; - MediaUtils.getUserMedia(true, true, function (err, stream) { - if (err) { - throw err; +function openCamera() { + var video = document.getElementById('video'); + var videoWidth = 1024; + var videoHeight = 650; + + video.controls = false; + video.muted = true; + video.width = videoWidth; + video.height = videoHeight; + MediaUtils.getUserMedia(true, true, function (err, stream) { + if (err) { + throw err; } else { var options = { - audioBitsPerSecond : 128000,// 音频码率 - videoBitsPerSecond : 921600 // 视频码率 - }; - // 通过 MediaRecorder 记录获取到的媒体流 - mediaRecorder = new MediaRecorder(stream,options); - var chunks = [], startTime = 0; - video.srcObject = stream; - video.play(); - mediaRecorder.ondataavailable = function(e) { - mediaRecorder.blobs.push(e.data); - chunks.push(e.data); - }; - mediaRecorder.blobs = []; - mediaRecorder.onstop = function (e) { - recorderFile = new Blob(chunks, { 'type' : mediaRecorder.mimeType }); + audioBitsPerSecond: 128000,// 音频码率 + videoBitsPerSecond: 921600 // 视频码率 + }; + // 通过 MediaRecorder 记录获取到的媒体流 + mediaRecorder = new MediaRecorder(stream, options); + var chunks = [], startTime = 0; + video.srcObject = stream; + video.play(); + mediaRecorder.ondataavailable = function (e) { + mediaRecorder.blobs.push(e.data); + chunks.push(e.data); + }; + mediaRecorder.blobs = []; + mediaRecorder.onstop = function (e) { + recorderFile = new Blob(chunks, { 'type': mediaRecorder.mimeType }); //window.opener.recordVideoFile = recorderFile; window.opener.blobs.push(recorderFile); - videoListShow(base64DataBig2,durationTime,window.opener.blobs.length-1); - chunks = []; - }; - } - }); + videoListShow(base64DataBig2, durationTime, window.opener.blobs.length - 1); + chunks = []; + }; + } + }); } -var MediaUtils = { - /** - * 获取用户媒体设备(处理兼容的问题) - * @param videoEnable {boolean} - 是否启用摄像头 - * @param audioEnable {boolean} - 是否启用麦克风 - * @param callback {Function} - 处理回调 - */ - getUserMedia: function (videoEnable, audioEnable, callback) { - navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia - || navigator.msGetUserMedia || window.getUserMedia; - var constraints = {video: videoEnable, audio: audioEnable}; - if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { - navigator.mediaDevices.getUserMedia(constraints).then(function (stream) { - callback(false, stream); - })['catch'](function(err) { - callback(err); - }); - } else if (navigator.getUserMedia) { - navigator.getUserMedia(constraints, function (stream) { - callback(false, stream); - }, function (err) { - callback(err); - }); - } else { - callback(new Error('Not support userMedia')); - } -}, - - /** - * 关闭媒体流 - * @param stream {MediaStream} - 需要关闭的流 - */ - closeStream: function (stream) { - if (typeof stream.stop === 'function') { - stream.stop(); - } - } -}; +var MediaUtils = { + /** + * 获取用户媒体设备(处理兼容的问题) + * @param videoEnable {boolean} - 是否启用摄像头 + * @param audioEnable {boolean} - 是否启用麦克风 + * @param callback {Function} - 处理回调 + */ + getUserMedia: function (videoEnable, audioEnable, callback) { + navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia + || navigator.msGetUserMedia || window.getUserMedia; + var constraints = { video: videoEnable, audio: audioEnable }; + if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { + navigator.mediaDevices.getUserMedia(constraints).then(function (stream) { + callback(false, stream); + })['catch'](function (err) { + callback(err); + }); + } else if (navigator.getUserMedia) { + navigator.getUserMedia(constraints, function (stream) { + callback(false, stream); + }, function (err) { + callback(err); + }); + } else { + callback(new Error('Not support userMedia')); + } + }, + /** + * 关闭媒体流 + * @param stream {MediaStream} - 需要关闭的流 + */ + closeStream: function (stream) { + if (typeof stream.stop === 'function') { + stream.stop(); + } + } +}; + // 这段代主要是获取摄像头的视频流并显示在Video 签中 -$(function() { +$(function () { var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); - + /* 预览大图图片 */ var canvasBig = document.getElementById("canvasBig"); var contextBig = canvasBig.getContext("2d"); - + var video = document.getElementById("video"); var videoObj = { - "video" : true + "video": true } - var errBack = function(error) { + var errBack = function (error) { //console.log("Video capture error: ", error.code); }; - if (navigator.mediaDevices.getUserMedia) { - navigator.mediaDevices.getUserMedia(videoObj).then(function(stream) { + if (navigator.mediaDevices.getUserMedia) { + navigator.mediaDevices.getUserMedia(videoObj).then(function (stream) { video.srcObject = stream; video.play(); mediaRecorder = new MediaStreamRecorder(stream); - + }).catch(errBack); - } else { - + } else { + } - $("#takePhotos").prop("checked",true);//默认选中拍照单选框 + $("#takePhotos").prop("checked", true);//默认选中拍照单选框 // 这个是拍照按钮的事件， - $("#cameraBtn").click(function() { - var lens = $(".spotlight_parent",window.opener.document).length;//子窗口给父窗口元素赋值 - $("#videImgNum",window.opener.document).html(lens); - if(lens >= 8){ + $("#cameraBtn").click(function () { + var lens = $(".spotlight_parent", window.opener.document).length;//子窗口给父窗口元素赋值 + $("#videImgNum", window.opener.document).html(lens); + if (lens >= 8) { layer.alert('最多只能有8个视频或图片！', { - skin: 'layui-layer-molv' //样式类名 - ,closeBtn: 0 + skin: 'layui-layer-molv' //样式类名 + , closeBtn: 0 }); return; } - - if($("#takePhotos").prop("checked")){//拍图片 + + if ($("#takePhotos").prop("checked")) {//拍图片 context.drawImage(video, 0, 0, imgWidth, imgHeight); contextBig.drawImage(video, 0, 0, 1024, 650); /* 显示在多图片页面 */ var base64Data = canvas.toDataURL('image/jpeg', 1.0); /* 预览大图 */ var base64DataBig = canvasBig.toDataURL('image/jpeg', 1.0); - canvasBig.toBlob(function (blobObj){ + canvasBig.toBlob(function (blobObj) { window.opener.blobs.push(blobObj); }); - var list = "

"; - list += "

"; - list += ""; - list += "

"; - list += "未上传"; + var list = "

"; + list += "

"; + list += ""; + list += "

"; + list += "未上传"; // list += ""; - list += "

"; - $("#imgVideoBtn",window.opener.document).before(list);//子窗口给父窗口元素赋值 + list += "

"; + $("#imgVideoBtn", window.opener.document).before(list);//子窗口给父窗口元素赋值 updateParentImgVideoNum(); - }else{//拍视频 - if($(this).hasClass('on')){ + } else {//拍视频 + if ($(this).hasClass('on')) { mediaRecorder.start();//开始录制 beginTime = new Date(); $(this).removeClass("on"); $(this).addClass("stop"); - + + $('#cameraTime').html('00:00'); + second = 0; + minute = 0; + + setTime('start'); + //超过5分钟就停止录制 var startDate = new Date(); //2. 获取当前分钟 var min = startDate.getMinutes(); //3. 设置当前时间+5分钟：把当前分钟数+5后的值重新设置为date对象的分钟数 - startDate.setMinutes(min+5); + startDate.setMinutes(min + 5); var addFiveMinutes = startDate.getTime(); - - times = setInterval(function(){ - var getCurTimes= getCurTime(); - if(getCurTimes >= addFiveMinutes){ + + times = setInterval(function () { + var getCurTimes = getCurTime(); + if (getCurTimes >= addFiveMinutes) { mediaRecorder.stop(); clearInterval(times); + + setTime('end'); + var endTime = new Date(); - var duration = intervalTime(beginTime,endTime); + var duration = intervalTime(beginTime, endTime); durationTime = duration; - + $("#cameraBtn").removeClass("stop"); $("#cameraBtn").addClass("on"); - layer.msg("录制成功,视频录制不能超过5分钟!", {icon: 7}); + layer.msg("录制成功,视频录制不能超过5分钟!", { icon: 7 }); context.drawImage(video, 0, 0, imgWidth, imgHeight); - contextBig.drawImage(video, 0, 0, 1024, 650); + contextBig.drawImage(video, 0, 0, 1024, 650); //预览大图 - base64DataBig2 = canvasBig.toDataURL('image/jpeg', 1.0); - } - },1000); - }else{ + base64DataBig2 = canvasBig.toDataURL('image/jpeg', 1.0); + } + }, 1000); + } else { $("#cameraBtn").addClass("on"); $("#cameraBtn").removeClass("stop"); mediaRecorder.stop(); - context.drawImage(video, 0, 0, imgWidth, imgHeight); + setTime('end'); + context.drawImage(video, 0, 0, imgWidth, imgHeight); contextBig.drawImage(video, 0, 0, 1024, 650); var endTime = new Date(); - var duration = intervalTime(beginTime,endTime); + var duration = intervalTime(beginTime, endTime); durationTime = duration; //预览大图 base64DataBig2 = canvasBig.toDataURL('image/jpeg', 1.0); - layer.msg("录制成功!", {icon: 1}); - } - } + layer.msg("录制成功!", { icon: 1 }); + } + } }); - + // 点击拍照单选框 - $("#takePhotos").click(function() { - if($(this).prop("checked")) {//显示拍照图片 - 　　　　$("#cameraBtn").removeClass("on"); + $("#takePhotos").click(function () { + if ($(this).prop("checked")) {//显示拍照图片 + $("#cameraBtn").removeClass("on"); $("#cameraBtn").removeClass("stop"); - 　　} + $('#cameraTime').css('display', 'none'); + $('#cameraTime').html('00:00'); + + second = 0; + minute = 0; + setTime('end'); + } }); - + // 点击拍视频单选框 - $("#takeVideo").click(function() { + $("#takeVideo").click(function () { $("#cameraBtn").addClass("on"); - $("#takePhotos").prop("checked",false); + $("#takePhotos").prop("checked", false); + $('#cameraTime').css('display', 'block'); openCamera(); - }); + }); }); Index: ssts-web/src/main/webapp/disinfectsystem/test/videoAndImg.jsp =================================================================== diff -u -r27185 -r27463 --- ssts-web/src/main/webapp/disinfectsystem/test/videoAndImg.jsp (.../videoAndImg.jsp) (revision 27185) +++ ssts-web/src/main/webapp/disinfectsystem/test/videoAndImg.jsp (.../videoAndImg.jsp) (revision 27463) @@ -8,9 +8,10 @@ - + - + +