MediaRecorder API在浏览器中轻松录制视频MediaRecorder API是HTML5的一部分，它提供了

MediaRecorder API是HTML5的一部分，它提供了一种在浏览器中录制音频和视频的方式。通过该API，开发者可以使用JavaScript来控制录制过程，并获取录制的媒体数据。

步骤1：检查兼容性首先，我们需要确保浏览器支持该API。可以在浏览器中运行以下代码来检查兼容性：

if (navigator.mediaDevices && typeof navigator.mediaDevices.getUserMedia === 'function') {
  // 浏览器支持MediaRecorder API
} else {
  // 浏览器不支持MediaRecorder API
}

步骤2：获取媒体流在开始录制之前，我们需要获取用户的媒体流，即音频或视频输入。可以使用getUserMedia方法来实现：

navigator.mediaDevices.getUserMedia({ audio: true, video: true })
  .then(function(stream) {
    // 成功获取媒体流，可以开始录制
  })
  .catch(function(error) {
    // 获取媒体流失败
  });

步骤3：创建MediaRecorder实例获取到媒体流后，我们可以创建一个MediaRecorder实例来控制录制过程。在创建实例时，需要传入媒体流和一些选项：

var mediaRecorder = new MediaRecorder(stream, { mimeType: 'video/webm' });

步骤4：开始和停止录制一旦创建了MediaRecorder实例，我们可以使用start和stop方法来控制录制的开始和停止：

mediaRecorder.start();
// 录制已经开始...

setTimeout(function() {
  mediaRecorder.stop();
  // 录制已经停止...
}, 5000);

步骤5：处理录制的数据媒体数据将以事件的形式传递给MediaRecorder实例。我们可以使用dataavailable事件来处理录制的数据：

mediaRecorder.ondataavailable = function(event) {
  // 处理录制的数据...
};

案例

<button id="start">开始录制</button>
<button id="stop">停止录制</button>

<script>
  var startButton = document.getElementById('start');
  var stopButton = document.getElementById('stop');

  var mediaRecorder;
  var chunks = [];

  startButton.addEventListener('click', function() {
    navigator.mediaDevices.getUserMedia({ audio: true })
      .then(function(stream) {
        mediaRecorder = new MediaRecorder(stream);
        mediaRecorder.start();

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

  stopButton.addEventListener('click', function() {
    mediaRecorder.stop();

    mediaRecorder.onstop = function() {
      var blob = new Blob(chunks, { type: 'audio/ogg; codecs=opus' });
      var url = URL.createObjectURL(blob);

      var a = document.createElement('a');
      a.href = url;
      a.download = 'recording.ogg';
      a.click();

      chunks = [];
    };
  });
</script>

给出一个完整的代码案例：

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>录像</title>
  <style type="text/css">
    #video {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 800px;
      height: 800px;
      margin-left: -400px;
      margin-top: -400px;
      display: block;
    }

    #start, #stop {
      position: fixed;
      bottom: 10px;
      left: 50%;
      transform: translateX(-50%);
    }
  </style>
</head>

<body style="text-align: center; margin: 0;">
<div id="video-container">
  <video id="video" autoplay></video>
</div>
<button id="start" class="btn" onclick="startRecording()">开始录像</button>
<button id="stop" class="btn" onclick="stopRecording()" style="display: none;">停止录像</button>
<video id="preview" style="display: none; position: absolute;
      left: 50%;
      top: 50%;
      width: 800px;
      height: 800px;
      margin-left: -400px;
      margin-top: -400px;" controls></video>

<script>
  let videoUrl = ''; // 用于存储视频的URL
  var video = document.getElementById('video')
  var startButton = document.getElementById('start')
  var stopButton = document.getElementById('stop')
  var preview = document.getElementById('preview')
  var chunks = []

  if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { //判断浏览器是否兼容
    var constraints = {
      audio: true,
      video: true
    }
    navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
      video.srcObject = stream //将实时媒体流给video标签
      video.play() //开启video
    }, function() { //获取摄像头权限失败的回调
      alert('获取摄像头权限失败')
    })
  } else {
    alert('当前浏览器不支持获取摄像头权限！')
  }

  function startRecording() {
    startButton.style.display = 'none'
    stopButton.style.display = 'unset'

    var mediaRecorder = new MediaRecorder(video.srcObject)
    mediaRecorder.start()

    mediaRecorder.ondataavailable = function(e) {
      chunks.push(e.data)
    }
    mediaRecorder.onstop = function() {
      var blob = new Blob(chunks, { 'type': 'video/mp4' })
      chunks = []
      var videoURL = URL.createObjectURL(blob)
      // 将 Blob 对象转换为二进制数据 URL
      const url = URL.createObjectURL(blob);
      // 创建下载链接
      const link = document.createElement('a');
      link.href = url;
      link.download = '录像.mp4';
      link.click()
      video.style.display = 'none'
      preview.src = videoURL
      preview.style.display = 'block'
      preview.play()
    }
  }

  function stopRecording() {
    startButton.style.display = 'unset'
    stopButton.style.display = 'none'

    video.srcObject.getTracks().forEach(function(track) {
      track.stop()
    })
    video.style.display = 'block'
    preview.style.display = 'none'
    preview.src = ''

  }

</script>

</body>

</html>