web页面录屏实现
|
副标题[/!--empirenews.page--]
在看到评论后，突然意识到自己没有提前说明，本文可以说是一篇调研学习文，是我自己感觉可行的一套方案，后续会去读读已经开源的一些类似的代码库，补足自己遗漏的一些细节，所以大家可以当作学习文，生产环境慎用。 录屏重现错误场景 如果你的应用有接入到web apm系统中，那么你可能就知道apm系统能帮你捕获到页面发生的未捕获错误，给出错误栈，帮助你定位到BUG。但是，有些时候，当你不知道用户的具体操作时，是没有办法重现这个错误的，这时候，如果有操作录屏，你就可以清楚地了解到用户的操作路径，从而复现这个BUG并且修复。 实现思路 思路一：利用Canvas截图 这个思路比较简单，就是利用canvas去画网页内容，比较有名的库有： html2canvas ，这个库的简单原理是： 收集所有的DOM，存入一个queue中； 根据zIndex按照顺序将DOM一个个通过一定规则，把DOM和其CSS样式一起画到Canvas上。 这个实现是比较复杂的，但是我们可以直接使用，所以我们可以获取到我们想要的网页截图。 为了使得生成的视频较为流畅，我们一秒中需要生成大约25帧，也就是需要25张截图，思路流程图如下： 但是，这个思路有个最致命的不足：为了视频流畅，一秒中我们需要25张图，一张图300KB，当我们需要30秒的视频时，图的大小总共为220M，这么大的网络开销明显不行。 思路二：记录所有操作重现 为了降低网络开销，我们换个思路，我们在最开始的页面基础上，记录下一步步操作，在我们需要"播放"的时候，按照顺序应用这些操作，这样我们就能看到页面的变化了。这个思路把鼠标操作和DOM变化分开： 鼠标变化： 监听mouseover事件，记录鼠标的clientX和clientY。 重放的时候使用js画出一个假的鼠标，根据坐标记录来更改"鼠标"的位置。 DOM变化： 对页面DOM进行一次全量快照。包括样式的收集、JS脚本去除，并通过一定的规则给当前的每个DOM元素标记一个id。 监听所有可能对界面产生影响的事件，例如各类鼠标事件、输入事件、滚动事件、缩放事件等等，每个事件都记录参数和目标元素，目标元素可以是刚才记录的id，这样的每一次变化事件可以记录为一次增量的快照。 将一定量的快照发送给后端。 在后台根据快照和操作链进行播放。 当然这个说明是比较简略的，鼠标的记录比较简单，我们不展开讲，主要说明一下DOM监控的实现思路。 页面首次全量快照 首先你可能会想到，要实现页面全量快照，可以直接使用 outerHTML const content = document.documentElement.outerHTML; 这样就简单记录了页面的所有DOM，你只需要首先给DOM增加标记id，然后得到outerHTML，然后去除JS脚本。 但是，这里有个问题，使用 outerHTML 记录的DOM会将把临近的两个TextNode合并为一个节点，而我们后续监控DOM变化时会使用 MutationObserver ，此时你需要大量的处理来兼容这种TextNode的合并，不然你在还原操作的时候无法定位到操作的目标节点。 那么，我们有办法保持页面DOM的原有结构吗？ 答案是肯定的，在这里我们使用Virtual DOM来记录DOM结构，把documentElement变成Virtual DOM，记录下来，后面还原的时候重新生成DOM即可。 DOM转化为Virtual DOM 我们在这里只需要关心两种Node类型： Node.TEXT_NODE 和 Node.ELEMENT_NODE 。同时，要注意，SVG和SVG子元素的创建需要使用API：createElementNS，所以，我们在记录Virtual DOM的时候，需要注意namespace的记录，上代码： const SVG_NAMESPACE = 'http://www.w3.org/2000/svg'; const XML_NAMESPACES = ['xmlns', 'xmlns:svg', 'xmlns:xlink']; function createVirtualDom(element, isSVG = false) { switch (element.nodeType) { case Node.TEXT_NODE: return createVirtualText(element); case Node.ELEMENT_NODE: return createVirtualElement(element, isSVG || element.tagName.toLowerCase() === 'svg'); default: return null; } } function createVirtualText(element) { const vText = { text: element.nodeValue, type: 'VirtualText', }; if (typeof element.__flow !== 'undefined') { vText.__flow = element.__flow; } return vText; } function createVirtualElement(element, isSVG = false) { const tagName = element.tagName.toLowerCase(); const children = getNodeChildren(element, isSVG); const { attr, namespace } = getNodeAttributes(element, isSVG); const vElement = { tagName, type: 'VirtualElement', children, attributes: attr, namespace, }; if (typeof element.__flow !== 'undefined') { vElement.__flow = element.__flow; } return vElement; } function getNodeChildren(element, isSVG = false) { const childNodes = element.childNodes ? [...element.childNodes] : []; const children = []; childNodes.forEach((cnode) => { children.push(createVirtualDom(cnode, isSVG)); }); return children.filter(c => !!c); } function getNodeAttributes(element, isSVG = false) { const attributes = element.attributes ? [...element.attributes] : []; const attr = {}; let namespace; attributes.forEach(({ nodeName, nodeValue }) => { attr[nodeName] = nodeValue; if (XML_NAMESPACES.includes(nodeName)) { namespace = nodeValue; } else if (isSVG) { namespace = SVG_NAMESPACE; } }); return { attr, namespace }; } 通过以上代码，我们可以将整个documentElement转化为Virtual DOM，其中__flow用来记录一些参数，包括标记ID等，Virtual Node记录了：type、attributes、children、namespace。 Virtual DOM还原为DOM 将Virtual DOM还原为DOM的时候就比较简单了，只需要递归创建DOM即可，其中nodeFilter是为了过滤script元素，因为我们不需要JS脚本的执行。 （编辑：济南站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
