移动端H5实现自定义拍视频

在移动端HTML5中，实现用户自定义拍摄视频功能通常需要借助浏览器提供的`getUserMedia` API 和 `canvas` 或 `video` 元素。以下是基本步骤：

1. **获取权限**：首先，你需要请求用户的摄像头访问权限，这通常在网页加载时通过JavaScript的`navigator.mediaDevices.getUserMedia`方法完成，指定`video`类型的媒体流。

let constraints = { video: true };
navigator.mediaDevices.getUserMedia(constraints)
  .then(stream => {
    // stream 是获取到的视频流
  })
  .catch(error => console.error('Error accessing camera', error));

2. **创建视频元素**：将得到的媒体流绑定到一个`<video>`标签上，显示实时视频。

<video id="myVideo" autoplay></video>

3. **开始录制**：当用户点击录制按钮时，创建一个`MediaRecorder`实例，并添加事件监听处理视频数据。

const recordButton = document.getElementById('record');
recordButton.addEventListener('click', () => {
  const mediaStream = document.getElementById('myVideo').srcObject;
  if (!recorder) {
    recorder = new MediaRecorder(mediaStream);
    recorder.start();
  } else {
    recorder.stop();
    downloadBlob(recorder.blob());
  }
});

function downloadBlob(blob) {
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'myVideo.mp4';
  a.click();
}

4. **停止并下载**：当用户再次点击录制按钮或满足其他条件时，停止录音，然后使用`blob`转换为可以下载的链接。

注意：不是所有现代浏览器都支持`MediaRecorder`，并且在某些情况下可能需要跨域处理。此外，考虑到用户体验和兼容性，最好提供一个预览和确认的环节让用户确认是否保存录制结果。