js-媒体流录制

发表于 分类于 阅读次数：

有时候我们需要用 js 来录音或者录视频，就需要用到 mediaRecorder。

具体介绍请看：https://developer.mozilla.org/zh-CN/docs/Web/API/MediaRecorder/MediaRecorder。

MediaRecorder 介绍

方法
  • start()：开始
  • stop()：结束
  • pause()：暂停
  • resume()：恢复录制
事件

  • start

    1
    2
    3
    addEventListener("start", (event) => {});

    onstart = (event) => {};

  • stop

    1
    2
    3
    addEventListener("stop", (event) => {});

    onstop = (event) => {};

  • dataavailable：当 MediaRecorder 将媒体数据传送到您的应用程序以供其使用时，将触发 dataavailable 事件。 数据在包含数据的 Blob 对象中提供。

    1
    2
    3
    4
    let chunks = [];
    mediaRecorder.ondataavailable = function(e) {
        chunks.push(e.data);
    }

下面是一个录制视频（音频）的例子：

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
let stream;
let chunks = [];

// 获取媒体流
const options = {video:true, audio:true};
navigator.mediaDevices.getUserMedia(options).then(
    data => {
        stream = data;
    }
);

// 创建 MediaRecorder 对象
const mediaRecorder = new MediaRecorder(stream, {});

// 开始录制
function start() {
    mediaRecorder.start();
}

// 录制过程中获取数据
mediaRecorder.ondataavailable = e => {
    chunks.push(e.data);
  }

// 结束录制
function end() {
    mediaRecorder.stop();
    
    mediaRecorder.onstop = () => {
        // 将数据转化为 blob
        const blob = new Blob(chunks.value);
        console.log(blob);
    }
}