zoukankan      html  css  js  c++  java
  • 前端实现: 抓拍和定时弹出任务

    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>
  • 相关阅读:
    swift 一些公共的宏重新定义
    iOS中正则表达式的使用
    失败的尝试,使用继承扩展数组,以及ES6的必要性
    用travis-ci编译android版nodejs
    用es6写一个分数库
    快速平方根算法的javascript实现
    windows中vim以及cmder的使用
    nodejs的交叉(跨平台)编译(to android)
    用链表实现nodejs的内存对象管理
    给socks-proxy-agent增加认证
  • 原文地址:https://www.cnblogs.com/rixian/p/13754737.html
Copyright © 2011-2022 走看看