引用webcam和video插件的js/华为云播放插件的js
<script src="webcam/jquery.webcam.min.js"></script> <script src="../kspxpage/jixujiaoyu/videoplayer/res/video.min.js"></script> <script src="https://media-cache.huaweicloud.com/video/hwplayer/1.0.0/dist/hwplayer.js"></script> <script src="https://media-cache.huaweicloud.com/video/hwplayer/1.0.0/lib/flv-1.4.2.min.js"></script> <script src="https://media-cache.huaweicloud.com/video/hwplayer/1.0.0/dist/hwplayer.js?flvjs=true"></script>
页面添加相关元素
<div id="webcam"></div> <img id="img" src="" width="239px" height="200px" style="margin-top: 200px;"> <canvas id="canvas" style="border: 1px solid red"></canvas>
摄像头定时拍照及上传
<script type="text/javascript">
//获取地址参数
function getUrlParam(name) {
var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
var r = window.location.search.substr(1).match(reg);
if (r != null)
return decodeURIComponent(r[2]);
return null;
}
var canvas = document.getElementById("canvas");//注意不要直接使用css设置画布的宽高
canvas.setAttribute('width', 320);//通过代码设置宽高属性，避免图片无法自适应画布的问题
canvas.setAttribute('height', 240);
var image = new Array();
var ctx = null;
var pos = 0;
var w = 320;//图片的宽高，无论图片的尺寸是否大于画布的尺寸都能自适应
var h = 240;
//可理解为 返回一个用于在画布上绘图的环境，并获得画布的绘图方法对象
var ctx = canvas.getContext("2d");
image = ctx.getImageData(0, 0, w, h);//复制画布上指定矩形的像素数据,width,height,data,这样不需要自己手动设置
var img = image;//设置img的属性和值，拍照时重新给data赋值
$("#webcam")
.webcam(
{
width : 239,
height : 200,
mode : "callback",
swffile : "webcam/jscam_canvas_only.swf",
onTick : function(remain) {
},//定时触发
onSave : function(data) {
//图片处理
var col = data.split(";");
//x轴上的每一个像素的rgba
for (var i = 0; i < w; i++) {
var tmp = parseInt(col[i]);
img.data[pos + 0] = (tmp >> 16) & 0xff;//red
img.data[pos + 1] = (tmp >> 8) & 0xff;//green
img.data[pos + 2] = tmp & 0xff;//blue
img.data[pos + 3] = 0xff;//Alpha
pos += 4;
}
if (pos >= 4 * w * h) {
ctx.putImageData(img, 0, 0);//将图像显示到画布
var aaa = canvas.toDataURL("image/png");
var strLength = canvas.toDataURL()
.substring(22).length;
var fileLength = parseInt(strLength
- (strLength / 8) * 2);
var size = (fileLength / 1024).toFixed(2);
if (parseInt(size) >= 30) {
//上传图片到服务器。
$
.ajax({
url : "coursestudyaction.action?cmd=uploadPic",
data : {
"val" : "data",
"width" : w,
"height" : h,
"image" : canvas
.toDataURL("image/png"),
"chooseGuid" : getUrlParam("chooseGuid")
},
type : 'post',
dataType : 'json',
success : function() {
},
error : function(data) {
console
.log('摄像头照片上传出错');
}
});
}
image = new Array();
pos = 0;
}
},
onCapture : function() {
//拍照，处理图片
webcam.save();
},
debug : function(type, str) {
if (type == "error"
&& (str
.indexOf("No camera was detected") != -1 || str
.indexOf("Flash movie not yet registered") != -1)) {
epoint
.alertAndClose("未检测到摄像头，请先安装好摄像头再进行学习！");
}
},
onLoad : function() {
var cams = webcam.getCameraList();//获取本机摄像头设备
for ( var i in cams) {
jQuery("#cams").append(
"<li>" + cams[i] + "</li>");
}
}
});
var myVar;
myFunction();
function myFunction() {
myVar = setInterval(getPhoto, 600000); // 每隔10分钟执行一次，即10分钟拍照一次并上传
}
function getPhoto() {
window.webcam.capture();
}
var cindex = 0;
function GetWebCam() {
//webcam.capture(1);
var getwc = setInterval(
function() {
getPhoto();
var strLength = canvas.toDataURL().substring(22).length;
var fileLength = parseInt(strLength - (strLength / 8)
* 2);
// 由字节转换为KB
var size = (fileLength / 1024).toFixed(2);
if (parseInt(size) < 30) {
cindex++;
if (cindex < 5) {
epoint.alert('摄像头未开启，请开启摄像头继续学习，否则可能造成本次学习无效');
} else {
epoint
.alertAndClose("未检测到您的摄像头，无法继续进行学习，请检查摄像头是否能够正常运行后重新学习！");
}
} else {
//alert('摄像头已开启');
clearInterval(getwc);
}
}, 30 * 1000);
}
</script>
后台拍照上传的代码，插入到指定路径（Java）
/** * 摄像头拍照上传功能 * @throws IOException **/ public void uploadPic() throws IOException { String image = request.getParameter("image"); String chooseGuid = request.getParameter("chooseGuid"); //TODO 在线考试图片上传，考试实例guid String examPaperInstanceguid = getRequestParameter("examPaperInstanceguid"); FrameAttachInfo attachinfo = new FrameAttachInfo(); FrameAttachStorage attachStorage = new FrameAttachStorage(); if (StringUtil.isBlank(examPaperInstanceguid)) { courseChoose = courseChooseService.find(chooseGuid); if (courseChoose == null) { courseChoose = new PxCoursechoose(); return; } pxcourse = courseService.find(courseChoose.getCourseguid()); } ExamPaperInstance examPaperInstance = examPaperInstanceService.find(examPaperInstanceguid); String imgName = ""; if (examPaperInstance != null) { imgName = userSession.getDisplayName() + "_" + examPaperInstance.getExampapername() + "_" + EpointDateUtil.convertDate2String(new Date(), "yyyyMMddHHmmss") + ".jpg"; } else { imgName = userSession.getDisplayName() + "_" + pxcourse.getCoursename() + "_" + EpointDateUtil.convertDate2String(new Date(), "yyyyMMddHHmmss") + ".jpg"; } String attachguid = UUID.randomUUID().toString(); String imgPath = ClassPathUtil.getDeployWarPath() + "BigFileUpLoadStorage/temp/" + EpointDateUtil.convertDate2String(new Date(), "yyyy-MM-dd") + "/" + attachguid + "/"; File tmp_path = new File(imgPath); tmp_path.mkdirs(); File file = new File(imgPath + File.separator + imgName); if (image != null && !"".equals(image)) {//防止没有拍照直接保存产生的空指针的错误 OutputStream out = null; try { byte[] bytes = null; String imageStr = null; //Base64解码并生成图片 //替换头 imageStr = image.replace("data:image/png;base64,", "").trim(); bytes = Base64.decodeBase64(imageStr); for (int i = 0; i < bytes.length; ++i) { if (bytes[i] < 0) {// 调整异常数据 bytes[i] += 256; } } if (!file.exists()) { file.createNewFile(); } else { file.delete(); file.createNewFile(); } // 生成jpeg图片 out = new FileOutputStream(file.getAbsoluteFile()); out.write(bytes); attachStorage.setAttachGuid(UUID.randomUUID().toString()); attachStorage.setAttachFileName(imgName); InputStream sbs = new ByteArrayInputStream(bytes); attachStorage.setContent(sbs); attachStorage.setDocumentType(".jpg"); attachStorage.setCliengGuid(courseChoose.getRowguid()); attachStorage.setContentType("image/png"); attachStorage.setCliengTag("kcstudy"); if (examPaperInstance != null) { attachStorage.setCliengGuid(examPaperInstanceguid); attachStorage.setCliengTag("onlineexam"); } /*attachinfo.setStorageType("NativeShareDirectory"); attachinfo.setFilePath(imgPath);*/ attachinfo.setAttachGuid(attachStorage.getAttachGuid()); attachinfo.setAttachFileName(attachStorage.getAttachFileName()); attachinfo.setContentType(".jpg"); attachinfo.setAttachLength((long) 894); attachinfo.setUploadUserGuid(userSession.getUserGuid()); attachinfo.setUploadUserDisplayName(userSession.getDisplayName()); attachinfo.setUploadDateTime(new Date()); attachinfo.setAttachStorageGuid(attachStorage.getAttachGuid()); attachinfo.setCliengGuid(attachStorage.getCliengGuid()); attachinfo.setCliengTag(attachStorage.getCliengTag()); attachService.addAttach(attachinfo, attachStorage.getContent()); } catch (Exception e) { e.printStackTrace(); } finally { if (null != out) { out.flush(); out.close(); } } } else { System.out.println("图像为空"); } }
在页面添加video标签
<video id="videoPlayer" class="video-js vjs-default-skin vjs-big-play-centered" controls oncontextmenu="return false;"> </video>
加载video插件
function loadPlayer() { videoPlayer = videojs("videoPlayer", { controls : true, preload : false, "data-setup" : { autoplay : true }, width : $("#materialDiv").width(), height : $("#materialDiv").height() }); videoPlayer.on("loadeddata", function() {//渲染播放画面 videoPlayer.currentTime(playingMaterial.newlength / 1000); }); videoPlayer.on("ended", function() { isend = "1"; endVideo(); }); //滚动条变化事件 videoPlayer.on("timeupdate", function() {//播放时间改变 var currentTime = videoPlayer.currentTime() * 1000; if (currentTime > playingMaterial.maxlength && currentTime > (playingMaterial.newlength + 1000)) {//手动快进说明 videoPlayer.currentTime(playingMaterial.newlength / 1000);//给我退回去 return; } if (playingMaterial.limitlength > 0 && playingMaterial.limitlength <= currentTime) { videoPlayer.pause(); } playingMaterial.newlength = currentTime; //更新最大已读时间点 if (currentTime > playingMaterial.maxlength) { playingMaterial.maxlength = currentTime; } }); }
加载华为云播放插件（基于video，事件基本一致，华为进行了重封装）
hwplayerloaded(function() { var options = { //是否显示控制栏，包括进度条，播放暂停按钮，音量调节等组件 controls : true, width : 640, height : 360, //是否开启播放质量数据上报功能 stat : false, //userId: 'playerDemo01', //domainId: 'hwPlayer', playbackRates:[] //倍速播放设置 }; player = new HWPlayer('videoPlayer', options, function() { // 使用事件监听 player.on('ended', function() { //播放结束了 var time = totaltime; //发起请求，保存时间 isend = "1"; endVideo(); }); player.on('pause', function() { //点击暂停，清除计时 if (t1) { window.clearTimeout(t1); updatePlayRecord(); } }); player.on('play', function() { //每3分钟检查是否挂机 var time = mini.get('checkTime').getValue(); t1 = window.setInterval(check, time); }); player.on('durationchange', function(e) { //点击暂停，清除计时 totaltime = e; }); //滚动条变化事件 player.on("timeupdate", function() {//播放时间改变 var currentTime = player.currentTime() * 1000; if (currentTime > playingMaterial.maxlength && currentTime > (playingMaterial.newlength + 1000)) {//手动快进说明 player.currentTime(playingMaterial.newlength / 1000);//给我退回去 return; } }); // "this"指向的是HWPlayer的实例对象player //不自动播放 //player.play(); }); });
绑定视频地址（两个插件绑定视频的方法可通用）
/**绑定视频**/ function renderVideo(data) { if (data) { playingMaterial = data; var videoSrc; epoint .execute( 'examattachaction.getUrl', '', [ playingMaterial.attachguid, playingMaterial.coursewareguid ], function(data) { if (data.url) { if (data.type == '1') { videoSrc = data.url; } else { videoSrc = "http://dn4.gxzjt.gov.cn:8084" + data.url; } videoPlayer.src(videoSrc); videoPlayer.load(videoSrc); } else { videoSrc = "examattachaction.action?cmd=getMp4Content&attachGuid=" + playingMaterial.attachguid;//playingMaterial.materialguid; videoPlayer.src({ type : "video/mp4", src : videoSrc, }); } videoPlayer .currentTime(playingMaterial.newlength / 1000); }) } else { epoint.alert("该课程尚无章节视频可供学习，请等待上传"); } }