WebRTC音视频开发读书笔记（六）

最新推荐文章于 2024-10-05 07:55:50 发布

原创

最新推荐文章于 2024-10-05 07:55:50 发布 · 811 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#webrtc

数据通道不仅可以发送文本消息, 还可以发送图片、二进制文件,将其类型binaryType属性设置成arraybuffer类型即可.

九\、文件传输

1、文件传输流程

（1）使用表单file打开本地文件

（2）使用FileReader读取文件的二进制数据

（3）创建对等连接，本地连接及远端连接

（4）创建发送数据通道

（5）创建接收数据通道

（6）将读取的二进制数据切割成一个个切片，然后使用数据通道的send方法发送数据。

（7）使用接收数据通道二进制数据将其放入数据缓存

（8）根据数据缓存生成Blob 文件

（10）生成文件连接并提供下载。

读取流程中文件二进制数据使用FileReader对象，还需要对数据进行切片处理，在接收方法中使用缓存将接收的数据缓存起来，最后生成blob下载文件。处理流程如下所示：

2、FileReader

FileReader对象允许Web应用程序异步读取存储在用户计算机上的文件内容。常用事件如下所示：

使用File或Blob对象指定要读取的文件或数据，当监听到load事件后，即可通过事件的结果属性拿到数据，然后使用发送通道的send方法将数据发送出去。代码如下：

sendChannel.send(e.target.result)

读取二进制数据可以使用FileReader的readAsArrayBuffer方法，结果为ArrayBuffer对象。还有其它处理方法，如下所示：

读取数据时需要将数据分成一段一段的，然后发送，接收时再按顺序读取到数据缓存中，数据流的走向如图所示：

上图中数据块叫做Chunk，DataChannel每次发送的数据即为Chunk, 使用对象的slice方法按顺序切割出数据块。如下面代码所示：

let slice=file.slice(offset,offset+chunksize)

假设chunksize的大小为16348，整个文件的数据块如下所示：

3、发送文件示例

本示例为文件具休步骤如下：

（1）首先在界面上添加input,类型为file,用于选择并读取文件，progress两个，分别用于发送及接收文件进度展示。

（2）创建本地和远端连接，发送和接收数据通道，发送和接收通道的数据类型设置为arraybuffer。

（3）建立本地和远端连接

（4）实例化FileReader对象，并添加如下事件：

error: 读取文件错误

abort: 读取文件取消

load: 文件加载完成

load事件表示数据已经准备好，可以进行切割发送，具体处理逻辑如下所示：

//监听load事件
fileReader.addEventListener('load',(e)=>{
    ...
   //发送文件数据
   sendChannel.send(e.target.result);
    //偏移量
   offer+=e.target.result.byteLength;
   ...
    //判断偏移量是否小于文件大小
   if(offer<file.size){
     //继续读取
     readSlice(offser)
  

   }
});
 //读取切片大小
let readSlice=(o)=>{
  ...
  //开始切片
  let slice=file.slice(offset ,o+chunksize);
 //读取二进制数据  
 fileReader.readAsArrayBuffer(slice);

}

（5）数据接收处理，将收到第一个数据放入receiveBuffer缓存，处理逻辑如下所示：

//接收消息处理
onReceiveMessageCallback=(event)=>{
//将接收的数据添加到接收缓存里
    receiveBuffer.push(event.data);
//设置当前接收文件的大小
   receivedSize+=event.data.byteLength;
   ...
   const file=fileInput.files[0];
//判断当前接收的文件大小是否等于文件的大小
if(rec