在开源Anys之后，我再次把自己的压箱底作品公开发布。【原创不易，请尊重版权】原创内容，盗版必究。在此之前，我一直的想法是密而不发，毕竟现著作权归作者所有，禁止商业用途转载。【转载请注明来源】在的伸手党实在是太多了，白嫖过去用，一分【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。钱不掏，最后还可能被喷。虽然开源本身是非原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net常好的，可以促进技术的发展，相互学习，一【原创内容，转载请注明出处】原创内容，盗版必究。起创造出一些有意思的东西出来。然而，由于【作者：唐霜】转载请注明出处：www.tangshuang.net环境不好，好好的一件事，最后搞的不愉快。【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。因此，我现在开源也好，公开发布新东西也好转载请注明出处：www.tangshuang.net原创内容，盗版必究。，也都留了一个心眼，避免卷入这些内耗纷争【转载请注明来源】【原创内容，转载请注明出处】。
【本文受版权保护】著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshua【原创内容，转载请注明出处】【本文首发于唐霜的博客】ng.net今天发布的是我在后台用来进行日志回放的播【本文首发于唐霜的博客】【作者：唐霜】放器，取名web-replayer，见名著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】知意。
原创内容，盗版必究。本文作者：唐霜，转载请注明出处。【转载请注明来源】https://www.npmjs.co原创内容，盗版必究。【未经授权禁止转载】m/package/web-replay原创内容，盗版必究。转载请注明出处：www.tangshuang.neter
本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】简单讲它就是一个用代码来进行演示的播放器【未经授权禁止转载】【原创不易，请尊重版权】。什么意思呢？就是它让你的代码执行，像播【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】放器播放视频一样进行执行。我们使用any【未经授权禁止转载】转载请注明出处：www.tangshuang.nets的一个能力，就是录制前端页面的变更，用【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】户的行为等等。那么当这些数据进入数据库之【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net后，通过web-replayer，就可以【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。把这些日志数据取出来进行回放，这样我们就著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。可以在web-replayer中，看到用著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】户的操作，以及当时的情况。那么具体怎么把本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】一条条日志数据进行播放呢？这里就需要引入未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net视频里面的“帧”的概念，理论上，1条日志转载请注明出处：www.tangshuang.net【本文受版权保护】就是1帧。因此，我们只需要把这些一帧一帧本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。的过程，在web环境下给它呈现出来。怎么原创内容，盗版必究。【作者：唐霜】呈现呢？当然是操作DOM了。因此，我们只著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。需要提供每一帧，如何操作DOM即可。如何未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。操作DOM，则是依赖日志本身，当我们看到著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net是一条mousemove的日志时，我们就【版权所有】唐霜 www.tangshuang.net【作者：唐霜】操作DOM里面用来模拟鼠标的元素进行移动原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。；当我们看到是一条snapshot的日志【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】时，我们就直接用HTML镜像覆盖当前的D本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。OM。这样，我们把对每一条日志对应的DO著作权归作者所有，禁止商业用途转载。【本文受版权保护】M操作都写好之后，我们只需要按照时间的流【转载请注明来源】著作权归作者所有，禁止商业用途转载。逝，不断去执行这些动作即可。这就是web【未经授权禁止转载】原创内容，盗版必究。-replayer的底层思路。当然，它自【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。己还有一些其他方面的设计和考虑，但是核心【原创内容，转载请注明出处】原创内容，盗版必究。思路就在这里。
本文作者：唐霜，转载请注明出处。【转载请注明来源】著作权归作者所有，禁止商业用途转载。基于这一思路，web-replayer不【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】单单可以用来回放日志，你甚至可以用来实现著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net一段视频，因为你可以在帧上操作图片、声音【原创内容，转载请注明出处】【作者：唐霜】等素材，通过代码来编写这些东西，就可以实本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】现一种神奇的“用代码做视频”的效果。
未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。好了，如果你有兴趣，不妨通过上面的链接去【未经授权禁止转载】【未经授权禁止转载】下载和使用web-replayer。最后著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net，我使用了较为严格的license，主要转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】是防止某些不良服务商白嫖。如果你是个人，【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net且不需要对源码进行修改，也不需要部署自己【转载请注明来源】【关注微信公众号：wwwtangshuangnet】的服务，那么可以随便使用。
【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。
