老版本浏览器调用本地摄像头拍照

// html
<video autoplay playsinline id="video" width="400"></video>
<canvas id="canvas" width="400" height="300" style="display: none;"></canvas>

// js
  var video = $("#video")[0];
  var deviceId; // 摄像头id
  var constraints = {
    audio: false,
    video: {
      mandatory : {
        // minWidth: 400,
        // minHeight: 480
      }
    },
  };
    // 开启摄像头
    turnOnTheCamera(){
      try {
        navigator.mediaDevices.enumerateDevices().then(function (devices) {
          devices.forEach(function (device) {
            if (device.kind === "videoinput" && device.label == 'Integrated Webcam (0bda:568c)') {
              deviceId = device.deviceId;
            }
          });
          if (deviceId) {
            constraints.video.mandatory.sourceId = deviceId;
            navigator.webkitGetUserMedia(
              constraints,
              function (MediaStream) {
                // console.log("MediaStream:",MediaStream)
                video.src = URL.createObjectURL(MediaStream);
                video.onerror = function (err) {
                  console.log("打开摄像头发生错误:", err);
                };
                MediaStream.onended = function noStream(err) {
                  console.log("MediaStream.onended error:", err);
                };
                video.onloadedmetadata = function (res) {
                  console.log("摄像头成功打!");
                };
                console.log("video:", video)
              },
              function (err) {
                console.log(err);
              }
            );
          }
        });
      } catch (error) {
        console.log(error);
      }
    },
    // 拍照
    takePhotos(){
      if (deviceId){
        var srcVideo = $("#video")[0];
        var canvas = document.getElementById('canvas');
        // 通过设置canvas的宽高比可以调整生成的图片的分辨率
        canvas.width = canvasSize.width; // 相机分辨率/2
        canvas.height = canvasSize.height; // 相机分辨率/2
        //获取 `canvas`元素，根据`srcVideo`中的数据进行图片绘制 `ctx.drawImage()`；
        var ctx = canvas.getContext('2d');
        ctx.drawImage(srcVideo, 0, 0, canvas.width, canvas.height);
        //将 `canvas`绘制的图片信息，展示在 `img`标签中；
        var src=canvas.toDataURL();
        // <img :src="src" />
      }else{
        
      }
    },