摄像，canvas，使用设备的摄像权限获取图片

/**
html结构
**/
<template id="photograph">
    <div style="height: 100%;width: 100%;background-color: #ffffff;padding: 10px">
        <el-button type="primary" size="mini" @@click="getMedia">开启摄像头</el-button>
        <el-button type="primary" size="mini" @@click="takePhoto">拍照</el-button>
        <el-button type="primary" size="mini" @@click="upload">上传</el-button>
        <el-row style="margin-top: 10px">
            <el-col :span="12">
                <video id="video" width="500px" height="500px" autoplay="autoplay"></video>
            </el-col>
            <el-col :span="12">
                <canvas id="canvas" width="500px" height="500px"></canvas>
            </el-col>
        </el-row>
    </div>
</template>
<script>
PhotographVue = new Vue({
        el: '#photograph',
        data() {
            return {
                fileData: {}
            }
        },
        methods: function () {
            return {
                getMedia() {
                    let video = document.getElementById("video")
                    let constraints = {
                        video: {width: 500, height: 500},
                        audio: false
                    };
                    /*
                    这里介绍新的方法:H5新媒体接口 navigator.mediaDevices.getUserMedia()
                    这个方法会提示用户是否允许媒体输入,(媒体输入主要包括相机,视频采集设备,屏幕共享服务,麦克风,A/D转换器等)
                    返回的是一个Promise对象。
                    如果用户同意使用权限,则会将 MediaStream对象作为resolve()的参数传给then()
                    如果用户拒绝使用权限,或者请求的媒体资源不可用,则会将 PermissionDeniedError作为reject()的参数传给catch()
                    */
                    navigator.mediaDevices.getUserMedia(constraints).then(function (MediaStream) {
                        video.srcObject = MediaStream;
                        video.play();
                    }).catch(function (PermissionDeniedError) {
                        console.log(PermissionDeniedError);
                    })
                },
                takePhoto() {
                    const video = document.getElementById("video")
                    //获得Canvas对象
                    const canvas = document.getElementById("canvas")
                    const ctx = canvas.getContext('2d')
                    ctx.drawImage(video, 0, 0, 500, 500)
                },
                /**
                 * 有些浏览器(如edge)不支持new File，所以为了兼容，base64要先转换成blob再设置type，name，lastModifiedDate
                 * 属性间接转换成文件，而不推荐直接new File()的方式
                 **/
                convertBase64UrlToImgFile(urlData, fileType) {
                    const bytes = window.atob(urlData); //转换为byte
                    //处理异常,将ascii码小于0的转换为大于0
                    const ab = new ArrayBuffer(bytes.length);
                    const ia = new Int8Array(ab);
                    let i;
                    for (i = 0; i < bytes.length; i++) {
                        ia[i] = bytes.charCodeAt(i);
                    }
                    //转换成文件，添加文件的type，name，lastModifiedDate属性
                    const blob = new Blob([ab], {type: fileType});
                    blob.lastModifiedDate = new Date()
                    return blob;
                },
                upload() {
                    const canvas = document.getElementById("canvas")
                    const urlData = canvas.toDataURL("image/png").replace('data:image/png;base64,','')
                    const file = this.convertBase64UrlToImgFile(urlData, 'image/jpeg')
                    const that = this
                    let formData = new FormData()
                    formData.append('file', file)
                    $.ajax({
                        url: top.$.rootUrl + '/Order/Order/UploadPhotoFiles',
                        type: "POST",
                        cache: false,
                        data: formData,
                        processData: false, //不对参数进行转换序列号
                        contentType: false, //fromData上传文件时将其设置为false
                        success:function(dataStr){
                            const res = JSON.parse(dataStr)
                            if(res){
                                that.fileData = res.data
                                UtSoft.alert.success("上传成功")
                            }
                        },
                        error:function(data){
                            //失败执行的代码逻辑
                            UtSoft.alert.error("上传失败，请联系管理员")
                        }
                    })
                }
            }
        }()
    })
</script>