今天我们介绍 一下如何通过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录制的基础知识。