移动端H5实现自定义录制界面

在移动端H5（HTML5）中实现自定义录制界面通常涉及使用WebRTC（Real-Time Communication）技术，这是一个由W3C标准化的浏览器原生支持的实时通信API，允许网页进行音频、视频的采集和传输。以下是创建自定义录音界面的一般步骤：

1. **HTML结构**：
- 使用`<video>`元素作为容器显示摄像头预览，`<audio>`标签用于录音。

   <div id="record-container">
     <button id="start-recording">开始录音</button>
     <video id="camera-preview" width="300" height="200"></video>
     <audio id="recorder-source" controls></audio>
   </div>

2. **JavaScript设置**：
- 初始化WebRTC并请求用户的麦克风权限。
- 创建MediaStreamTrack和MediaRecorder实例。

async function startRecording() {
  navigator.mediaDevices.getUserMedia({ audio: true })
    .then((stream) => {
      const video = document.getElementById('camera-preview');
      video.srcObject = stream;
      const recorder = new MediaRecorder(stream);
      
      // 自定义样式和事件处理以展示自定义界面
      const button = document.getElementById('start-recording');
      button.addEventListener('click', () => {
        startButton.style.display = 'none'; // 隐藏开始按钮
        stopButton.textContent = '停止录音'; // 显示停止按钮

        recorder.start();
      });

      recorder.ondataavailable = (event) => {
        if (event.data.size > 0) {
          // ...处理录音数据
        }
      };

      const stopButton = document.createElement('button');
      stopButton.textContent = '开始录音';
      document.body.appendChild(stopButton);
      stopButton.addEventListener('click', () => {
        recorder.stop();
        startButton.style.display = 'block'; // 显示开始按钮
      });
    })
    .catch(error => console.error('Error accessing microphone:', error));
}