js调用摄像头

背景：考试系统，原先以为是调用摄像头拍照，最后发现微信上无法调用摄像头。用户是通过微信进入页面的。只能改为调用手机拍照功能了。但是摄像头调用记录一下

开启摄像头方法：

function getMedia() {
        try {
            let constraints = {
                video: {width: 1366, height: 868},
                //关闭语音
                audio: false
            };
            //获得video摄像头区域
            let video = document.getElementById("video");
            // 避免数据没有获取到
            let promise = navigator.mediaDevices.getUserMedia(constraints);
            promise.then(function (MediaStream) {
                video.srcObject = MediaStream;
                video.play();
            });
        } catch(err){
            return false;
        }
    }

页面加载完成以后调用即可。

页面代码：

<canvas id="canvas2" style="display: none" width="500" height="500"></canvas>
    <canvas id="canvas" style="display: none" width="975px" height="620px"></canvas>

    <div class="face-recognition"  v-show="step == 3">
        <div style="position: absolute;top: -82px;width: 100%;">
            <span class="name" style="
                position: unset;
            ">姓名：{{companyUser.username}}</span>
            <span style="
                position: unset;
                margin-left: 30px;
            ">身份证号：{{companyUser.idcard}}</span>
        </div>
        <div class="vdeo-box" style="position: relative;">
            <div style="position: absolute; top: 0px; left: 0px;z-index: 888"><video id="video" onerror="error()" style="width:8rem" autoplay="autoplay"></video></div>
            <div class="horn-topleft"></div>
            <div class="horn-topright"></div>
            <div class="horn-bottomleft"></div>
            <div class="horn-bottomright"></div>
            <div class="face-bigr"></div>
            <div class="face-bbigr"></div>
        </div>

        <span>请在区域中进行识别…</span>
        <br/><button @click="photo()" :style="isSave ? 'background-color: #9e9e9e;' : ''">拍照</button>
    </div>

点击拍照按钮后：

    photo() {
        var _photo = takePhoto();
    }
    function takePhoto() {
        //获得Canvas对象
        let video = document.getElementById("video");
        let canvas = document.getElementById("canvas");
        let canvas2 = document.getElementById("canvas2");
        let ctx = canvas.getContext('2d');
        let ctx2 = canvas2.getContext('2d');
        ctx.drawImage(video, 0, 0, 975, 650);
        ctx2.putImageData(ctx.getImageData(288, 100, 400, 550), 0, 0, 0, 0, 400, 550);
        return canvas2.toDataURL("image/png");
    }

获取base64形式的图片数据