vue 中获取PC端本地摄像头的解决方案

项目背景：项目是在w7系统的一体机，通过浏览器打开vue页面呈现应用程序。

需求：人脸识别模块

解决方案：通过系统外接摄像头（电脑连接的摄像头）获取本地视频，前端页面每隔一段时间通过canvs生成图片发送给后端校验，识别是否有效人脸。

其中js调用本地摄像头

initVido(){
             let _this=this;
               if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
                   navigator.mediaDevices.getUserMedia({
                       video: true,
                   }).then(function (stream) {
_this.MediaStreamTrack=typeof stream.stop==='function'?stream:stream.getTracks()[1];
                      var video = _this.$refs.videos;
                      video["srcObject"]=stream;
                       video.play();
                   }).catch(function(err){
                       console.log(err);
                   });
               }

    },

html代码

<div id="contentHolder" v-if="active==2>       
    <video id="video" width="320" height="320" autoplay ref="videos"></video>  
</div>

坑点：

1.一开始我没有用$refs去获取dom导致在第一次进入时能够打开摄像头 第二次就无法打开，查原因是无法获取video这个Dom，后来通过$refs获取DOM发现还是不行,后来发现是v-if的问题导致的 $refs

ref不是响应式的，所有的动态加载的模板更新它都无法相应的变化。