大家知道TSINGSEE青犀视频的流媒体平台都是可以进行录像回放和视频文件下载的，下载的录像文件有TS切片文件，也可以合成为一个mp4格式的视频流。
EasyRTC作为TSINGSEE青犀视频开发的远程视频通话平台，当然也是可以对录像文件进行回放以及下载的。但是在测试中，我们发现平台内的传输只能发送文件切片数据，导致接收端下载文件没有文件名以及文件后缀。
于是我们首先来分析一下平台的发送机制，发送文件前先发送条消息到接收端：
let filesInfo = {
name: file.name, //文件名
size: file.size, //文件大小，判断文件切片是否有丢失
}
sendChannel.send(JSON.stringify(filesInfo))发送文件前的数据与文本通信的数据格式一样。在接收端添加判断条件，将发送文件前的数据保存起来，代码如下：
if (typeof event.data === ‘string‘ ? true : false){
let msgData = JSON.parse(event.data)
if (msgData.type === ‘message‘){
this.msgData.push(JSON.parse(event.data))
this.getTipType(‘msg‘)
}else{
// 获取文件第一条信息
this.filesData.push(JSON.parse(event.data))
}
}
if (typeof event.data !== ‘string‘ ? true : false){
this.receiveBuffer.push(event.data)//将接收到的数据添加到接收缓存里
this.receivedSize += event.data.byteLength; //设置当前接收文件的大小
let filesInfo = JSON.parse(JSON.stringify(this.filesData))
if (this.receivedSize === filesInfo[0].size){
const received = new Blob(this.receiveBuffer)// 生成Blob文件
this.receiveBuffer = [] // 将缓存数据置空
this.filesData = []
this.downData = { // 添加a标签信息
url: URL.createObjectURL(received),
name: filesInfo[0].name,
size: filesInfo[0].size,
}
this.receivedSize = 0
this.receiveState = true
this.fileTip = true
}
this.getTipType(‘file‘)
}
}如此修改之后，文件、文本传输则可以互不影响。
接收端：
发送端：
下载的文件如下，正常显示文件名以及文件后缀:
EasyRTC一直致力于技术突破，目前也正在进行新版本的研发，5G的落地与商用将开启万物互联的智能新时代，得益于5G的大带宽和低延时特性，音视频互动领域将成为最直接的受益者。未来，在5G、AI等新技术风口之下，以TSINGSEE青犀视频为首的音视频互动解决方案公司，将帮助音视频行业拥抱更美好的未来。