H5实现录屏功能代码

这篇文章距离上次修改已过191天，其中的内容可能已经有所变动。

HTML5 提供了 MediaRecorder API 来实现录屏功能。以下是一个简单的例子，展示如何使用 MediaRecorder 来录制视频：




<!DOCTYPE html>
<html>
<head>
<title>Media Recorder Example</title>
</head>
<body>
 
<button id="start-recording">开始录制</button>
<button id="stop-recording" disabled>停止录制</button>
<button id="download-recording" disabled>下载录制</button>
 
<script>
  const startRecordingButton = document.getElementById('start-recording');
  const stopRecordingButton = document.getElementById('stop-recording');
  const downloadButton = document.getElementById('download-recording');
  let mediaRecorder;
  let recordedBlobs;
 
  startRecordingButton.addEventListener('click', () => {
    navigator.mediaDevices.getDisplayMedia({ video: true })
      .then(stream => {
        mediaRecorder = new MediaRecorder(stream, { mimeType: 'video/webm' });
        recordedBlobs = [];
 
        mediaRecorder.ondataavailable = event => {
          if (event.data && event.data.size > 0) {
            recordedBlobs.push(event.data);
          }
        };
 
        mediaRecorder.start();
        stopRecordingButton.disabled = false;
        console.log('Recording started');
      })
      .catch(error => console.error('Error:', error));
  });
 
  stopRecordingButton.addEventListener('click', () => {
    mediaRecorder.stop();
    stopRecordingButton.disabled = true;
    console.log('Recording stopped');
  });
 
  mediaRecorder.onstop = () => {
    const superBuffer = new Blob(recordedBlobs, { type: 'video/webm' });
    downloadButton.href = URL.createObjectURL(superBuffer);
    downloadButton.download = 'recording.webm';
    downloadButton.disabled = false;
  };
</script>
 
</body>
</html>

这段代码中，我们首先获取屏幕媒体流，然后创建 MediaRecorder 实例来录制视频。录制开始和结束时相关按钮会被禁用或启用。录制停止时，录制的视频会被保存到一个 Blob 中，并可以通过创建一个临时的 URL 并设置下载链接来进行下载。

H5实现录屏功能代码

评论已关闭

推荐阅读