富媒体是指在即时通信过程中传输的图片、语音、视频、文件等媒体介质的展示方式。

　　客服一站式平台旨在为得物生态内的客服域服务人员提供一站式的服务办公平台。我们有多条业务线，客服在和用户聊天的过程中，有很多场景需要发送富媒体。跟普通的文本传输相比，富媒体可以直观地用户了解到消息内容，但是在传输过程中也面临着文件大、内存消耗大、传输过程漫长等问题。

　　在整个传输过程中，前端必须等文件上传成功拿到链接之后，才能渲染，如果传输的文件很大，客服需要会等待很长时间，这对于客服的接线效率有非常大的影响。比较理想的方式是当客服发送文件的时候，文件立马在聊天窗口渲染，此时渲染的不是完整的文件，而是文件的画像，比如文件的名字、封面图片，通过消息的状态进行上传状态的控制。

　　以视频传输为例IM电竞，如果直接把视频放在缓存中展示在客服聊天内容区域，庞大的缓存会让用户的浏览器分分钟崩溃。比如大于70M的视频，在网络，电脑硬件等环境都较好的情况下，从读取文件到获取到首帧图片传输的过程大概需要2~3s，如果在网络一般，同一环境下有多人在发送视频文件，或者硬件设备一般的情况下时间会更长。

　　最初使用的方式是在视频上传CDN时，同时截取视频首帧，然后将截取的视频首帧也上传到CDN，再通过长链（wss）发送给客户端，因为截取首帧是一个同步的过程，需要拿到screenshot的url之后才能渲染到页面，导致客服在点击发送的第一时间在聊天界面看不到发送出去的视频，如上图视频所示，客服无法感知到视频发送的进度。

　　如上代码 video.setAttribute(src, target)，如果用target作为视频的url在页面渲染，页面会分分钟崩溃。可以看一下1M的视频文件，通过readAsDataURL(file)读取文件内容得到是一个data:url的base64字符串，IM电竞用这个字符串进行渲染，等于在页面加了一个1.4M的字符串内容，如下图所示，这样做的后果不可想象，在文件稍微大一些的话会有更加明显的卡顿。

　　在第一种方案被否定之后，又调研了URL.createObjectURL的实现。IM电竞采用的URL.createObjectURL(file) 获取到URL(这个URL对象表示指定的 File 对象或 Blob 对象)，然后放到聊天数据的缓存中，便于快速发送到客服聊天窗口页面。其主要实现代码如下：

　　经过这个改造很明显的看到视频发出之后，可以很快的展示在页面上，让客服感知到视频发送的状态和进度，相对于方案一，视频发送的过程有明显的提升。渲染出来的代码效果如下图所示：

　　在给客户端发送视频信息时IM电竞，要携带首帧和视频时长，作为展示封面，历史的做法是：

　　取首帧时要读取文件，既然是读取文件，还是存在一定的耗时，如下代码片段所示，这段耗时任务也会影响到客服的使用体验。

　　上传视频的时候，文件服务器提供了获取首帧的方式拿到首帧图片，在链接地址上拼接对应的参数即可，如下所示：

　　但在实际的使用场景中，只获取视频首帧信息是不够的，还要获取视频的宽高、播放时长等信息，并且通过网络请求发送给网关，最终在客户端展示。读取文件这个过程无法避免，耗时问题还需要解决。

　　通过方案二虽然实现了文件的快速渲染，但读取文件信息如果在浏览器的主线程去做，耗时长的话im新闻，还是会阻碍客服的操作。如果这个过程能通过异步去实现，那就很完美了。JS虽然是单线程，但是浏览器提供了Web Worker的能力，让JS也能通过异步的方式和主线程进行通信。首先对比下浏览器主线程执行和主子线程执行的区别，如下图所示：

　　通过上面的三个步骤，基本就可以在不影响客服操作的情况下获取到文件信息。获取到视频信息对象之后，再通过URL.createObjectURL(file)即可获取到视频相关的属性信息，如下：

　　如上所述，在获取文件对象信息之后，再通过blob的方式直接获取视频的宽高作为第一帧图片的宽高，二者结合即达到了在不影响客服操作的情况下，让视频发送做到了如丝般顺滑。

　　通过Web Worker+URL.createObjectURL(file)的方式，解决了富媒体文件发送时，不管有没有发送成功，都可以实现秒发的效果，即让视频信息先展示到聊天框，再通过发送状态来标识当前的发送进度。IM电竞

　　富媒体发送在很多IM场景中均会涉及到，用什么样的技术实现能够让客服和用户之间沟通和交流更便捷是本文阐述的重点。通过在实际客服业务场景中的实践，本文的技术方案已经很好的解决了业务中的问题并且实际线上也一直比较稳定的在运行。从业务中发现问题，用技术手段解决问题，提升客服的解决效率，给用户带来好的体验是我们不断追求的目标，如果看了本文之后，你有更好的建议可以给我们留言。此外客服领域的技术点远不止这些，脚踏实地，一步一个脚印，相信即时通讯在客服领域的沉淀会越来越好。

　　其中流媒体是一种传输方式，富媒体是不同于纯文本的一种展示方式，多媒体是展示内容的一种手段。

　　关注得物技术，每周一三五晚18:30更新技术干货要是觉得文章对你有帮助的话，欢迎评论转发点赞～