前端页面使用 mediaRecorder 录音

发表于 | 更新于 | 分类于 | 评论数： | 阅读次数：

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

流程

  • 首先调用浏览器 api 获取录音权限,开始录音,作为录音器的输入源.也可以使用 video 或者 audio 标签中的声源,同时可以配合 videojs 实现直播流的录音和录像功能.

  • 实例化 MediaRecoder(let mediaRecoder = new MediaRecoder)

  • 开始录音 (mediaRecoder.start())

  • 结束录音(mediRecoder.stop()),触发ondataavailable方法
  • 从 ondataavailable 获取视频流/音频流 blob
  • 浏览器使用获取到的 blob 转换为连接进行下载功能

语法

var mediaRecorder = new MediaRecorder(stream[, options]);

参数

stream

MediaStream 将要录制的流. 它可以是来自于使用 `navigator.mediaDevices.getUserMedia()` 创建的流或者来自于 `<audio>`, `<video>` 以及 `<canvas>` DOM元素.

options (可选)

一个字典对象,它可以包含下列属性:
mimeType: 为新构建的 MediaRecorder 指定录制容器的MIME类型. 在应用中通过调用 MediaRecorder.isTypeSupported() 来检查浏览器是否支持此种mimeType .
audioBitsPerSecond: 指定音频的比特率.
videoBitsPerSecond: 指定视频的比特率.
bitsPerSecond: 指定音频和视频的比特率. 此属性可以用来指定上面两个属性. 如果上面两个属性只有其中之一和此属性被指定, 则此属性可以用于设定另外一个属性.

方法

MediaRecorder.isTypeSupported()
返回一个Boolean 值,来表示设置的MIME type 是否被当前用户的设备支持.

MediaRecorder.pause()
暂停媒体录制
MediaRecorder.requestData()
请求一个从开始到当前接收到的,存储为Blob类型的录制内容. (或者是返回从上一次调用requestData() 方法之后到现在的内容).  调用这个方法后,录制将会继续进行,但是会创建一个新的Blob对象
MediaRecorder.resume()
继续录制之前被暂停的录制动作.
MediaRecorder.start()
开始录制媒体,这个方法调用时可以通过给timeslice参数设置一个毫秒值,如果设置这个毫秒值,那么录制的媒体会按照你设置的值进行分割成一个个单独的区块, 而不是以默认的方式录制一个非常大的整块内容.
MediaRecorder.stop()
停止录制. 同时触发dataavailable事件,返回一个存储Blob内容的录制数据.之后不再记录

事件

MediaRecorder.ondataavailable
调用它用来处理 dataavailable 事件, 该事件可用于获取录制的媒体资源 (在事件的 data 属性中会提供一个可用的 Blob 对象.)
MediaRecorder.onerror
An EventHandler called to handle the recordingerror event, including reporting errors that arise with media recording. These are fatal errors that stop recording.
MediaRecorder.onpause
用来处理 pause 事件, 该事件在媒体暂停录制时触发（MediaRecorder.pause()）.
MediaRecorder.onresume
用来处理 resume 事件, 该事件在暂停后回复录制视频时触发（MediaRecorder.resume()）.
MediaRecorder.onstart
用来处理 start 事件, 该事件在媒体开始录制时触发（MediaRecorder.start()）.
MediaRecorder.onstop
用来处理 stop 事件, 该事件会在媒体录制结束时、媒体流（MediaStream）结束时、或者调用MediaRecorder.stop() 方法后触发.

使用(在 vue 中)

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
let constraints = {
  audio: true,
  video: false
};
//获取录音权限并录音
let getMedia = navigator.mediaDevices || navigator.webkitGetUserMedia;
if (getMedia) {
  getMedia
    .getUserMedia(constraints)
    .then(mediaStream => {
      //录音
      //初始化录音器
      this.recorder = new MediaRecorder(mediaStream);
      //开始录音
      this.recorder.start();
      //结束录音时触发ondataavailable,返回格式为 blob
      this.recorder.ondataavailable = getRecordingData;
    })
    .catch(err => {
      console.log(err.name + ": " + err.message);
    });
} else {
  console.log("无法使用麦克风");


//获取录到 blob
  getRecordingData(e) {
      this.chunk = e.data;
    }
}
//下载文件

let blob = this.thunk;
if ("msSaveOrOpenBlob" in navigator) {
        window.navigator.msSaveOrOpenBlob(blob, fileUrl);
      } else {
        let downloadElement = document.createElement("a");
        let href = window.URL.createObjectURL(blob);
        downloadElement.href = href;
        downloadElement.download = fileUrl;
        document.body.appendChild(downloadElement);
        downloadElement.click();
        document.body.removeChild(downloadElement);
        window.URL.revokeObjectURL(href);
      }
thank u !