h5调用摄像头拍摄

<template>
  <!-- <div class="demo_main">
    <div @click="moveToCameraAVG()" v-cloak>
      <img v-if="imginfo!==''" :src="imginfo" />
      <div class="warm_title2">点击自拍一张头像</div>
    </div>
    <video
      id="video"
      class="pic_video"
      playsinline
      autoplay
      x5-video-player-type="h5"
      style="object-fit:fill"
    ></video>
    <canvas id="canvas" class="canvas_pic" style="margin: 0;padding: 0;"></canvas>
    <div class="bottom_div">
      <div>拍照</div>
      <img src="images/pic_btn.png" class="capture-btn" @click="captureAvg" />
    </div>
  </div>-->
  <div class="demo_main">
    <img v-if="imginfo!==''" :src="imginfo" />
    <div class="booth" v-if="showStatus">
      <div class="top_header">
        <span @click="hideDom">取消</span>
        <span>相册</span>
      </div>
      <div class="box_center">
        <div class="img_box"></div>
        <video
          id="video"
          class="pic_video"
          playsinline
          autoplay
          x5-video-player-type="h5"
          style="object-fit:fill"
        ></video>
      </div>
      <button id="tack" @click="captureAvg"></button>
      <canvas id="canvas" width="400" height="300" style="display:none"></canvas>
      <!-- <img id="img" src style="max-width:100%" /> -->
    </div>
    <div v-else>
      <button type="file" @click="showDom">上传图片</button>
      <img id="img" src style="max-width:100%" />
    </div>
  </div>
</template>
<script>
import "@/utils/flexible.js";
export default {
  data() {
    return {
      showStatus: false,
      imgUrl: "",
      vendorUrl: "",
      video: "",
      canvas: "",
      img: "",
      snap: "",
      imginfo: ""
    };
  },
  created() {},
  mounted() {},
  methods: {
    showDom() {
      this.showStatus = true;
      this.moveToCameraAVG();
    },
    hideDom() {
      this.showStatus = false;
    },
    moveToCameraAVG() {
      var self = this;
      if (navigator.mediaDevices === undefined) {
        navigator.mediaDevices = {};
      }
      if (navigator.mediaDevices.getUserMedia === undefined) {
        navigator.mediaDevices.getUserMedia = function(constraints) {
          var getUserMedia =
            navigator.getUserMedia ||
            navigator.webkitGetUserMedia ||
            navigator.mozGetUserMedia ||
            navigator.msGetUserMedia ||
            navigator.oGetUserMedia;
          if (!getUserMedia) {
            return Promise.reject(
              new Error("getUserMedia is not implemented in this browser")
            );
          }
          return new Promise(function(resolve, reject) {
            getUserMedia.call(navigator, constraints, resolve, reject);
          });
        };
      }
      if (window.stream) {
        window.stream.getTracks().forEach(track => {
          track.stop();
        });
      }
      var constraints = (window.constraints = {
        audio: false,
        video: {
          sourceId: "default",
          facingMode: { exact: "environment" }
        }
      });
      navigator.mediaDevices
        .getUserMedia(constraints)
        .then(function(stream) {
          var video = document.getElementById("video");
          try {
            window.stream = stream;
            video.srcObject = stream;
          } catch (error) {
            video.src = window.URL.createObjectURL(stream);
          }
          self.localMediaStream = stream;
          video.play();
        })
        .catch(function(err) {
          alert(err.name + ": " + err.message);
        });
    },
    //停止摄像机
    stopCapture: function() {
      var video = document.getElementById("video");
      if (!video.srcObject) return;
      let stream = video.srcObject;
      let tracks = stream.getTracks();
      tracks.forEach(track => {
        track.stop();
      });
    },
    // 头像照片
    captureAvg() {
      var vm = this;
      var video = document.getElementById("video");
      var canvas = document.getElementById("canvas"),
        ctx = canvas.getContext("2d"),
        CHeight = video.clientHeight, //获取屏幕大小让canvas自适应
        CWidth = video.clientWidth;
      canvas.width = CWidth;
      canvas.height = CHeight;
      if (vm.localMediaStream) {
        ctx.drawImage(video, 0, 0, CWidth, CHeight);
        var dataURL = canvas.toDataURL("image/jpeg"); //dataURL = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA'
        vm.imginfo = dataURL;
        // 停止摄像机
        video.pause();
        this.stopCapture();
      }
    }
  }
};
</script>
<style lang="less" scoped>
.top_header {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 1.31rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
* {
  padding: 0;
  margin: 0;
}
.demo_main {
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.31);
  padding: 0;
  margin: 0;
}

.booth {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100%;
  width: 100%;
  position: relative;
}
.box_center {
  height: 13.55rem;
  width: 10rem;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
video {
  height: 11.31rem;
  width: 7.55rem;
}
.img_box {
  height: 11.31rem;
  width: 7.55rem;
  background-image: url("https://file.baojunev.com/group1/default/20200602/09/39/3/positive.png");
  position: absolute;
  background-size: 100% 100%;
  top: 1.12rem;
}
#tack {
  position: fixed;
  z-index: 2;
  height: 1.65rem;
  width: 1.65rem;
  border-radius: 50%;
  background: #fff;
  bottom: 0.45rem;
  background-image: url("https://file.baojunev.com/group1/default/20200602/10/10/3/btn.png");
  background-size: contain;
  border: none;
  outline: none;
}
</style>

2.遇到的问题
在浏览器上直接打开该页面时可生效，但是在app的内嵌h5内不生效

• 权限未打开(APP拍摄权限打开)

config.xml
<platform name="ios">
 <custom-config-file parent="NSCameraUsageDescription" platform="ios" target="*-Info.plist">
   <string>Access to camera to make video calls.</string>
 </custom-config-file>
 <custom-config-file parent="NSMicrophoneUsageDescription" platform="ios" target="*-Info.plist">
   <string>Access to microphone to make calls.</string>
 </custom-config-file>
</platform>

以及适用于Android的以下内容：AndroidManifest.xml
<platform name="android">
 ...
 <custom-preference name="android-minSdkVersion" value="21" />
 <custom-preference name="android-targetSdkVersion" value="28" />
 <custom-config-file parent="/*" target="AndroidManifest.xml">
   <uses-permission android:name="android.webkit.PermissionRequest" />
   <uses-permission android:name="android.permission.INTERNET" />
   <uses-permission android:name="android.permission.RECORD_AUDIO" />
   <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
   <uses-permission android:name="android.permission.CAMERA" />
   <uses-feature android:name="android.hardware.camera" />
   <uses-feature android:name="android.hardware.camera.autofocus" />
 </custom-config-file>
</platform>

• APP找那个需要加入代码

参考的文档：参考文档

"permissions": {
  "audio-capture": {
    "description": "Required to capture audio using getUserMedia()"
  },
  "video-capture": {
    "description": "Required to capture video using getUserMedia()"
  }
}

• 提示错误，和video标签的显示，并不会显示摄像头（原因：摄像的权限未打开）
  chrome NotReadableError: Could not start video source