vue2.0 h5 调用摄像机设置人头取景框？

Question

目前在做一个公众号的项目，需要给相机上加人头取景框规范用户拍照，系统用的是vue2.0+h5+uniapp;

在网上看了好多都是小程序，想问问H5可以做吗？

是不是必须得自定义一个拍照页面？

想实现如下的样子

Answer 1

可以使用navigator.mediaDevices.getUserMedia方法来访问用户的摄像头，并设置人头取景框。下面是一个示例代码，演示了如何实现这个功能：

<template>  
  <div>  
    <video ref="videoElement" autoplay></video>  
    <button @click="startCamera">启动摄像头</button>  
    <button @click="stopCamera">停止摄像头</button>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      stream: null  
    };  
  },  
  methods: {  
    startCamera() {  
      navigator.mediaDevices.getUserMedia({ video: true })  
        .then(stream => {  
          this.stream = stream;  
          this.$refs.videoElement.srcObject = stream;  
        })  
        .catch(error => {  
          console.error("无法访问摄像头", error);  
        });  
    },  
    stopCamera() {  
      if (this.stream) {  
        this.stream.getTracks().forEach(track => track.stop());  
        this.stream = null;  
      }  
      this.$refs.videoElement.srcObject = null;  
    }  
  }  
};  
</script>