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

约定不等于承诺〃 2023-02-24 15:27 24阅读 0赞

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

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

# MediaRecoder #

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

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

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

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

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>参数</td> 
   <td>说明</td> 
  </tr> 
  <tr> 
   <td>stream</td> 
   <td>媒体流，可以从getUserMedia、&lt;video&gt;、&lt;audio&gt;或&lt;canvas&gt;获取</td> 
  </tr> 
  <tr> 
   <td>options</td> 
   <td>限制选项</td> 
  </tr> 
 </tbody> 
</table>

option的限制选项有

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>选项</td> 
   <td>说明</td> 
  </tr> 
  <tr> 
   <td>mimeType</td> 
   <td> <p>video/webm</p> <p>audio/webm</p> <p>video/webm;codescs=vp8</p> <p>video/webm;codecs=h264</p> <p>audio/webm;codecs=opus</p> </td> 
  </tr> 
  <tr> 
   <td>audioBitsPerSecond</td> 
   <td>音频码率</td> 
  </tr> 
  <tr> 
   <td>videoBitsPerSecond</td> 
   <td>视频码率</td> 
  </tr> 
  <tr> 
   <td>bitsPerSecond</td> 
   <td>整体码率</td> 
  </tr> 
 </tbody> 
</table>

**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录制的基础知识。