使用html5打开摄像头并拍照

openVideo() {
        var vm = this;

        vm.video = vm.$el.querySelector("#video");

        var canvas = vm.$el.querySelector("#canvas");

        vm.context = canvas.getContext("2d");
        //获取摄像头对象
        navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

        navigator.getUserMedia({
          video: true,    // 控制视频设备
//          audio: true  // 控制音频设备
        }, gotStream, noStream); //打开摄像头
        //成功打开摄像头
        function gotStream(stream) {
          vm.mediaStream=stream;//获取视频输入输出流
          vm.video.src = URL.createObjectURL(stream);
          vm.video.onerror = function () {
            stream.stop();
          }
          stream.onended = noStream;
          vm.video.onloadedmetadata = function () {
//            alert("成功打开摄像头")
          };
        }

        //打开摄像头失败
        function noStream(error) {
          vm.$message.error({message: '开启摄像头异常！'});
        }
      }

　　关闭方法如下：

this.mediaStream.getVideoTracks()[0].stop();

　　关闭的对象是根据打开摄像设备时获取的流对象进行操作。