前端实现: 抓拍和定时弹出任务
1.代码示例
<html> <head> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/jquery-json/2.6.0/jquery.json.min.js"></script> </head> <body> <!-- <a href="javascript:;" onClick="playorpause()">播放视频</a> --> <div class="video" style="width: 100%;height: 100%;"></div> <div id="problems" style="display: none;"> </div> <div id="problems2" style="display: none"> <div class="content"> <div class="hide_box"></div> <div id="heihei" class="shang_box" style="display: none;"> <div class="shang_tit"> <p>采集信息</p> </div> <div class="problem_order"> <div class="problem_answer"> <br/> <video id="v" style="width: 192px;height: 144px;"></video> <img src="" id="photo" alt="photo" style="width: 192px;height: 144px; float: right;"> <canvas id="canvas" style="display:none;"></canvas> <br/> </div> </div> <div class="order_info" style="display: none;"><p id="order_info_p"></p></div> <div class="shang_payselect"> <button class="btn-common" id="take">拍照</button> </div> </div> </div> </div> <script> var all_player = '' var default_avatar = 'data:image/jpg;base64,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' var face_url = 'https://mooc.ndmooc.com/tmp/files/image/photo/3/3.jpg' var problem_view_ats_list2 = '[0]' // console.log('---------',problem_view_ats_list2) problem_view_ats_list2 = JSON.parse(problem_view_ats_list2) // var problem_view_ats_list2 = [5, '5',600, '600','1200','2400','4800'] console.log('---------',face_url) $('#photo').attr('src', face_url) function bbb(t) { var player_time = player.V.currentTime.toFixed(0); settimeFn2(player_time) } function settimeFn2(player_time) { //console.log('----------settimeFn2----------') var showTime = 2; var time = showTime; $(document).on('click', function() { time = showTime; }); var interCount = setInterval(function() { time--; if(time == 0) { clearInterval(interCount); var index2 = $.inArray(parseInt(player_time), problem_view_ats_list2); var index3 = $.inArray(player_time.toString(), problem_view_ats_list2); console.log(player_time,problem_view_ats_list2) if(index2 >= 0 || index3 > 0){ console.log('---index2!!!!---,') ShowMessage2(); } } }, 1000); function ShowMessage2() { console.log('---ShowMessage2---') console.log($('#heihei').css('display')) $('#heihei').attr("style",'display: block;') $('#problems2').attr("style",'display: block;') console.log($('#heihei').attr("style")) $('#heihei').css('display','block'); $('#problems2').css('display','block'); player.videoPause(); }; } </script> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <script> // 拍照－－－－－－－－－ !(function () { var avatar_video = null console.log("1111111111111111111") if (navigator.mediaDevices === undefined) { navigator.mediaDevices = {}; } if (navigator.mediaDevices.getUserMedia === undefined) { navigator.mediaDevices.getUserMedia = function (constraints) { var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia; if (!getUserMedia) { return Promise.reject(new Error('getUserMedia is not implemented in this browser')); } return new Promise(function (resolve, reject) { getUserMedia.call(navigator, constraints, resolve, reject); }); } } navigator.mediaDevices.getUserMedia({audio: true, video: true}) .then(function (stream) { var video = document.querySelector('#v'); if ("srcObject" in video) { video.srcObject = stream; } else { video.src = window.URL.createObjectURL(stream); } video.onloadedmetadata = function (e) { avatar_video = true video.play(); }; }) .catch(function (err) { console.log("ERROR"); $('#order_info_p').html('加载摄像头失败'); $('.order_info').css('display', 'block'); console.log(err.name + ": " + err.message); }); if (avatar_video) { document.getElementById('take').addEventListener('click', function () { paizhao(video) }, false); } else { console.log("不支持"); } })(); </script> <script> var face_url = 'https://mooc.ndmooc.com/tmp/files/image/photo/3/3.jpg' console.log('-------face_url-----', face_url) function paizhao(video){ let canvas = document.getElementById('canvas'); canvas.width = video.videoWidth; canvas.height = video.videoHeight; canvas.getContext('2d').drawImage(video, 0, 0); let data = canvas.toDataURL("image/jpeg", 0.8); console.log("---data---", data) document.getElementById('photo').setAttribute('src', data); var avatar_url = 'https://yykrlc.oss-cn-beijing.aliyuncs.com/2.jpg' var face_url = 'https://mooc.ndmooc.com/tmp/files/image/photo/3/3.jpg' var avatar_url = face_url imagesAjaxFace(data,avatar_url) } </script> <script> function imagesAjaxFace(img_base64,avatar_url) { var data = {}; data.img_base64 = img_base64; //data.avatar_img_base64 = img_base64; data.avatar_url = avatar_url; var face_url = 'https://mooc.ndmooc.com/tmp/files/image/photo/3/3.jpg' console.log('---imagesAjaxFace---') $.ajax({ //url: "http://192.168.1.82:5000/api/v1/dlib/face", //url: "https://11.22.com/api/v1/bdaip/face", //url: "http://127.0.0.1:5000/api/v1/bdaip/face", //url: '/api/v1/common/baidu/face', url: '/api/v1/common/baidu/face', data: data, type: "POST", dataType: 'json', success: function (re) { console.log(re) if(re.aip_face>= 80){ $('#heihei').attr("style",'display:none'); $('#problems2').attr("style",'display:none'); player.videoPlay() }else{ $('#order_info_p').html('匹配失败'); $('.order_info').attr("style",'display:block'); //setTimeout(function(){ $("#take").click() }, 9000); } } }); }; </script> <input type="hidden" value="[]" id="pro"> <script type="text/javascript"> var idLoadHandler=false; var is_live = 'false'; var course_id = '12'; var module_id = '16'; var item_id = '14'; var problem_view_ats_str = ''; var problem_view_ats_list = problem_view_ats_str.split(","); // var problem_view_ats_list2 = ['5','600','1200','2400','4800'] // var problem_view_ats_list2 = [] var problem_json = JSON.parse($("#pro").val()); // var problem_json = [{ A: "指令寄存器",B: "地址寄存器",C: "指令译码器",D: "地址译码器",id: 16,position: 0,problem_type: "Single",title: "CPU组成中不包括文库 。", // view_at: "4"}, // { A: "运算器", B: "控制器", C: "存储器",D: "I/O接口",id: 17, position: 0, problem_type: "Single",title: "CPU组成中不包括文库 。",view_at: "16"}] if(is_live == 'true'){ is_live = true }else{ is_live = false } var videoObject = { container: '.video',//“#”代表容器的ID，“.”或“”代表容器的class variable: 'player',//该属性必需设置，值等于下面的new chplayer()的对象 loaded: 'loadedHandler',//监听播放器加载成功 autoplay: true, live: is_live, video: 'https://moocfiles.ndmooc.com/course/12/videos/2020/06/16/159229134264.mp4'//视频地址 }; var player=new ckplayer(videoObject); var totaltime = player.V.duration; function loadedHandler(){//播放器加载后会调用该函数 idLoadHandler=true; player.addListener('time', aaa); //监听播放时间,addListener是监听函数，需要传递二个参数，'time'是监听属性，这里是监听时间，timeHandler是监听接受的函数 player.addListener('time', bbb); //监听播放时间,addListener是监听函数，需要传递二个参数，'time'是监听属性，这里是监听时间，timeHandler是监听接受的函数 }; var num_1 = 0; var times_status = true; function aaa(t) { //console.log('----------aaaa---------------'); var player_time = player.V.currentTime.toFixed(0); // console.log(player.V.currentTime.toFixed(0)); num_1 += 1; if (num_1 % 30 == 0) { timeHandler(t) } /*判断是视频下是否存在问题*/ if (problem_json.length > 0) { settimeFn(player_time) } // if (1) { // console.log('-----settimeFn2----') // settimeFn2(player_time) // } } function timeHandler(t){ if(!totaltime){totaltime = player.V.duration;} // console.log('当前播放的时间：'+ t); if(course_id){ sync_learn(course_id, module_id, item_id, t) } } function sync_learn(course_id, module_id, item_id, time_now){ $.ajax({ url: '/api/v1/personals/courses/'+ course_id +'/modules/'+ module_id +'/items/' + item_id + '/record', type:'get', dataType:'text', data:{ starting_time: time_now, }, success:function(data){ // console.log(data); times_status = false; } }) } function loadHandler(){ idLoadHandler=true; } function playorpause(){ if(idLoadHandler){ player.playOrPause(); } else{ alert('播放器还未加载，不能进行控制'); } } function settimeFn(player_time) { // var problem_arr_index = Math.floor((Math.random()*problem_total)); var showTime = 2; var time = showTime; $(document).on('click', function() { time = showTime; }); var interCount = setInterval(function() { time--; if(time == 0) { clearInterval(interCount); var index = $.inArray(player_time, problem_view_ats_list); if(index >= 0){ ShowMessage(problem_json[index]["id"]); } } }, 1000); function ShowMessage(problem_id) { player.videoPause(); show_problem(problem_id) }; function show_problem(problem_id){ $.ajax({ url: "/api/v1/videos/problem/" + problem_id, type: "get", dataType:'json', success: function(result) { console.log('---------------'); console.log(result); var htmladd=""; var input_type = "checkbox" var problem_type = result["paper_problem"]["problem_type"] if(problem_type == "Single"){ input_type = "radio" } htmladd +='<div class="content">'; htmladd +='<div class="hide_box" style="display: none;"></div>'; htmladd +='<div class="shang_box" style="display: none;">'; htmladd +='<div class="shang_tit">'; htmladd +='<p>'+ result["paper_problem"]["title"] + '</p>'; htmladd +='</div>'; htmladd +='<div class="problem_order">'; htmladd +='<div class="problem_answer">'; htmladd += '<p><input type='+input_type+' name="problem_answer" value="A"/> A: '+ result["paper_problem"]["problem_a"] + '</p>'; htmladd += '<p><input type='+input_type+' name="problem_answer" value="B"/> B: '+ result["paper_problem"]["problem_b"] + '</p>'; htmladd += '<p><input type='+input_type+' name="problem_answer" value="C"/> C: '+ result["paper_problem"]["problem_c"] + '</p>'; htmladd += '<p><input type='+input_type+' name="problem_answer" value="D"/> D: '+ result["paper_problem"]["problem_d"] + '</p>'; htmladd +='</div>'; htmladd +='</div>'; htmladd +='<div class="order_info" style="display: none;"><p>错误：您选择的答案有误,请重新选择！</p></div>'; htmladd +='<div class="shang_payselect">'; htmladd +='<button class="btn-common">提交</button>'; htmladd +='</div></div></div>'; $("#problems").append(htmladd); $(".hide_box").fadeToggle(); $(".shang_box").fadeToggle(); $(".btn-common").click(function () { var obj = document.getElementsByName("problem_answer"); var check_val = []; for (var i = 0; i < obj.length; i++) { if (obj[i].checked) { check_val.push(obj[i].value); } } problem_answer_list = result["paper_problem"]["problem_answer"].split(","); if (isContained(check_val, problem_answer_list)){ $('.hide_box').css('display','block'); $('#problems').css('display','block'); player.playOrPause(); $(".content").load(location.href+" .div") }else { $('.order_info').css('display','block'); }; }); $("#problems").show(); }, error: function(e){ console.log(e.status); console.log(e.responseText); } }); } } function settimeFn3(player_time) { var showTime = 2; var time = showTime; $(document).on('click', function() { time = showTime; }); var interCount = setInterval(function() { time--; if(time == 0) { clearInterval(interCount); var index2 = $.inArray(player_time, problem_view_ats_list2); if(index2 >= 0){ ShowMessage3(); } } }, 1000); function ShowMessage3() { player.videoPause(); $('#heihei').css('display','block'); $('#problems2').css('display','block'); }; } function isContained (a, b){ if(!(a instanceof Array) || !(b instanceof Array)) return false; if(a.length != b.length) return false; for(var i = 0, len = b.length; i < len; i++){ if(a.indexOf(b[i]) == -1 && b.indexOf(a[i]) == -1) { return false; } } return true; } </script> </body> </html>
