在浏览器调用相机（只对https兼容），适用于H5

由于浏览器的机制，只能在https中才能正常使用（注意注意）

一、组件

<template>
  <view class="root">
    <view class="canvasBox">
      <template v-if="!isUse">
        <slot name="error">
          <view class="error">
            <view class="on1">相机权限被拒绝，请尝试如下操作：</view>
            <view>· 刷新页面后重试；</view>
            <view>· 在系统中检测当前App或浏览器的相机权限是否被禁用；</view>
            <view>· 如果依然不能体验，建议在微信中打开链接；</view>
          </view>
        </slot>
      </template>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    continue: {
      type: Boolean,
      default: false, // false 监听一次   true 持续监听
    },
    exact: {
      type: String,
      default: "user", // environment 后摄像头  user 前摄像头
    },
    size: {
      type: String,
      default: "whole", // whole 全屏  balf 半屏
    },
    definition: {
      type: Boolean,
      default: false, // fasle 正常  true 高清
    },
  },
  data() {
    return {
      windowWidth: 0,
      windowHeight: 0,
      video: null,
      canvas2d: null,
      canvasWidth: 400,
      canvasHeight: 400,
      maskWidth: 400,
      maskHeight: 400,
      inter: 0,

      isParse: false,
      isUse: true,
    };
  },
  mounted() {
    if (origin.indexOf("https") === -1)
      throw "请在 https 环境中使用摄像头组件。";

    this.windowWidth =
      document.documentElement.clientWidth || document.body.clientWidth;
    this.windowHeight =
      document.documentElement.clientHeight || document.body.clientHeight;
    this.windowHeight =
      this.size === "whole" ? this.windowHeight : this.windowHeight / 2;