接h5渠道的时候遇到一个问题，正好测试一下两种h5调起设备的方案：html媒体捕获、userMedia。
准备：
- 用vue-cli3生成项目
- vue.config.js, 新增配置，避免后面报错：invalid host header
devServer: {
disableHostCheck: true,
compress: true
}
- 使用ngrok映射到本地端口
// 下载最新的ngrok2.2.8
./ngrok authtoken xxx
./ngrok http 8081
- 媒体捕获使用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显示摄像头数据，点击拍照可以截图图片。从网上找的代码
