WebRTC音视频录制实战 七、第一节 WebRTC录制基本知识

今天我们介绍 一下如何通过WebRTC录制媒体流，实际上就是录取我们之前获取的实时音视频数据，当然它还可以录制桌面的数据，对于桌面我们会在后面的课程中给大家介绍，我们现在就把她理解成录制音视频数据。

在这里我们要介绍一个重要的类，叫

MediaRecoder

这个类就是用来实现媒体流的录制，它有很多的方法和事件，我们一个个来看，首先我们看一下基本格式,

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

我们传入一个参数，也就是我们通过getUserMedia获取到的stream,

另外一个就是option，那么在option里面有很多的选项

参数	说明
stream	媒体流，可以从getUserMedia、<video>、<audio>或<canvas>获取
options	限制选项

 

option的限制选项有

选项	说明
mimeType	video/webm audio/webm video/webm;codescs=vp8 video/webm;codecs=h264 audio/webm;codecs=opus
audioBitsPerSecond	音频码率
videoBitsPerSecond	视频码率
bitsPerSecond	整体码率

 

mimeType指的是你要录制的是音频还是视频，录制的格式是什么，最常见的视频是video/mp4;视频编码vp8,音频是audio/mp3;编码ac;

audioBitsPerSecond指的是每秒音频的码率，码率是根据 编码的情况了，有的是64k有的是128k;

videoBitsPerSecond指的是视频的码率，视频的码率对于我们一般的存储文件都比较大，必须1M，分辨率比如是720P的，可能是2M多，当然了设置的越多清晰度就越高，如果设置的越小，清晰度也会差些。

bitsPerSecond表示总体的码率

以上就是option，我们可以通过设置这些参数，来指定我们录制的文件。

下面我们来看看MediaRecorder 的API

MediaRecorder.start(timeslice)

开始录制媒体，timeslice是可选的,如果没填也就是它所有的数据都会存储到一个大的buffer里面去，如果设置了会按时间切片存储数据,比如10秒是一块数据再10秒是另外一块数据。

 

MediaRecorder.stop()

停止录制，此时会触发包括最终Blob数据的dataavilable事件

 

MediaRecorder.pause()  

暂停录制

 

MediaRecorder.resume()

恢复录制

 

MediaRecorder.isTypeSupported()

检查支持录制的文件格式，如mp4、webp、mp3，这些都可以通过这个API检查一下是否支持

以上就是MediaRecorder的常用API

 

除了这些方法之外呢，还有很多事件

我们这里讲主要的 MediaRecorder事件

MediaRecorder.ondataavailable

当数据有效的时候会触发这个事件，所以我们可以监听这个事件，当数据 有效了我们可以直接把这个数据存储到缓冲区里，在这个事件里面实际上会传过来一个event，在这个事件里面会有一个data，这个data就是真正录制后的数据，可以拿到这个数据之后进行存储。

每次记录一定时间的数据时(如果没有指定时间片，则记录整个数据时)会定期触发。

MediaRecorder.onerror

当有错误发生时，录制会自动的被停止

 

JavaScript几种存储数据的方法

字符串

Blob 

Blob相当于一块非常高效的存储区域，其他的类型的buffer可以放到这个Blob，那它有什么好处，它可以将整个缓冲区写到文件里去非常的方便，通过JavaScript，一般在写文件之前把它放到Blob里，它的底层实际上就是字节的Array一个无类型的数据缓冲区，在它的上层又封装了很多方法，我们可以调用这种方法很方便的去做各种操作。

ArrayBuffer

Blob实际上就依赖于ArrayBuffer，ArrayBuffer也可以使用各种各样的数据，通过上层的Blob我们可以对这个ArrayBuffer做各种操作，等于是Blob是对ArrayBuffer的封装，使得操作ArrayBuffer更高效。

ArrayBufferView

这个实际上就是各种各样类型的Buffer，比如整型的、dubble型的、字符型的等各种各样的buffer，这些都可以当作Blob的一个参数 ，它都会在底层做相关的处理。

那这就是几种 JavaScript的数据存储类型。

 

我们最常用的就是Blob，最终是生成一个url或者一个文件，是使用Blob，如果是底层的数据，一般是ArrayBuffer或者是带类型的ArrayBufferView.

 

以上就是WebRTC录制的基础知识。