在uni-app直接使用 h5+ 的api是做不到的，他会调用原生相机，原生相机上无法添加任何东西

一、思路

经过百度发现页面是可以打开摄像头设备并进行拍照，网上也有很多的例子，他们的思路是使用初始化得到视频流然后渲染到<video>标签展示视频，然后在点击拍照的时候给 canvas 直接设置 <video>里的内容，得到base64的图片，赋值给<img>标签。
然后我把这种思路放到APP试验了一波，可以调用摄像头并拍照，那么就简单了，我使用 webview 转到页面这里，给video 标签上加个蒙层那还不是 soeasy 的事情。

如果你本地试验视频的时候，记得不要使用 http://ip:port 的方式，要使用 http://localhost:port 或 https://ip:port，否则视频无法点开。

二、代码

这里我就不放webview的代码了，h5+ api 里面自己搜一下很简单。

<template>
  <div class="camera_outer">
    <video id="videoCamera" width="100%" :height="videoHeight" style="margin-top: 38%" autoplay></video>
    <canvas style="display:none;border-radius: 50%;" id="canvasCamera" :width="videoWidth" :height="videoHeight" ></canvas>
    <div v-if="imgSrc" class="img_bg_camera">
      <img :src="imgSrc" alt="" class="tx_img">
    </div>
    <div style="text-align: center;">
      <p>请保持人脸充满画面</p>
    </div>
    <div style="margin-top: 6.25rem;text-align: center;">
      <van-button @click="setImage" type="primary" style="margin-right: 1.25rem;">拍照</van-button>
    </div>
  </div>
</template>

<script>
import dashbordAPI from '../../../api/dashbordAPI.js'
export default {
data () {
  return {
    videoWidth: 240,
    videoHeight: 320,
    imgSrc: '',
    thisCancas: null,
    thisContext: null,
    thisVideo: null,
  }
},
mounted() {
  this.getCompetence()
},
destroyed() {
  this.stopNavigator()
},
methods: {
  getCompetence () {
    var _this = this
    this.thisCancas = document.getElementById('canvasCamera')
    this.thisContext = this.thisCancas.getContext('2d')
    this.thisVideo = document.getElementById('videoCamera')
    // 旧版本浏览器可能根本不支持mediaDevices，我们首先设置一个空对象
    if (navigator.mediaDevices === undefined) {
      navigator.mediaDevices = {}
    }
    // 一些浏览器实现了部分mediaDevices，我们不能只分配一个对象
    // 使用getUserMedia，因为它会覆盖现有的属性。
    // 这里，如果缺少getUserMedia属性，就添加它。
    if (navigator.mediaDevices.getUserMedia === undefined) {
      navigator.mediaDevices.getUserMedia = function (constraints) {
        // 首先获取现存的getUserMedia(如果存在)
        var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia
        // 有些浏览器不支持，会返回错误信息
        // 保持接口一致
        if (!getUserMedia) {
          return Promise.reject(new Error('getUserMedia is not implemented in this browser'))
        }
        // 否则，使用Promise将调用包装到旧的navigator.getUserMedia
        return new Promise(function (resolve, reject) {
          getUserMedia.call(navigator, constraints, resolve, reject)
        })
      }
    }
    // ,facingMode: { exact: "environment" }
    var constraints = { audio: false, video: { width: this.videoWidth, height: this.videoHeight} }
    navigator.mediaDevices.getUserMedia(constraints).then(function (stream) {
      // 旧的浏览器可能没有srcObject
      if ('srcObject' in _this.thisVideo) {
        _this.thisVideo.srcObject = stream
      } else {
        // 避免在新的浏览器中使用它，因为它正在被弃用。
        _this.thisVideo.src = window.URL.createObjectURL(stream)
      }
      _this.thisVideo.onloadedmetadata = function (e) {
        _this.thisVideo.play()
      }
    }).catch(err => {
      console.log(err)
    })
  },
    // 绘制图片（拍照功能）
    setImage () {
      var _this = this
      // 点击，canvas画图
      _this.thisContext.drawImage(_this.thisVideo, 0, 0, _this.videoWidth, _this.videoHeight)
      // 获取图片base64链接
      var image = this.thisCancas.toDataURL('image/png')
      _this.imgSrc = image
      let file = this.dataURLtoFile(_this.imgSrc, 'photo.jpg')
      dashbordAPI.uploadAvatar(file).then(res => {
        let form = JSON.parse(localStorage.getItem('form'));
        form.headUrl = res.fileUrl
        localStorage.setItem('form',JSON.stringify(form));
        _this.$router.push({
          name: 'ApplyMessage',
          params: {
            value: 0,
            form: res
          }
        })
      })
      // this.$emit('refreshDataList', _this.imgSrc)
    },
    // base64转文件
    dataURLtoFile (dataurl, filename) {
      var arr = dataurl.split(',')
      var mime = arr[0].match(/:(.*?);/)[1]
      var bstr = atob(arr[1])
      var n = bstr.length
      var u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      return new File([u8arr], filename, { type: mime })
    },
    // 关闭摄像头
    stopNavigator () {
      this.thisVideo.srcObject.getTracks()[0].stop()
    }
  },
}

</script>

<style lang="scss" scoped>
.camera_outer{
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  background: url("../../../assets/images/headPhoto.png") no-repeat center;
  background-size: 100%;
  video,canvas,.tx_img{
    -moz-transform:scaleX(-1);
    -webkit-transform:scaleX(-1);
    -o-transform:scaleX(-1);
    transform:scaleX(-1);
  }

  .btn_camera{
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    height: 50px;
    background-color: rgba(0,0,0,0.3);
    line-height: 50px;
    text-align: center;
    color: #fff;
  }
  .bg_r_img{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
  }

  .img_bg_camera{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    img{
      width: 100%;
      height: 100%;
    }

    .img_btn_camera{
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 50px;
      line-height: 50px;
      text-align: center;
      background-color: rgba(0,0,0,0.3);
      color: #fff;
      .loding_img{
        width: 50px;
        height: 50px;
      }
    }
  }
}
</style>

图片的大小就是 canvas 设置图片的时候 _this.thisContext.drawImage(_this.thisVideo, 0, 0, _this.videoWidth, _this.videoHeight)
在 app 里的 localStorage 和 webview 之后的 localStorage 是同一个，可以相互传递数据。