vue 本地https测试userMedia

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

准备:

  1. 用vue-cli3生成项目
  2. vue.config.js, 新增配置,避免后面报错:invalid host header
devServer: {
    disableHostCheck: true,
    compress: true
  }
  1. 使用ngrok映射到本地端口
// 下载最新的ngrok2.2.8
./ngrok authtoken xxx
./ngrok http 8081
  1. 媒体捕获使用http就能测;userMedia必须用https

媒体捕获测试

代码网上太多,不写了

    
    

    
    
    

image

camera environment

video

camcorder environment

microphone

microphone

不设置capture

image video audio

userMeida测试

Vue logo

video

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

你可能感兴趣的:(vue 本地https测试userMedia)