uniapp 的 H5 调用摄像头拍照

在uniapp中，可以通过调用H5的API来实现调用摄像头拍照的功能。具体实现步骤如下：
1. 在需要调用摄像头的页面中，添加以下代码：

<view @click="test">进行拍摄</view>
<div>
  <!-- 这里就是摄像头显示的画面 -->
  <video id="video" width="400" height="300"></video>
  <div>
    <button @click="takePhone" style="margin-top: 10px;">拍照</button>
  </div>
</div>
<div>图片截图画面</div>
<!-- 这里是点击拍照显示的图片画面 -->
<img :src="imgUrl"></img>

2. 在页面的methods中添加以下代码：

methods: {
  test() {
    // 获取video元素
    let video = document.getElementById('video');
    // 获取摄像头
    navigator.mediaDevices.getUserMedia({
      video: true
    }).then(stream => {
      // 将摄像头的画面显示在video元素中
      video.srcObject = stream;
      video.play();
    }).catch(err => {
      console.log(err);
    });
  },
  takePhone() {
    // 获取video元素
    let video = document.getElementById('video');
    // 创建canvas元素
    let canvas = document.createElement('canvas');
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    // 将video元素中的画面绘制到canvas元素中
    canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
    // 将canvas元素转换为图片
    this.imgUrl = canvas.toDataURL('image/png');
  }
}

3. 在页面的data中添加以下代码：

data() {
  return {
    imgUrl: ''
  }
}

这样就可以实现在uniapp中调用摄像头拍照的功能了。