使用webcam和video插件/华为云播放插件，实现视频播放及拍照上传功能

引用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("该课程尚无章节视频可供学习，请等待上传");
            }
        }