h5实现在人脸检测视频中拍一张照片并且能够兼容所有浏览器方法

实现在人脸检测视频中拍一张照片并且能够兼容所有浏览器的方法，可以使用 WebRTC 技术实现。WebRTC 是一种支持实时视频和音频通信的开放标准，它可以在浏览器间进行点对点通信，而不需要任何插件。

具体实现步骤如下：

1. 媒体设备访问

首先需要获取用户的媒体设备，包括摄像头和麦克风。可以使用 navigator.getUserMedia() 方法来访问媒体设备，该方法已经被废弃，但是在兼容性方面更好。

navigator.getUserMedia({ video: true, audio: false }, function(stream) {
  // 获取到 MediaStream 对象，可以进行后续操作
}, function(error) {
  // 用户拒绝授权或者设备不可用
});

2. 显示视频流

获取到 MediaStream 对象后，可以通过创建 video 元素来显示视频流。可以使用 URL.createObjectURL() 方法将 MediaStream 对象转换成 URL 对象，然后将 URL 对象赋值给 video 元素的 src 属性。

const video = document.createElement('video');
video.src = URL.createObjectURL(stream);
video.play();

3. 人脸检测

在视频流中进行人脸检测，可以使用第三方库如 face-api.js。face-api.js 是一个基于 TensorFlow.js 的人脸识别库，可以在浏览器中进行人脸检测、识别和跟踪。

const faceDetection = async () => {
  const detections = await faceapi.detectAllFaces(video, new faceapi.TinyFaceDetectorOptions());
  // 检测到人脸后的操作
};

4. 拍照

在人脸检测到结果后，可以使用 canvas 元素将当前视频帧绘制成图片。可以使用 canvas 的 drawImage() 方法将 video 元素绘制到 canvas 上，然后使用 toDataURL() 方法将 canvas 转换成 base64 编码的图片数据。最后可以将图片数据上传到服务器或者进行其他操作。

const canvas = document.createElement('canvas');
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
const context = canvas.getContext('2d');
context.drawImage(video, 0, 0, canvas.width, canvas.height);
const imageData = canvas.toDataURL('image/png');

综上所述，使用 WebRTC 和 face-api.js 可以实现在人脸检测视频中拍一张照片并且能够兼容所有浏览器的功能。