js 调用 摄像头（只有没有安全限制的情况下才可使用）

<template>
    <div>
        <!--video用于显示媒体设备的视频流，自动播放-->
        <video ref="video" id="video" autoplay style="width: 480px;height: 320px"></video>
        <!--拍照按钮-->
        <div>
            {{msg}}
        </div>
        <ul>
            <li v-for="(v,i) in uuuu" :key="i">
                {{v}}
            </li>
        </ul>
        <div>
            <button id="capture" @click="captureF">拍照</button>
        </div>
        <!--描绘video截图-->
        <canvas ref="canvas" id="canvas" width="480" height="320"></canvas>
    </div>
</template>

<script>
var video;
var canvas;
var context;
export default {
    data() {
        return {
            msg: "",
            uuuu:[]
        };
    },
    mounted() {
        this.msg =1;
        console.log(this.$refs.video)
        this.$nextTick(() => {
             this.msg =1;
            video = document.getElementById("video")||this.$refs.video;
            canvas = document.getElementById("canvas")||this.$refs.canvas;
            console.log("video",video);
            console.log("canvas",canvas);
            context = canvas.getContext("2d");
            this.msg ="context"+context;
            if (
                navigator.mediaDevices.getUserMedia ||
                navigator.getUserMedia ||
                navigator.webkitGetUserMedia ||
                navigator.mozGetUserMedia
            ) {
                //调用用户媒体设备，访问摄像头
                this.getUserMedia(
                    {
                        video: { width: 480, height: 320 }
                    },
                    this.success,
                    this.error
                );
            } else {
                alert("你的浏览器不支持访问用户媒体设备");
            }
        });
    },
    methods: {
        captureF() {
            this.msg = "captureF+点击";
            this.msg = context;
            canvas.getContext("2d").drawImage(video, 0, 0, 480, 320);
        },
        getUserMedia(constrains, success, error) {
            if (navigator.mediaDevices.getUserMedia) {
                //最新标准API
                navigator.mediaDevices
                    .getUserMedia(constrains)
                    .then(success)
                    .catch(error);
            } else if (navigator.webkitGetUserMedia) {
                //webkit内核浏览器
                navigator
                    .webkitGetUserMedia(constrains)
                    .then(success)
                    .catch(error);
            } else if (navigator.mozGetUserMedia) {
                //Firefox浏览器
                navagator
                    .mozGetUserMedia(constrains)
                    .then(success)
                    .catch(error);
            } else if (navigator.getUserMedia) {
                //旧版API
                navigator
                    .getUserMedia(constrains)
                    .then(success)
                    .catch(error);
            }
        },
        success(stream) {
            //兼容webkit内核浏览器
            var CompatibleURL = window.URL || window.webkitURL;
            //将视频流设置为video元素的源
            video.src = CompatibleURL.createObjectURL(stream);
            //播放视频
            video.play();
            this.msg = "success";
        },
        error(error) {
            (this.msg = "访问用户媒体设备失败："), error.name, error.message;
            console.log("访问用户媒体设备失败：", error.name, error.message);
        }
    },watch:{
        msg(o,n){
          console.log(o);
          this.uuuu.push(o);
        }
    }
};
</script>

<style>
#video{
    background-color: red;
}
</style>