zoukankan      html  css  js  c++  java
  • h5 Video打开本地摄像头和离开页面关闭摄像头

     <div>
           <video id="video"   style="width=100%; height=100%; object-fit: fill" autoplay ref="videos"  v-show="showVideo"></video>           
           <canvas v-show="!showVideo"   width="300px" height="390px" id="personImgSize"></canvas>
     </div>
    

    一进入这个页面就开始调用这个函数
    在mouted中调用这个函数

        autoMakePhoto(){
                let canvas = document.getElementsByTagName('canvas')[0];
                this.context = canvas.getContext('2d');
                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()[0];
                        let video = _this.$refs.videos;
                        video["srcObject"]=stream;
                        video.play();
                    }).catch(function(err){
                        console.log(err);
                        //调用摄像头失败给的提示
                    });
                }
            },
    

    离开这个页面 关闭摄像头###

    beforeDestroy(){
    this.cancalCloseVideo();
    }

    methods:{
    cancalCloseVideo(){
    this.MediaStreamTrack && this.MediaStreamTrack.stop();
    }
    }

  • 相关阅读:
    css
    css加号波浪号
    C++对象池
    C++11 智能指针
    C++内存泄漏检测(调试工具)
    JSONP是个嘛玩意?解决跨域问题?
    使用django + KindEditor 开发个人博客系统
    前端文本框插件KindEditor
    jQuery AJAX
    Django ModelForm表单验证
  • 原文地址:https://www.cnblogs.com/IwishIcould/p/12059352.html
Copyright © 2011-2022 走看看