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 += "![]("+base64DataBig2+")
";
- list += "";
- list += "
";
+ var 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 += "![]("+base64DataBig+")
";
- list += "";
- list += "
";
- list += "
未上传";
+ var 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();
- });
+ });
});
![](" + base64DataBig2 + ")
";
+ list += "";
+ list += "