调用摄像头方法

<form action="" method="">
        <br>
        <video id="video" width="300" height="230" autoplay="" style=" border: 5px solid #00fffc;"></video>
        <div id="fade-box">
            <font style="vertical-align: inherit;"><font style="vertical-align: inherit;"><input type="button" onclick="query()" value="立即登录" class="submit_btn"></font><a style="margin-left: 240px; font-size: 16px; color: #00a4a2" href="/Carpark/charge/path/chargeLogin"><font style="vertical-align: inherit;">账号登录</font></a></font>
            <a style="margin-left: 240px; font-size: 16px; color: #00a4a2" href="/Carpark/charge/path/chargeLogin"><font style="vertical-align: inherit;"></font></a>
            <canvas id="canvas" width="400" height="300" hidden=""></canvas>
        </div>
    </form>


<script type="text/javascript">
    //var 是定义变量
    var video = document.getElementById("video"); //获取video标签
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");

    function success(stream) {
        //兼容webkit核心浏览器
        var CompatibleURL = window.URL || window.webkitURL;
        //将视频流设置为video元素的源
        console.log(stream);
        video.srcObject = stream;
        video.play();
    }

    function error(error) {
        console.log('访问用户媒体设备失败, ');
    }

    //调用用户媒体设备, 访问摄像头
    getUserMedia({video: {width: 1980, height: 1024}}, success, error);

    //访问用户媒体设备的兼容方法
    function getUserMedia(constraints, success, error) {
        if (navigator.mediaDevices.getUserMedia) {
            //最新的标准API
            navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
        } else if (navigator.webkitGetUserMedia) {
            //webkit核心浏览器
            navigator.webkitGetUserMedia(constraints, success, error)
        } else if (navigator.mozGetUserMedia) {
            //firfox浏览器
            navigator.mozGetUserMedia(constraints, success, error);
        } else if (navigator.getUserMedia) {
            //旧版API
            navigator.getUserMedia(constraints, success, error);
        } else {
            alert('不支持访问用户媒体');
        }
    }

    function query() {
        layui.use('layer', function () {
            var layer = layui.layer;
            //把流媒体数据画到convas画布上去
            context.drawImage(video, 0, 0, 400, 300);
            var chargeFace = getBase64();
            $.ajax({
                type: "post",
                url: "/Carpark/chargeFace/chargeFaceLogin",
                data: {"chargeFace": chargeFace},
                success: function (data) {

                    if (data === "验证成功") {
                        //登入成功的提示与跳转
                        layer.msg('登入成功', {
                            offset: '15px'
                            , icon: 1
                            , time: 300
                        }, function () {
                            location.href = '/Carpark/charge/path/chargeLnterface'; //后台主页
                        });
                    } else {
                        layer.msg(data);
                    }
                }
            });
        });
    }

    function getBase64() {
        var imgSrc = document.getElementById("canvas").toDataURL(
            "image/png");
        return imgSrc.split("base64,")[1];
    }
</script>