前端实现: 抓拍和定时弹出任务

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=" 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=" 192px;height: 144px;"></video>
          <img src="" id="photo" alt="photo" style=" 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>
原文地址:https://www.cnblogs.com/rixian/p/13754737.html