vue 本地https测试userMedia

接h5渠道的时候遇到一个问题，正好测试一下两种h5调起设备的方案：html媒体捕获、userMedia。

准备：

1. 用vue-cli3生成项目
2. vue.config.js, 新增配置，避免后面报错：invalid host header

devServer: {
    disableHostCheck: true,
    compress: true
  }

3. 使用ngrok映射到本地端口

// 下载最新的ngrok2.2.8
./ngrok authtoken xxx
./ngrok http 8081

4. 媒体捕获使用http就能测；userMedia必须用https

媒体捕获测试

代码网上太多，不写了

    <!-- capture: user 前置 -->
    <!-- capture: environment 后置 -->

    <!-- ios 12.1 前置、后置， 拍照 ok -->
    <!-- capture: camera 打开后置 -->
    <p>
      <p>image</p>
      <input type="file"  accept="image/*" capture="camera" @change="fileChange($event)">camera</input>
      <input type="file"  accept="image/*" capture="environment" @change="fileChange($event)">environment</input>
    </p>

    <!-- ios 12.1 前置、后置， 视频 ok -->
    <!-- capture: camcorder 打开后置 -->
    <p>
      <p>video</p>
      <input type="file"  accept="video/*" capture="camcorder" @change="fileChange($event)">camcorder</input>
      <input type="file"  accept="video/*" capture="environment" @change="fileChange($event)">environment</input>
    </p>

    <!--  ios 12.1 出现 视频和照片切换 -->
    <p>
      <p>microphone</p>
      <input type="file" accept="audio/*" capture="microphone">microphone</input>
    </p>

    <p>
      <p>不设置capture</p>
      <!-- ios浏览器提示选择 照片图库、浏览、（拍照、录像、拍照或录像） -->
      <input type="file"  accept="image/*" @change="fileChange($event)">image</input>
      <input type="file"  accept="video/*" @change="fileChange($event)">video</input>
      <input type="file"  accept="audio/*" @change="fileChange($event)">audio</input>
    </p>

userMeida测试

<div>
    <img alt="Vue logo" src="../assets/logo.png">
    <p>video</p>
    <video id="video" autoplay="true" width="320" height="240" controls>
  </video>
  <div>
    <button id="capture" @click="capture">拍照</button>
  </div>
  <canvas id="canvas" width="320" height="240"></canvas>

video显示摄像头数据，点击拍照可以截图图片。从网上找的代码