Tagged

rrweb

A collection of 1 post

页面录制

web页面录制、回放以及生成视频

假如有这么一个需求: 记录一个用户在页面上的所有操作,包括点击、滑动、表单填写等;可以回放用户的操作;对现有代码侵入影响小;我们该如何去做呢?方案一客户端截图并上传至服务端服务端图片合成视频回放端播放视频试想一下,如果这么做会有什么问题? 首先服务端图片合成视频可以使用ffmpeg,生成mp4文件,回放端播放mp4文件就较简单了。 但是在客户端的问题就比较多了: 1. 怎么截图? 我们可以采用html2canvas或rasterizeHTML。 html2canvas的原理: 通过遍历DOM克隆一份副本,将此副本在Canvas上重新绘制,并根据DOM的样式应用在对应的绘制元素上,再通过Canvas生成图片。转换过程可理解成:DOM→Canvas→Image。rasterizeHTML原理: 通过遍历DOM克隆一份副本,利用SVG的foreignObject把DOM作为外部资源嵌套在SVG中,将此SVG在Canvas上重新绘制,并根据DOM的样式应用在对应的绘制元素上,再通过Canvas生成图片。转换过程可理解成:DOM→SVG的ForeignObject→Canvas→Image。两种截图方式最后都是通过把DOM绘制到Canvas,再通过Canvas输出图片。所以并不是直接屏幕截图,而是基于从 DOM 读取的属性构建页面的表示。因此,它只能正确地描述它所理解的属性,所以许多 CSS 属性可能不起作用。 另外两种方式都存在比较多的问题和限制: Canvas截图的限制性