h5实现录制适配拍照功能兼容所有浏览器

要实现录制视频并兼容所有浏览器，可以使用MediaRecorder API。这个API在现代浏览器中得到支持，但在一些旧版本的浏览器中可能不支持。为了让它兼容所有浏览器，可以使用一个polyfill库，比如`@webcomponents/webcomponentsjs`。

以下是实现录制视频并兼容所有浏览器的步骤：

1. 首先，在HTML中创建一个`<video>`元素和一个`<button>`元素，用于开始和停止录制。

<video id="video"></video>
<button id="start">Start Recording</button>
<button id="stop">Stop Recording</button>

2. 在JavaScript中，使用`navigator.mediaDevices.getUserMedia()`方法获取用户的摄像头和麦克风权限，并将其流媒体传递给`<video>`元素。

const video = document.getElementById('video');

navigator.mediaDevices.getUserMedia({ video: true, audio: true })
  .then(stream => {
    video.srcObject = stream;
    video.play();
  })
  .catch(error => {
    console.error(error);
  });

3. 创建一个`MediaRecorder`对象，将`<video>`元素的流媒体传递给它，并指定录制视频的格式和编码器。

let mediaRecorder;
const chunks = [];

function startRecording() {
  mediaRecorder = new MediaRecorder(video.srcObject, { mimeType: 'video/webm; codecs=vp9' });

  mediaRecorder.ondataavailable = event => {
    chunks.push(event.data);
  };

  mediaRecorder.start();
}

function stopRecording() {
  mediaRecorder.stop();
}

4. 当用户点击“开始录制”按钮时，调用`startRecording()`函数开始录制；当用户点击“停止录制”按钮时，调用`stopRecording()`函数停止录制，并将录制的视频转换为Blob对象。

document.getElementById('start').addEventListener('click', () => {
  startRecording();
});

document.getElementById('stop').addEventListener('click', () => {
  stopRecording();

  const blob = new Blob(chunks, { type: 'video/webm' });
  const videoURL = URL.createObjectURL(blob);

  // 将录制的视频显示在页面上
  const recordedVideo = document.createElement('video');
  recordedVideo.src = videoURL;
  document.body.appendChild(recordedVideo);
});

5. 如果要兼容所有浏览器，可以在HTML中添加一个`<script>`标签，引入`@webcomponents/webcomponentsjs`库。

<script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs@2.4.3/bundles/webcomponents-sd-ce.js"></script>

这样就可以实现录制视频并兼容所有浏览器了。