在web页面音视频录制并下载到本地——MediaRecorder

音视频录制前需要获取到流，使用 navigator.mediaDevices 来完成。

navigator.mediaDevices

MediaDevices 接口提供访问连接媒体输入的设备，如照相机和麦克风，以及屏幕共享等。它可以使你取得任何硬件资源的媒体数据。

简单介绍一下MediaDevices API。

• 方法

官方示例如下：

"use strict";

// Put variables in global scope to make them available to the browser console.
var video = document.querySelector("video");
var constraints = (window.constraints = {
  audio: false,
  video: true,
});
var errorElement = document.querySelector("#errorMsg");

navigator.mediaDevices
  .getUserMedia(constraints)
  .then(function (stream) {
    var videoTracks = stream.getVideoTracks();
    console.log("Got stream with constraints:", constraints);
    console.log("Using video device: " + videoTracks[0].label);
    stream.onended = function () {
      console.log("Stream ended");
    };
    window.stream = stream; // make variable available to browser console
    video.srcObject = stream;
  })
  .catch(function (error) {
    if (error.name === "ConstraintNotSatisfiedError") {
      errorMsg(
        "The resolution " +
          constraints.video.width.exact +
          "x" +
          constraints.video.width.exact +
          " px is not supported by your device.",
      );
    } else if (error.name === "PermissionDeniedError") {
      errorMsg(
        "Permissions have not been granted to use your camera and " +
          "microphone, you need to allow the page access to your devices in " +
          "order for the demo to work.",
      );
    }
    errorMsg("getUserMedia error: " + error.name, error);
  });

function errorMsg(msg, error) {
  errorElement.innerHTML += "
" + msg + "
";
  if (typeof error !== "undefined") {
    console.error(error);
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

要实现web页面录制，需要请求获取音视频流的媒体许可，代码如下：

const button = document.querySelector("button");
button.addEventListener("click", async () => {
  // 音视频都录制
  const stream = await navigator.mediaDevices.getDisplayMedia({
    video: true,
    audio: true
  })
})
1
2
3
4
5
6
7
8

这样通过button实现如下效果：

MediaRecorder

MediaRecorder 是 MediaStream Recording API 提供的用来进行媒体轻松录制的接口，他需要通过调用 MediaRecorder() 构造方法进行实例化。

简单介绍一下 MediaRecorder API。

• 构造函数

• 配置项

• 方法

• 事件处理

• 事件

Listen to these events using addEventListener() or by assigning an event listener to the oneventname property of this interface.

通过以上介绍，可以调用 MediaRecorder.isTypeSupported() 这个API来测试当前浏览器的支持情况。官方代码如下：

const types = [
  "video/webm",
  "audio/webm",
  "video/webm;codecs=vp8",
  "video/webm;codecs=daala",
  "video/webm;codecs=h264",
  "audio/webm;codecs=opus",
  "video/mpeg",
];

for (const type of types) {
  console.log(
    `Is ${type} supported? ${
      MediaRecorder.isTypeSupported(type) ? "Maybe!" : "Nope :("
    }`,
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

返回结果如图：

返回值为 True 的情况下，此代码显示Maybe，原因是即使编码格式支持，但是如果没有足够的资源来支持录制和编码过程，录制仍可能失败。所以仅作为参考判断，仍需要自己写错误处理。

之后通过监听来进行下载操作，代码如下：

const chunks = [];
mediaRecorder.ondataavailable = e => chunks.push(e.data);

mediaRecorder.onstop = () => {
  const blob = new Blob(chunks, { type: chunks[0].type });
  const url = URL.createObjectURL(blob);
  const a = document.createElement("a");
  a.href = url;
  a.download = "screen.webm";
  a.click();
}
1
2
3
4
5
6
7
8
9
10
11

这样就实现了屏幕录制功能了，并且通过该方法实现了音视频下载的功能。

完整代码

完整代码下载地址