如何使用 javascript 在浏览器上录制视频

录制视频是目前很多应用常用的功能，而现代浏览器提供了一种简单易用的方法来完成这个任务，那就是使用 MediaRecorder API。

1. 检查浏览器支持

在开始使用 MediaRecorder API 之前，我们需要先检查浏览器是否支持该 API。可以使用以下代码来检查：

if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
  console.log('MediaRecorder is supported');
} else {
  console.log('MediaRecorder is not supported');
}

2. 获取摄像头和麦克风的访问权限

在使用 MediaRecorder API 之前，我们需要获取用户对摄像头和麦克风的访问权限。以下是获取访问权限的示例代码：

navigator.mediaDevices.getUserMedia({ video: true, audio: true })
  .then(stream => {
    console.log('Permission to access camera and microphone has been granted');

    // do something with the stream
  })
  .catch(error => {
    console.log(`Permission to access camera and microphone has been denied: ${error}`);
  });

3. 创建 MediaRecorder 实例

一旦我们获得了摄像头和麦克风的访问权限，就可以创建 MediaRecorder 实例并开始录制。

let mediaRecorder;
let recordedChunks = [];

function startRecording() {
  let stream = MediaDevices.getUserMedia({ video: true, audio: true });
  mediaRecorder = new MediaRecorder(stream);

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

  mediaRecorder.start();
}

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

function download() {
  let blob = new Blob(recordedChunks, { type: 'video/mp4' });
  let url = URL.createObjectURL(blob);
  let a = document.createElement('a');

  a.href = url;
  a.download = 'recorded-video.mp4';
  document.body.appendChild(a);
  a.click();

  window.URL.revokeObjectURL(url);
}

我们创建了两个函数 startRecording 和 stopRecording。当调用 startRecording 时，我们将获得一个包含视频和音频轨道的媒体流，并创建了一个 MediaRecorder 实例。当每个数据块可用时，我们将其保存到 recordedChunks 数组中。最后，当调用 stopRecording 时，我们停止录制并生成一个 blob 对象，然后将其下载到本地。

4. 完整代码

下面是完整代码。

if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
  console.log('MediaRecorder is supported');
} else {
  console.log('MediaRecorder is not supported');
}

let mediaRecorder;
let recordedChunks = [];

function startRecording() {
  let stream = MediaDevices.getUserMedia({ video: true, audio: true });
  mediaRecorder = new MediaRecorder(stream);

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

  mediaRecorder.start();
}

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

function download() {
  let blob = new Blob(recordedChunks, { type: 'video/mp4' });
  let url = URL.createObjectURL(blob);
  let a = document.createElement('a');

  a.href = url;
  a.download = 'recorded-video.mp4';
  document.body.appendChild(a);
  a.click();

  window.URL.revokeObjectURL(url);
}

5. 结论

使用 MediaRecorder API 可以在现代浏览器上很容易地录制视频。我们需要检查浏览器是否支持 API，获取用户访问权限，创建 MediaRecorder 实例并记录数据块，最后将数据块下载到本地。